如何在MVVM模式下为ListView添加项并绑定列表内按钮命令？

我来一步步帮你搞定这个需求，结合你现有的代码，咱们分几个关键步骤来操作：

1. 创建列表项的数据模型 #

首先需要为ListView的每一项定义一个数据模型，用来存储项的信息，同时支持属性变更通知（这样属性变化时UI会自动更新）。创建一个类似下面的类：

using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace mvvm_apple.Model
{
    public class FruitItem : INotifyPropertyChanged
    {
        private string _name;
        public string Name
        {
            get => _name;
            set
            {
                _name = value;
                NotifyPropertyChanged();
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        private void NotifyPropertyChanged([CallerMemberName] string propertyName = "")
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

2. 升级ViewModel：添加集合与命令 #

接下来修改你的VM_MaListe，添加用于绑定ListView的可观察集合，以及添加项、处理项内按钮点击的命令。这里假设你用的是MvvmLight框架（因为你用到了ViewModelLocator和RelayCommand）：

using System.Collections.ObjectModel;
using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Command;
using mvvm_apple.Model;

namespace mvvm_apple.ViewModel
{
    public class VM_MaListe : ViewModelBase
    {
        private readonly INavigationService _navigationService;

        // 绑定ListView的集合，ObservableCollection会自动通知UI集合变化
        public ObservableCollection<FruitItem> FruitList { get; set; }

        // 添加新项的命令
        public RelayCommand AddItemCommand { get; private set; }

        // 项内按钮的命令（支持传递当前项作为参数）
        public RelayCommand<FruitItem> ItemButtonCommand { get; private set; }

        public RelayCommand RetourAuMenu { get; private set; }

        public VM_MaListe(INavigationService navigationService)
        {
            _navigationService = navigationService;
            RetourAuMenu = new RelayCommand(_RetourAuMenu);
            
            // 初始化集合
            FruitList = new ObservableCollection<FruitItem>();
            // 初始化添加项命令
            AddItemCommand = new RelayCommand(AddNewItem);
            // 初始化项内按钮命令
            ItemButtonCommand = new RelayCommand<FruitItem>(HandleItemButtonClick);
        }

        private void _RetourAuMenu()
        {
            _navigationService.GoBack();
        }

        // 添加新项的逻辑
        private void AddNewItem()
        {
            // 这里可以根据实际需求生成新项，比如从用户输入获取或者生成默认值
            FruitList.Add(new FruitItem { Name = $"苹果 {FruitList.Count + 1}" });
        }

        // 处理项内按钮点击的逻辑
        private void HandleItemButtonClick(FruitItem item)
        {
            // 替换成你实际的业务逻辑，比如删除项、导航到详情页等
            System.Diagnostics.Debug.WriteLine($"点击了{item.Name}的操作按钮");
        }
    }
}

如果你没有继承ViewModelBase，可以保留你原来的NotifyPropertyChanged方法，不过用框架提供的基类会更简洁。

3. 修改View：完成ListView的绑定 #

最后修改你的MaListe.xaml，给ListView绑定数据源，设置项模板，同时添加添加项的按钮：

<Page x:Class="mvvm_apple.Vue.MaListe" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      xmlns:local="using:mvvm_apple.Vue" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      DataContext="{Binding CinqPageInstace, Source={StaticResource Locator}}" 
      mc:Ignorable="d" Width="1280" Height="800">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <!-- 返回按钮 -->
        <Button Content="Retour" Command="{Binding RetourAuMenu}" Margin="41,45,0,722"/>
        
        <!-- 添加项的按钮 -->
        <Button Content="Ajouter un fruit" Command="{Binding AddItemCommand}" Margin="41,150,0,0" VerticalAlignment="Top" HorizontalAlignment="Left"/>
        
        <!-- ListView绑定 -->
        <ListView HorizontalAlignment="Left" Height="398" Margin="41,212,0,0" VerticalAlignment="Top" Width="1187"
                  ItemsSource="{Binding FruitList}">
            <!-- 定义每一项的模板 -->
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid Margin="5" HorizontalAlignment="Stretch">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <!-- 显示项的名称 -->
                        <TextBlock Text="{Binding Name}" VerticalAlignment="Center" FontSize="18"/>
                        <!-- 项内的操作按钮：绑定到页面ViewModel的命令，传递当前项作为参数 -->
                        <Button Grid.Column="1" Content="操作" 
                                Command="{Binding DataContext.ItemButtonCommand, RelativeSource={RelativeSource AncestorType=ListView}}"
                                CommandParameter="{Binding}"/>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</Page>

关键细节说明 #

• ObservableCollection的作用：它实现了INotifyCollectionChanged接口，当你添加、删除集合中的项时，ListView会自动刷新UI，不需要手动触发属性变更通知。
• 项内按钮的绑定技巧：因为ListView项的DataContext是FruitItem，而我们的命令在页面ViewModel中，所以需要通过RelativeSource找到ListView的DataContext（也就是页面ViewModel），再绑定到对应的命令，同时用CommandParameter="{Binding}"把当前项传递给命令。
• 命令参数支持：确保你的RelayCommand支持泛型重载（比如RelayCommand<T>），这样才能接收当前项作为参数。

内容的提问来源于stack exchange，提问作者CorentinMerit