在WPF中使用单独的ViewModel将多个选项卡视为单独的视图

Question

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

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

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

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

Answer 1

您只能通过在XAML中声明实例并将DataContext绑定到该实例来在XAML中设置 DataContext 。

但是既然你要求更清洁，那么理想的方法是将TabControl的 ItemsSource 绑定到ViewModel的集合，以便所有tabItem自动拥有不同的DataContext。

---

首先在主窗口ViewModel中创建 DummyViewModel 并拥有 ObservableCollection<DummyViewModel> 集合。

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中与集合绑定，如下所示：

<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实例。

---

<强> 快照：