WPF MVVM模式下为ItemsControl每项配置独立ViewModel子视图

核心思路 #

要让每个JobWidget拥有独立的JobWidgetViewModel，关键是让父视图的ItemsControl绑定**JobWidgetViewModel的集合**，而非直接绑定Job对象集合。这样每个JobWidget的DataContext会自动对应到集合中的JobWidgetViewModel，既保证绑定有效，又能实现子视图复用。

步骤1：实现JobWidgetViewModel #

创建独立的子ViewModel，接收Job对象作为参数，封装需要绑定的属性和按钮命令：

public class JobWidgetViewModel : INotifyPropertyChanged
{
    private Job _job;
    public ICommand OperateJobCommand { get; }

    // 暴露原始Job对象，或包装属性简化绑定
    public Job Job
    {
        get => _job;
        set
        {
            _job = value;
            OnPropertyChanged(nameof(Job));
            OnPropertyChanged(nameof(JobName));
            OnPropertyChanged(nameof(JobStatus));
        }
    }

    public string JobName => _job?.Name;
    public JobStatus JobStatus => _job?.Status ?? JobStatus.Idle;

    public JobWidgetViewModel(Job job)
    {
        _job = job;
        OperateJobCommand = new RelayCommand(ExecuteOperateJob);
    }

    // 按钮点击逻辑示例
    private void ExecuteOperateJob()
    {
        _job.Status = JobStatus.Running;
        OnPropertyChanged(nameof(JobStatus));
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

步骤2：调整父ViewModel（JobsViewModel） #

将原来的Job集合替换为JobWidgetViewModel集合，初始化时将每个Job包装成子ViewModel：

public class JobsViewModel : INotifyPropertyChanged
{
    public ObservableCollection<JobWidgetViewModel> JobWidgetViewModels { get; }

    public JobsViewModel()
    {
        JobWidgetViewModels = new ObservableCollection<JobWidgetViewModel>();
        
        // 示例：从数据源获取Job列表并包装
        var rawJobs = FetchJobsFromDataSource();
        foreach (var job in rawJobs)
        {
            JobWidgetViewModels.Add(new JobWidgetViewModel(job));
        }
    }

    // 原有业务逻辑...

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

步骤3：更新JobsView的ItemsControl #

直接绑定到JobWidgetViewModels集合，JobWidget的DataContext会自动匹配集合项：

<ItemsControl ItemsSource="{Binding JobWidgetViewModels}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <!-- 无需手动设置DataContext，自动继承当前项的JobWidgetViewModel -->
            <local:JobWidget />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

步骤4：配置JobWidget的绑定 #

在JobWidget的XAML中直接绑定JobWidgetViewModel的属性和命令：

<UserControl x:Class="YourNamespace.JobWidget"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <StackPanel Margin="8" BorderBrush="#E0E0E0" BorderThickness="1">
        <TextBlock Text="{Binding JobName}" FontSize="14" FontWeight="Bold" />
        <TextBlock Text="{Binding JobStatus}" Margin="0,4,0,8" />
        <Button Content="启动任务" Command="{Binding OperateJobCommand}" />
    </StackPanel>
</UserControl>

为什么之前的方法失效？ #

• 直接给JobWidget设置DataContext会覆盖ItemsControl自动传递的项（原Job对象），导致绑定找不到对应属性。
• 现在每个ItemsControl项是JobWidgetViewModel，JobWidget的DataContext自动关联到该ViewModel，既保证绑定有效，又让JobWidget摆脱对父ViewModel的依赖，实现复用。

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