c# - 在 WPF 中使用单独的 ViewModel 将多个选项卡视为单独的 View

Question

在 WPF 中，我有一个窗口包含一个带有四个 TabItem 的 TabControl。每个 TabItem 都有一个 Grid:

<TabItem Header="Input" Name="tabItem1">
   <Grid></Grid>
</TabItem>

在我的代码隐藏中，我需要指定一个指向 ViewModel 的数据上下文。我不想让一个 ViewModel 来处理所有四个选项卡，而是希望每个选项卡都有一个 ViewModel。这意味着每次都有不同的 DataContext。

有没有办法以干净的方式实现这一点？

Answer 1

您可以设置 DataContext 在 XAML 中仅通过在 XAML 中声明实例并将 DataContext 绑定(bind)到该实例。

但是既然你要求更简洁的方式，那么理想的方法是绑定(bind) ItemsSource 的 TabControl 到 ViewModel 的集合，这样所有的 tabItems 自动具有不同的 DataContext。

---

首先创建 DummyViewModel 并且有 ObservableCollection<DummyViewModel> 在您的主窗口 ViewModel 中收集。

public class MainWindowViewModel : INotifyPropertyChanged
{
    public MainWindowViewModel()
    {
        ViewModelCollection = new ObservableCollection<DummyViewModel>();
        ViewModelCollection.Add(new DummyViewModel("Tab1", "Content for Tab1"));
        ViewModelCollection.Add(new DummyViewModel("Tab2", "Content for Tab2"));
        ViewModelCollection.Add(new DummyViewModel("Tab3", "Content for Tab3"));
        ViewModelCollection.Add(new DummyViewModel("Tab4", "Content for Tab4"));
    }

    public ObservableCollection<DummyViewModel> ViewModelCollection { get; set; }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

public class DummyViewModel
{
    public DummyViewModel(string name, string description)
    {
        Name = name;
        Description = description;
    }
    public string Name { get; set; }
    public string Description { get; set; }
}

并像这样在 XAML 中绑定(bind)集合:

<TabControl ItemsSource="{Binding ViewModelCollection}">
    <TabControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Name}"/>
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <DataTemplate>
            <Grid>
                <TextBlock Text="{Binding Description}"/>
            </Grid>
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>

ItemTemplate 是为标签项的标题 定义的，ContentTemplate 是为 定义的单个 tabItems 的内容。

将创建四个选项卡项，每个选项卡项 DataContext 设置为单独的 DummyViewModel 实例。

---

快照: