WPF MVVM：将不同的ViewModel绑定到每个TabItem？

Question

我有一个主窗口，其中一个标签控件包含2个tabItem s：

我目前有1 ViewModel服务Tab1＆amp; TAB2。这个ViewModel变得有点臃肿，SOC模糊。我想将逻辑拆分为2个视图模型：ViewModel 1＆amp; ViewModel2。我的理解是你可以将主窗口DataContext设置为一个Base ViewModel，它包含一组ViewModels＆amp;然后你可以将每个TabItem断言为另一个ViewModel。

我在这些基本ViewModel中看到的示例公开了一个ObservableCOllection，如下所示：

private ObservableCollection<ViewModel1> _viewModelCollection
Public Observable Collection<ViewModel1> ViewModelCollection
{
   get { return _viewModelCollection; }
   set
     {
        _viewModelCollection = value;
        OnPropertyChanged("ViewModelCollection");
     }
}

public BaseViewModel()
{
  ViewModelCollection = new ObservableCollection<ViewModel1>();
  ViewModelCollection.Add(new ViewModel1(Tab1);
  ViewModelCollection.Add(new ViewModel1(Tab2);
}

但是如何为每个TabItem分配不同的ViewModel？我想要Tab1 = ViewModel1＆amp; TAB2 = ViewModel2？

Answer 1

您确实可以将选项卡的视图模型添加到主视图模型中。然后，您可以将XAML中的子视图模型绑定到选项卡。

假设您有三个视图模型：MainViewModel，Tab1ViewModel和Tab2ViewModel。在MainViewModel上，您会保留一组标签视图模型：

class MainViewModel
{
    ObservableCollection<object> _children;

    public MainViewModel()
    {
        _children = new ObservableCollection<object>();
        _children.Add(new Tab1ViewModel());
        _children.Add(new Tab2ViewModel());
    }

    public ObservableCollection<object> Children { get { return _children; } }
}

将主窗口的DataContext设置为MainViewModel后，您可以通过引用DataContext属性来绑定标签的Children：

<TabControl>
    <TabItem DataContext="{Binding Children[0]}" x:Name="Tab1" Header="Tab1" >
      <!-- Tab content -->
    </TabItem>
    <TabItem DataContext="{Binding Children[1]}" x:Name="Tab2" Header="Tab2" >
      <!-- Tab content -->
    </TabItem>
</TabControl>

Answer 2

我使用像Prism这样的框架，允许您定义区域并使用RegionManager。然后，您可以将ContentControl定义为TabItem

的'ui'

然后，您可以使用RegionManager.RequestNavigate使用特定视图填充命名区域（我们的视图会导入视图模型并设置其datacontext）。

Answer 3

class MainViewModel
{
    ObservableCollection<object> _children;

    public MainViewModel()
    {
        _children = new ObservableCollection<object>();
        _children.Add(new Tab1ViewModel());
        _children.Add(new Tab2ViewModel());
    }

    public ObservableCollection<object> Children { get { return _children; } }
}

现在在XAML中将Children绑定到ItemsSource。它将为我们添加到observable集合

中的每个视图模型生成每个Tab

    <TabControl ItemsSource="{Binding Children}"/>

Answer 4

对于发现同样问题的页面的人，我在YouTube上找到了一个视频：WPF MVVM - Working with tab controls and tab content，是DCOM Engineering，LLC的一个人。

它通过可下载的代码逐步解释了“如何将不同的ViewModel绑定到每个TabItem”。

  

“ 了解如何在WPF中使用MVVM模式有效地创建，打开和关闭选项卡。简化单元测试。”

Answer 5

不确定为什么选择的答案建议使用ObservableCollection并创建选项卡的集合，然后按索引引用它们。

我发现这样做更干净：

MainViewModel tab1 = ConfigViewModel Tab2 = UserProfileViewModel

在MainViewModel中：

private ConfigViewModels _configVM;
public ConfigViewModels ConfigVM { get { return _configVM; } }

private UserProfileViewModel _userProfileVM;
public UserProfileViewModel UserProfileVM { get { return _userProfileVM; } }

public MainViewModel(){

_configVM = new ConfigViewModels();
_userProfileVM = new UserProfileViewModel ();
}

在XAML文件中：

<TabControl>
<TabItem DataContext="{Binding ConfigVM }" >
<TabItem DataContext="{Binding UserProfileVM }" >

我不确定我通过可观察的集合了解这样做的好处。