wpf 自定义 TabItem 数据模板

Customize TabItem DataTemplate

提问by Petr P?ikryl

How can I make DataTemplate in WPF for TabItems and in each TabItem customize its content?

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

I need this:

我需要这个：

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

but the buttons are not displaying (only content of DataTemplate).

但按钮没有显示（只有 DataTemplate 的内容）。

采纳答案by Blachshma

Put the reoccurring template as a resource in the TabControl, and then reference it from the specific Tab's ContentTemplateusing a ContentPresenter:

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

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

Everything besides the ContentPresentercan be different in every tab...

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

回答by jacob aloysious

You could also try using TabControl ContentTemplateSelector.

您也可以尝试使用TabControl ContentTemplateSelector。

Here, you could define two or more different templates (user controls) for a tab item. And you could also decide this on run time using DataTemplateSelector

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

Here is a blog which contain a demo of the same : mvvm-using-contenttemplateselector-in-tab-control-view/

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

The final TabControl would look something like this:

最终的 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>