在WPF中使用单独的ViewModel将多个选项卡视为单独的视图 [英] Treating multiple tabs as separate Views with separate ViewModels in WPF

问题描述

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

In WPF, I have one Window containing a TabControl with four TabItems. Each TabItem has a Grid:

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

在我的代码背后，我需要指定一个指向ViewModel的数据上下文。与其让一个ViewModel来处理所有四个选项卡，不如为每个选项卡使用ViewModel。这将意味着每次都具有不同的DataContext。

In my codebehind I need to specify a datacontext pointing to a ViewModel. Rather than having one ViewModel to handle all four tabs, I would like a ViewModel for each Tab. This would mean having different DataContexts for each time.

有没有一种干净的方法来实现这一目标？

Is there a way to achieve this in a clean way?

推荐答案

仅在XAML中声明实例并绑定DataContext即可在XAML中设置 DataContext

You can set DataContext in XAML only by declaring instance in XAML only and bind DataContext to that instance.

但是由于您要求使用更简洁的方法，因此理想的方法是绑定 ItemsSource 到ViewModels的集合，以便所有tabItem自动具有不同的DataContext。

But since you asked for cleaner way, so ideal would be to bind ItemsSource of TabControl to collection of ViewModels so that all tabItems automatically have different DataContext.

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

First create DummyViewModel and have ObservableCollection<DummyViewModel> collection in your main window 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中绑定集合：

and bind with collection in XAML like this:

<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的 内容 定义的。

ItemTemplate is defined for header of tab items and ContentTemplate is defined for content of individual tabItems.

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

Four tab items will be created with each tab item DataContext is set to separate instance of DummyViewModel.

SnapShot：

SnapShot:

这篇关于在WPF中使用单独的ViewModel将多个选项卡视为单独的视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！