WPF TabItem 标题模板

示例代码：

 <TabControl>
    <TabItem>
        <TabItem.Header>
            <StackPanel Orientation="Horizontal" Margin="5">
                <Image Source="/WpfTutorialSamples;component/Images/bullet_blue.png" />
                <TextBlock Text="Blue" Foreground="Blue" />
            </StackPanel>
        </TabItem.Header>
        <Label Content="Content goes here..." />
    </TabItem>
    <TabItem>
        <TabItem.Header>
            <StackPanel Orientation="Horizontal" Margin="5">
                <TextBlock Text="Red" Foreground="Red" />
            </StackPanel>
        </TabItem.Header>
    </TabItem>
    <TabItem>
        <TabItem.Header>
            <StackPanel Orientation="Horizontal" Margin="5">
                <Rectangle Fill="Red" width="20" height="16" />
            </StackPanel>
        </TabItem.Header>
    </TabItem>
</TabControl>

正如您所看到的，TabItem 标题始终是具有不同内容的堆栈面板：

<TabItem.Header>
    <StackPanel Orientation="Horizontal" Margin="5">

    </StackPanel>
</TabItem.Header>

如何将其放入模板中，以便我没有重复的堆栈面板代码？

尝试这样做：

<TabControl>
    <TabControl.Resources>
        <Style TargetType="TabItem">
        <Setter Property="HeaderTemplate">
            <Setter.Value>
            <DataTemplate>
            <StackPanel Orientation="Horizontal" Margin="5">
                <ContentPresenter Content="{TemplateBinding ContentControl.Content}"
                            ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}"  
                            ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" 
                            HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}" 
                            RecognizesAccessKey="True" 
                            SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"  
                            VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}">
                </ContentPresenter>
            </StackPanel>
            </DataTemplate>
            </Setter.Value>
        </Setter>
        </Style>
    </TabControl.Resources>
    <TabItem>
        <TabItem.Header>
            <!-- ??? -->
            <TextBlock Text="X" />
            <TextBlock Text="Y" />
        </TabItem.Header>
</TabControl>

结果是：

• “属性‘标题’被设置多次。”
• “对象‘Object’已经有一个子对象，无法添加‘TextBlock’。‘Object’只能接受一个子对象。”

树标题唯一真正的共同点是 Margin="5"。在第二个和第三个选项卡中，堆栈面板是无关的，因为它只有一个子级。您可以使用 HeaderTemplate 或 ItemContainerStyle 来实现它：

<TabControl>
    <TabControl.ItemContainerStyle>
        <Style TargetType="TabItem">
            <Setter Property="Padding" Value="5" />
        </Style>
    </TabControl.ItemContainerStyle>

    <TabItem>
        <TabItem.Header>
            <StackPanel Orientation="Horizontal">
                <Image Source="/WpfTutorialSamples;component/Images/bullet_blue.png" />
                <TextBlock Text="Blue" Foreground="Blue" />
            </StackPanel>
        </TabItem.Header>
        <Label Content="Content goes here..." />
    </TabItem>
    <TabItem>
        <TabItem.Header>
            <TextBlock Text="Red" Foreground="Red" />
        </TabItem.Header>
    </TabItem>
    <TabItem>
        <TabItem.Header>
            <Rectangle Fill="Red" Width="20" Height="16" />
        </TabItem.Header>
    </TabItem>
</TabControl>

现在你不再重复任何事情。

您还可以将 stackpanel 的属性提取到样式以避免重复：

    <TabItem.Header>
        <StackPanel Style="{StaticResource TabHeaderPanel}">
            <Image Source="/WpfTutorialSamples;component/Images/bullet_blue.png" />
            <TextBlock Text="Blue" Foreground="Blue" />
        </StackPanel>
    </TabItem.Header>

    <TabItem.Header>
        <StackPanel Style="{StaticResource TabHeaderPanel}">
            <TextBlock Text="Red" Foreground="Red" />
        </StackPanel>
    </TabItem.Header>

    <TabItem.Header>
        <StackPanel Style="{StaticResource TabHeaderPanel}">
            <Rectangle Fill="Red" width="20" height="16" />
        </StackPanel>
    </TabItem.Header>

如果您想要更多的代码重用，您应该考虑类似 MVVM 的方法：

<TabControl ItemsSource="{Binding Tabs}">
    <TabControl.ItemContainerStyle>
        <Style TargetType="TabItem">
            <Setter Property="HeaderTemplate">
                <Setter.Value>
                    <DataTemplate DataType="local:TabViewModel">

                        <StackPanel Orientation="Horizontal" Margin="5">
                            <Image x:Name="Icon" Source="{Binding Icon, Converter={StaticResource UriToBitmapSourceConverter}}" />
                            <Rectangle x:Name="ColorRect" Height="16" Width="16" Fill="{Binding Color}" Visibility="Collapsed" />
                            <TextBlock Text="{Binding Title}" Foreground="{Binding Color}"/>
                        </StackPanel>

                        <DataTemplate.Triggers>
                            <DataTrigger Binding="{Binding Icon}" Value="{x:Null}">
                                <Setter TargetName="Icon" Property="Visibility" Value="Collapsed" />
                                <Setter TargetName="ColorRect" Property="Visibility" Value="Visible" />
                            </DataTrigger>
                        </DataTemplate.Triggers>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </TabControl.ItemContainerStyle>
</TabControl>

如果您不能对所有标头使用单个 DataTemplate，您可以使用HeaderTemplateSelector