如何将动态创建的TabItems绑定到各自的DataContext（WPF/MVVM）

问题背景 #

已基于ObservableCollection实现TabItem动态创建，需要将每个TabItem绑定到OneViewModel中对应的MyTabItem类实例，尝试TabControl_SelectionChanged事件关联未成功，需遵循MVVM规范的实现方法。

核心问题分析 #

当前代码中OneView硬编码了DataContext为新的OneViewModel实例，导致每个Tab的内容都绑定到独立的ViewModel，而非当前Tab对应的MyTabItem对象，这是关联失败的根本原因。

解决方案步骤 #

1. 修正OneView的DataContext绑定

移除OneView中硬编码的DataContext配置，让它自动继承父级（即当前Tab项）的DataContext：

<UserControl x:Class="FourTabsOneView.Views.OneView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="200" d:DesignWidth="400">
    <!-- 移除原有<UserControl.DataContext>节点 -->
    <StackPanel Orientation="Vertical">
        <CheckBox x:Name="cb01" IsThreeState="False" Height="30" 
                  IsChecked="{Binding CB01}"
                  Content="CheckBox A" />
        <CheckBox x:Name="cb02" IsThreeState="False" Height="30"
                  IsChecked="{Binding CB02}"
                  Content="CheckBox B" />
        <CheckBox x:Name="cb03" IsThreeState="False" Height="30"
                  IsChecked="{Binding CB03}"
                  Content="CheckBox C" />
        <CheckBox x:Name="cb04" IsThreeState="False" Height="30"
                  IsChecked="{Binding CB04}"
                  Content="CheckBox D" />
    </StackPanel>
</UserControl>

2. 优化TabControl配置（移除事件，添加选中项绑定）

去掉SelectionChanged事件，通过绑定实现选中项的ViewModel层面控制，符合MVVM规范：

<TabControl ItemsSource="{Binding MyTabItems}"
            SelectedItem="{Binding SelectedTabItem}">
    <TabControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Header}" />
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <DataTemplate>
            <vws:OneView /> 
        </DataTemplate>
    </TabControl.ContentTemplate>            
</TabControl>

3. 更新OneViewModel，添加选中项属性

在OneViewModel中添加SelectedTabItem属性，用于跟踪当前选中的Tab对应的MyTabItem实例：

namespace FourTabsOneView.ViewModels;
internal class OneViewModel : ViewModelBase
{
    public ObservableCollection<MyTabItem> MyTabItems { get; set; }    

    private MyTabItem _selectedTabItem;
    public MyTabItem SelectedTabItem
    {
        get => _selectedTabItem;
        set
        {
            _selectedTabItem = value;
            OnPropertyChanged(nameof(SelectedTabItem));
            // 可在此添加选中项切换后的逻辑，替代SelectionChanged事件
        }
    }

    public OneViewModel()
    {
        Debug.WriteLine("OneViewModel ctor");
        MyTabItems = new ObservableCollection<MyTabItem>
        {
            new MyTabItem { ID = 1, Header = "TabOne" },
            new MyTabItem { ID = 2, Header = "TabTwo" },
            new MyTabItem { ID = 3, Header = "TabThree" },
            new MyTabItem { ID = 4, Header = "TabFour" }
        };
        SelectedTabItem = MyTabItems.FirstOrDefault(); // 默认选中第一个Tab
    }

    public sealed class MyTabItem : ViewModelBase
    {
        public int ID { get; set; }
        public string? Header { get; set; }

        private bool cb01_checked;
        public bool CB01
        {
            get => cb01_checked;
            set
            {
                cb01_checked = value;
                OnPropertyChanged(nameof(CB01));
            }
        }

        private bool cb02_checked;
        public bool CB02
        {
            get => cb02_checked;
            set
            {
                cb02_checked = value;
                OnPropertyChanged(nameof(CB02));
            }
        }

        private bool cb03_checked;
        public bool CB03
        {
            get => cb03_checked;
            set
            {
                cb03_checked = value;
                OnPropertyChanged(nameof(CB03));
            }
        }

        private bool cb04_checked;
        public bool CB04
        {
            get => cb04_checked;
            set
            {
                cb04_checked = value;
                OnPropertyChanged(nameof(CB04));
            }
        }
    }
}

4. 移除MainWindow中的SelectionChanged事件处理

删除MainWindow中tControl_SelectionChanged方法，以及XAML中的SelectionChanged属性配置，彻底脱离代码后置的事件处理。

原理说明 #

TabControl绑定MyTabItems后，每个Tab项的DataContext自动设置为对应的MyTabItem实例。ContentTemplate中的OneView会继承这个DataContext，因此控件上的{Binding CB01}等绑定会直接关联到当前Tab对应的MyTabItem的属性，无需额外手动关联。

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