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

Question

我有一个主窗口,其中包含一个包含2 tabItem秒的选项卡控件:

我目前有1个ViewModel服务Tab1和Tab2.ViewModel随着SOC模糊,这变得有点臃肿.我想将逻辑拆分为2个视图模型:ViewModel 1和ViewModel2.我的理解是您可以将主窗口设置DataContext为包含ViewModel集合的Base ViewModel,然后您可以将每个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&Tab2 = ViewModel2？

Answer 1

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

你说你有三个的ViewModels: ,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

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。它将为我们添加到可观察集合中的每个视图模型生成每个选项卡

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