带有 ContentControl 的 WPF TabControl [英] WPF TabControl with ContentControl

问题描述

我在 SO 上搜索了很多，但没有找到我的问题的答案.我想将 TabControl 与 MVVM 一起使用.这是我如何将 TabControl 添加到 MainWindow.xaml

I have searched a lot on SO and didn't find answer to my problems. I want to use TabControl with MVVM. Here is how I add TabControl to 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 是具有一个属性 Name 的简单接口.这个接口有2个实现PartnersViewModel和ProjectsViewModel.

PageViewModels is ObservableCollection<IPageViewModel>. IPageViewModel is simple interface with one property Name. There are 2 implementation of this interface PartnersViewModel and 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 如下所示:

I want each tab to be displayed as ContentControl. Header text is taken from Name property. My ProjectsView and PartnersView looks like this:

<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>

使用这段代码，TabControl中的header和content是完全一样的.项目内容"/合作伙伴内容"显示在选项卡标题中，并且(这也可以)显示在选项卡内容中.当我将 更改为 选项卡标题包含数据网格(原文如此！).我怎样才能让它正常工作.我的意思是如何将标题显示为属性 Name 的值和选项卡内容正确呈现的 <views:PartnersView/> 或 <views:ProjectsView/> 取决于 PageViewModels 中的内容.

Using this code, header and content in TabControl is exactly the same. 'Projects Content'/'Partners Content' are shown in tab headers and also(this is ok) in tab content. When I change <Label/> to <DataGrid/> tab headers contains datagrid (sic!). How can I get this working properly. I mean how can I display headers as value of property Name and tab content as properly rendered <views:PartnersView /> or <views:ProjectsView /> depending on what is in PageViewModels.

推荐答案

你的代码应该可以工作，没有 IDE atm.您还可以使用 Snoop 在运行时检查您的绑定.我将 ContentTemplate 更改为:

your code should work, dont have a IDE atm. you can also use Snoop to check your bindings at runtime. i changed the ContentTemplate to:

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

它的工作原理.但即使你的代码也适用于我的测试应用.

and it works. but even your code works in my testapp.

这篇关于带有 ContentControl 的 WPF TabControl的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！