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

Question

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

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

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

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

Answer 1

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

但是,由于你要求更清晰的方式,所以理想的是将ItemsSourceTabControl 绑定到ViewModel的集合,以便所有tabItems自动拥有不同的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是为各个tabItem的内容定义的.

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

快照: