自定义 TabItem 数据模板答案

【问题标题】：Customize TabItem DataTemplate自定义 TabItem 数据模板
【发布时间】：2013-08-19 19:33:06
【问题描述】：

如何在 WPF 中为 TabItems 制作 DataTemplate 并在每个 TabItem 中自定义其内容？

我需要这个：

<TabControl>
            <TabControl.ContentTemplate>
                <DataTemplate>
                    <Label Content="Name" Name="label1" />
                    <TextBox Name="name" />
                    ...
                </DataTemplate>
            </TabControl.ContentTemplate>
            <TabItem Header="Add" Name="tabItem1">
                <Grid Height="213">
                    <Button Content="Add" Name="button1" />
                </Grid>
            </TabItem>
            <TabItem Header="Edit" Name="tabItem2">
                <Grid>
                    <Button Content="Edit" Name="button2" />
                </Grid>
            </TabItem>
</TabControl>

但未显示按钮（仅显示 DataTemplate 的内容）。

【问题讨论】：

所以你想要标签和文本框以及选项卡中的按钮？
是的，但每个选项卡中的按钮不同。

标签： c# wpf datatemplate tabcontrol

【解决方案1】：

将重复出现的模板作为资源放在 TabControl 中，然后使用 ContentPresenter 从特定 Tab 的 ContentTemplate 引用它：

<TabControl>
    <TabControl.Resources>
        <DataTemplate x:Key="TabTemplate">
            <Label Content="Name" Name="label1" />                
        </DataTemplate>
    </TabControl.Resources>
    <TabItem Header="Add" Name="tabItem1">
        <TabItem.ContentTemplate>
            <DataTemplate>
                <Grid Height="213">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Button Content="Add" Name="button1" />
                    <ContentPresenter Grid.Row="1" ContentTemplate="{StaticResource TabTemplate}"/>
                </Grid>
            </DataTemplate>
        </TabItem.ContentTemplate>
    </TabItem>
    <TabItem Header="Edit" Name="tabItem2">
        <TabItem.ContentTemplate>
            <DataTemplate>
                <Grid Height="213">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Button Content="Edit" Name="button2" />
                    <ContentPresenter Grid.Row="1" ContentTemplate="{StaticResource TabTemplate}"/>
                </Grid>
            </DataTemplate>
        </TabItem.ContentTemplate>
    </TabItem>

除ContentPresenter 之外的所有内容在每个选项卡中都可能不同...

【讨论】：

【解决方案2】：

您也可以尝试使用TabControl ContentTemplateSelector。

在这里，您可以为一个选项卡项定义两个或多个不同的模板（用户控件）。你也可以在运行时使用DataTemplateSelector

这是一个包含相同演示的博客：mvvm-using-contenttemplateselector-in-tab-control-view/

最终的 TabControl 看起来像这样：

<UserControl x:Class="TabControlItemTemplateDemo.View.MyTabControl"
         xmlns:ViewModel="clr-namespace:TabControlItemTemplateDemo" 
         xmlns:View1="clr-namespace:TabControlItemTemplateDemo.View" mc:Ignorable="d" >

<UserControl.Resources>
    <DataTemplate x:Key="MyTabHeaderTemplate">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Column="0" Text="{Binding Header}" Width="80" Height="25" FontWeight="Bold"/>
        </Grid>
    </DataTemplate>

    <DataTemplate x:Key="CountryContentTemplate">
        <View1:CountryView DataContext="{Binding CurrentMyTabContentViewModel}"/>
    </DataTemplate>

    <DataTemplate x:Key="ContinentsContentTemplate">
        <View1:ContinentsView DataContext="{Binding CurrentMyTabContentViewModel}"/>
    </DataTemplate>

    <ViewModel:MyViewSelector x:Key="selector" 
                                       CountryTemplate="{StaticResource CountryContentTemplate}"
                                       ContintentsTemplate="{StaticResource ContinentsContentTemplate}" />
</UserControl.Resources>
<DockPanel>
    <TabControl ItemsSource="{Binding Tabs}" TabStripPlacement="Left" 
                BorderThickness="0" Background="White"  
                ItemTemplate="{StaticResource MyTabHeaderTemplate}"
                ContentTemplateSelector="{StaticResource selector}">
    </TabControl>
</DockPanel>

【讨论】：