WPF：绑定选项卡控件答案

【问题标题】：WPF: Bind Tab ControlWPF：绑定选项卡控件
【发布时间】：2015-04-16 22:07:46
【问题描述】：

我正在使用 MVVM，我正在尝试绑定一个 TabControl's ItemsSource，我使用了这个代码：

<TabControl ItemsSource="{Binding ProjectComponents}"
                    SelectedIndex="{Binding SelectedMenu, Mode=TwoWay}" Grid.Column="1" Margin="5">

对于视图模型：

projectComponents = new ObservableCollection<TabItem>();
projectComponents.Add(new TabItem()
{

     Content = new ProjectComponentsView()
     {
          DataContext = new ProjectClientHandlerViewModel()
     }
});

我在Silverlight项目中使用了这个，效果很好，但是在WPF中，我不知道为什么TabItem的内容没有显示。

编辑：

我将我的代码编辑为：

查看：

 <TabControl ItemsSource="{Binding ProjectComponents}" SelectedIndex="{Binding SelectedMenu, Mode=TwoWay}" Grid.Column="1" Margin="5">
        <TabControl.ContentTemplate>
            <DataTemplate >
                <this:ProjectComponentsView DataContext="{Binding}"/>
            </DataTemplate>
        </TabControl.ContentTemplate>
 </TabControl>

查看模型：

projectComponents = new ObservableCollection<ProjectComponentViewModel>();
projectComponents.Add(new ProductViewsHandlerViewModel());

其中ProjectComponentViewModel 是ProductViewsHandlerViewModel 的基类，但它仍然不起作用。

【问题讨论】：

How do I bind a TabControl to a collection of ViewModels?的可能重复
我不认为这是同一个问题，您发布的副本是用于模式指南，我的问题是为什么绑定没有发生，因为在 Silverlight 中它确实工作得很好
在视图模型中使用 TabItem 类型不是 mvvm。您应该有一个对象集合（视图模型）并将其绑定到 tabcontrol 的 itemssource。

标签： c# wpf silverlight mvvm

【解决方案1】：

这是一个快速入门的示例

public class MainVm : VMBase
    {
        public ObservableCollection<TabVM> Items { get; set; }
        public VMBase SelectedItem {get;set;} 
        public MainVm()
        {
            Items = new ObservableCollection<TabVM>()
            {
                new TabVM(){Header="A",Content = new SomeVm()},
                new TabVM(){Header="B",Content = new SomeVm()},
                new TabVM(){Header="C",Content = new SomeVm()},
                new TabVM(){Header="D",Content = new OtherVm()}
            };
        }
    }

    public class TabVM : VMBase
    {
        public string Header { get; set; }
        public VMBase Content { get; set; }
    }

    public class SomeVm : VMBase{}
    public class OtherVm : VMBase{}
    public class VMBase { }


<TabControl ItemsSource="{Binding Items}" SelectedItem="{Binding SelectedItem}">
        <TabControl.Resources>
            <DataTemplate DataType="{x:Type local:SomeVm}">
                <TextBlock>SomeVm Template</TextBlock>
            </DataTemplate>
            <DataTemplate DataType="{x:Type local:OtherVm}">
                <TextBlock>OtherVm Template</TextBlock>
            </DataTemplate>
        </TabControl.Resources>
        <TabControl.ItemTemplate>
            <DataTemplate>
                    <TextBlock Text="{Binding Header}"></TextBlock>
            </DataTemplate>
        </TabControl.ItemTemplate>
        <TabControl.ContentTemplate>
            <DataTemplate>
                <ContentControl Content="{Binding Content}"></ContentControl>
            </DataTemplate>
        </TabControl.ContentTemplate>
    </TabControl>

当我们在资源中设置模板时，根据ViewModel 类型选择模板，您还应该使用代表TabItem 的ViewModel，即上述sn-p 中的TabVM。

在选项卡控件的ItemTemplate 中设置标题模板，在ContentTemplate 中放置ContentControl 并将其Content 绑定到TabVM 的Content 属性。

别忘了实现INotifyPropertyChanged。

【讨论】：