WPF主窗口中复用同一View/ViewModel的四个TabItem，如何标识所属项？

我在学习WPF/MVVM时，实现了一个包含TabControl和四个TabItem的MainWindow。每个TabItem复用同一套内容：带有四个CheckBox的OneView及其对应的OneViewModel。从构造函数的Debug.WriteLine输出可以确认，View和ViewModel均被实例化了四次。

当前需求是：每个Tab的数据需要单独存储到后端（存储类型暂未确定），因此必须让每个View及对应的ViewModel实例明确自身所属的TabItem，以此区分并单独保存各Tab内CheckBox的选中状态。

我曾尝试使用ObjectDataProvider向OneView的构造函数传递参数，但未成功，现寻求可行的解决方法。

现有代码 #

MainWindow.xaml

<Window x:Class="FourTabsOneView.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:vws="clr-namespace:FourTabsOneView.Views"
    mc:Ignorable="d"
    Title="MainWindow" Height="200" Width="400">
    <TabControl x:Name="tControl">
        <TabItem x:Name="One" Header="TabOne" Width="80">
            <vws:OneView/>
        </TabItem>

        <TabItem x:Name="Two" Header="TabTwo" Width="80">
            <vws:OneView/>
        </TabItem>

        <TabItem x:Name="Three" Header="TabThree" Width="80">
            <vws:OneView/>
        </TabItem>

        <TabItem x:Name="Four" Header="TabFour" Width="80">
            <vws:OneView/>
        </TabItem>
    </TabControl>
</Window>

OneView.xaml

<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" 
             xmlns:vms="clr-namespace:FourTabsOneView.ViewModels"
             mc:Ignorable="d" 
             d:DesignHeight="200" d:DesignWidth="400">

    <UserControl.DataContext>
        <vms:OneViewModel />
    </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>

可行解决方案 #

方法一：通过DataContext直接传递标识（推荐，符合MVVM规范）

1. 修改OneViewModel，添加构造参数接收Tab标识，同时保留数据保存的区分逻辑：

using System.ComponentModel;
using System.Diagnostics;

namespace FourTabsOneView.ViewModels
{
    public class OneViewModel : INotifyPropertyChanged
    {
        public string TabIdentifier { get; }

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

        // 重复CB02-CB04的属性实现...

        public OneViewModel(string tabIdentifier)
        {
            TabIdentifier = tabIdentifier;
            Debug.WriteLine($"ViewModel实例化，所属Tab：{TabIdentifier}");
        }

        // 数据保存方法，通过TabIdentifier区分存储
        public void SaveTabData()
        {
            // 示例逻辑：根据TabIdentifier将当前CB状态写入后端
            Debug.WriteLine($"保存Tab {TabIdentifier} 数据：A={CB01}, B={CB02}, C={CB03}, D={CB04}");
        }

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

2. 修改MainWindow.xaml，为每个OneView单独设置DataContext，传入对应的Tab标识：

<TabControl x:Name="tControl">
    <TabItem x:Name="One" Header="TabOne" Width="80">
        <vws:OneView>
            <vws:OneView.DataContext>
                <vms:OneViewModel tabIdentifier="TabOne"/>
            </vws:OneView.DataContext>
        </vws:OneView>
    </TabItem>

    <TabItem x:Name="Two" Header="TabTwo" Width="80">
        <vws:OneView>
            <vws:OneView.DataContext>
                <vms:OneViewModel tabIdentifier="TabTwo"/>
            </vws:OneView.DataContext>
        </vws:OneView>
    </TabItem>

    <!-- 重复TabThree、TabFour的配置 -->
</TabControl>

3. 移除OneView内的DataContext设置，避免自动实例化无标识的ViewModel：

<!-- 删除OneView中的这段代码 -->
<!--
<UserControl.DataContext>
    <vms:OneViewModel />
</UserControl.DataContext>
-->

方法二：给OneView添加依赖属性传递标识

如果需要在View层直接控制标识传递，可以通过依赖属性实现：

1. 在OneView中定义依赖属性：

using System.Windows;
using System.Windows.Controls;
using FourTabsOneView.ViewModels;

namespace FourTabsOneView.Views
{
    public partial class OneView : UserControl
    {
        public static readonly DependencyProperty TabIdentifierProperty =
            DependencyProperty.Register("TabIdentifier", typeof(string), typeof(OneView),
                new PropertyMetadata(null, OnTabIdentifierChanged));

        public string TabIdentifier
        {
            get => (string)GetValue(TabIdentifierProperty);
            set => SetValue(TabIdentifierProperty, value);
        }

        private static void OnTabIdentifierChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            if (d is OneView view && view.DataContext is OneViewModel vm)
            {
                // 这里需要ViewModel的TabIdentifier是可设置的属性
                vm.TabIdentifier = e.NewValue as string;
            }
        }

        public OneView()
        {
            InitializeComponent();
        }
    }
}

2. 修改OneViewModel，将TabIdentifier改为可设置的属性：

private string _tabIdentifier;
public string TabIdentifier
{
    get => _tabIdentifier;
    set
    {
        _tabIdentifier = value;
        OnPropertyChanged(nameof(TabIdentifier));
    }
}

3. 在MainWindow中设置OneView的TabIdentifier：

<TabItem x:Name="One" Header="TabOne" Width="80">
    <vws:OneView TabIdentifier="TabOne"/>
</TabItem>
<TabItem x:Name="Two" Header="TabTwo" Width="80">
    <vws:OneView TabIdentifier="TabTwo"/>
</TabItem>

方法三：利用Tag属性快速传递（轻量方案）

如果不想修改ViewModel和View的结构，可以借助WPF控件自带的Tag属性：

1. 在MainWindow中给OneView设置Tag：

<TabItem x:Name="One" Header="TabOne" Width="80">
    <vws:OneView Tag="TabOne"/>
</TabItem>

2. 在OneView的Loaded事件中传递Tag到ViewModel：

public OneView()
{
    InitializeComponent();
    Loaded += (s, e) =>
    {
        if (DataContext is OneViewModel vm && Tag != null)
        {
            vm.TabIdentifier = Tag.ToString();
        }
    };
}

同时确保OneViewModel有可设置的TabIdentifier属性即可。

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