WPF TabControl与ContentControl配合使用

Question

我在SO上搜索了很久，但没有找到解决我的问题的答案。我想在MVVM中使用TabControl。这是我如何将TabControl添加到MainWindow.xaml：

<Window.Resources>
        <DataTemplate DataType="{x:Type models:PartnersViewModel}">
            <views:PartnersView />
        </DataTemplate>
        <DataTemplate DataType="{x:Type models:ProjectsViewModel}">
            <views:ProjectsView />
        </DataTemplate>
    </Window.Resources>

    <Window.DataContext>
        <models:ApplicationViewModel/>
    </Window.DataContext>

    <TabControl ItemsSource="{Binding PageViewModels}"  TabStripPlacement="Left">
        <TabControl.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Name}" />
            </DataTemplate>
        </TabControl.ItemTemplate>
        <TabControl.ContentTemplate>
            <DataTemplate>
                <ContentControl Content="{Binding}" />
            </DataTemplate>
        </TabControl.ContentTemplate>
    </TabControl>

PageViewModels是ObservableCollection<IPageViewModel>。

IPageViewModel是一个简单的接口，只有一个Name属性。有两个这个接口的实现：PartnersViewModel和ProjectsViewModel。

public class ProjectsViewModel : IPageViewModel
{
    public String Name
    {
        get { return "Projects"; }
    }
}

public class PartnersViewModel : IPageViewModel
{
    public String Name
    {
        get { return "Partners"; }
    }
}

我希望每个选项卡都显示为ContentControl。标题文本取自Name属性。我的ProjectsView和PartnersView如下所示：

<UserControl x:Class="WANIRPartners.Views.ProjectsView"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" >
  <Grid>
    <Label Content="Projects Content" />
  </Grid>
</UserControl>

使用此代码，选项卡的标题和内容完全相同。'Projects Content' / 'Partners Content'显示在选项卡标题中，也（这没问题）显示在选项卡内容中。当我将<Label/>更改为<DataGrid/>时，选项卡标题包含数据网格（非常奇怪！）。 如何使其正常工作？我的意思是如何将选项卡标题显示为属性Name的值，并根据PageViewModels中的内容正确呈现选项卡内容，即<views: PartnersView />或<views: ProjectsView />。请帮忙修改。

- sop3k

---

我理解得对吗，它通过“DataType”选择正确的“DataTemplate”，但是它忽略了标题的“ItemTemplate”？TabControl有默认模板吗？ - dkozl

看起来你是对的。DataTemplate 被正确选择，但 ItemTemplate 被忽略了。你所说的 TabControl 的默认模板是什么意思？抱歉，我刚开始学习 WPF。 - sop3k

我的意思是你展示的XAML应该可以工作，并且在我的端上也可以工作。我没有看到任何明显的问题，所以我的问题是，你是否更改了TabControl的模板（它的外观），或者你使用了类似于MahApps或默认外观的东西。显式的ItemTemplate应该优先于隐式的DataType模板。 - dkozl

我正在使用Elysium，但是在删除Elysium之后一切都正常了。非常感谢。我该如何在使用Elysium的情况下让它正常工作？ - sop3k

Answer 1

你的代码应该能够正常工作，我现在没有IDE。你也可以使用Snoop在运行时检查绑定情况。我已经将ContentTemplate更改为：

    <TabControl.ContentTemplate>
        <DataTemplate>
            <ContentPresenter Content="{Binding .}" />
        </DataTemplate>
    </TabControl.ContentTemplate>

它有效。但是你的代码也在我的测试应用程序中工作。

- blindmeis

Answer 2

我已经发现了Elysium的解决方案。添加以下代码后，一切都正常工作。

 <TabControl.Resources>
     <Style TargetType="{x:Type TabItem}" BasedOn="{StaticResource {x:Type TabItem}}">
         <Setter Property="Header" Value="{Binding Name}"/>
     </Style>
 </TabControl.Resources>

- sop3k