如何将TabControl绑定到ViewModels集合？

Question

基本上我在我的MainViewModel.cs中:

ObservableCollection<TabItem> MyTabs { get; private set; }

但是,我需要以某种方式不仅能够创建选项卡,而且还可以在维护MVVM的同时加载选项卡内容并将其链接到适当的视图模型.

基本上,我如何将用户控件作为tabitem的内容加载并将该usercontrol连接到适当的viewmodel.使这个困难的部分是ViewModel不应该构造实际的视图项,对吧？或者可以吗？

基本上,这将是MVVM合适的:

UserControl address = new AddressControl();
NotificationObject vm = new AddressViewModel();
address.DataContext = vm;
MyTabs[0] = new TabItem()
{
    Content = address;
}

我只是问,因为我正在ViewModel中构建一个View(AddressControl),这对我来说听起来像MVVM禁忌.

Answer 1

这不是MVVM.您不应该在视图模型中创建UI元素.

您应该将Tab的ItemsSource绑定到ObservableCollection,并且应该包含有关应该创建的选项卡的信息的模型.

以下是VM和表示标签页的模型:

public sealed class ViewModel
{
    public ObservableCollection<TabItem> Tabs {get;set;}
    public ViewModel()
    {
        Tabs = new ObservableCollection<TabItem>();
        Tabs.Add(new TabItem { Header = "One", Content = "One's content" });
        Tabs.Add(new TabItem { Header = "Two", Content = "Two's content" });
    }
}
public sealed class TabItem
{
    public string Header { get; set; }
    public string Content { get; set; }
}

以下是绑定在窗口中的外观:

<Window x:Class="WpfApplication12.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <ViewModel
            xmlns="clr-namespace:WpfApplication12" />
    </Window.DataContext>
    <TabControl
        ItemsSource="{Binding Tabs}">
        <TabControl.ItemTemplate>
            <!-- this is the header template-->
            <DataTemplate>
                <TextBlock
                    Text="{Binding Header}" />
            </DataTemplate>
        </TabControl.ItemTemplate>
        <TabControl.ContentTemplate>
            <!-- this is the body of the TabItem template-->
            <DataTemplate>
                <TextBlock
                    Text="{Binding Content}" />
            </DataTemplate>
        </TabControl.ContentTemplate>
    </TabControl>
</Window>

^{(注意,如果你想在不同的标签中使用不同的东西,请使用DataTemplates.每个标签的视图模型应该是它自己的类,或者创建一个自定义DataTemplateSelector来选择正确的模板.)}

哦,看看,数据模板中的UserControl:

<TabControl
    ItemsSource="{Binding Tabs}">
    <TabControl.ItemTemplate>
        <!-- this is the header template-->
        <DataTemplate>
            <TextBlock
                Text="{Binding Header}" />
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <!-- this is the body of the TabItem template-->
        <DataTemplate>
            <MyUserControl xmlns="clr-namespace:WpfApplication12" />
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>

Answer 2

在Prism中,您通常会将选项卡控件设置为一个区域,这样您就不必控制绑定的选项卡页面集合.

<TabControl 
    x:Name="MainRegionHost"
    Regions:RegionManager.RegionName="MainRegion" 
    />

现在可以通过将自身注册到MainRegion区域来添加视图:

RegionManager.RegisterViewWithRegion( "MainRegion", 
    ( ) => Container.Resolve<IMyViewModel>( ).View );

在这里你可以看到Prism的特色.视图由ViewModel实例化.在我的情况下,我通过Inversion of Control容器(例如Unity或MEF)解析ViewModel.ViewModel通过构造函数注入获取View注入,并将自身设置为View的数据上下文.

另一种方法是将视图的类型注册到区域控制器中:

RegionManager.RegisterViewWithRegion( "MainRegion", typeof( MyView ) );

使用此方法允许您稍后在运行时创建视图,例如通过控制器:

IRegion region = this._regionManager.Regions["MainRegion"];

object mainView = region.GetView( MainViewName );
if ( mainView == null )
{
    var view = _container.ResolveSessionRelatedView<MainView>( );
    region.Add( view, MainViewName );
}

由于您已注册View的类型,因此视图将放置在正确的区域中.