WPF TabItem 标头作为 TextBlock

问题描述

我会在 TabItem 的标题中放置一个 TextBlock，因为我遇到了缺少下划线的问题。我改变了我的风格如下：

<Style x:Key="TabItemdistintaStyle" targettype="{x:Type TabItem}">
    <Setter Property="FocusVisualStyle" Value="{StaticResource TabItemFocusVisual}"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="Padding" Value="6,1,6,1"/>
    <Setter Property="BorderBrush" Value="{StaticResource TabControlnormalBorderBrush}"/>
    <Setter Property="Background" Value="{StaticResource ButtonnormalBackground}"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    <Setter Property="HeaderTemplate">
        <Setter.Value>
            <DataTemplate>
                <TextBlock />
            </DataTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate targettype="{x:Type TabItem}">
                <Grid SnapsToDevicePixels="true">
                    <Border x:Name="Bd" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,0" Padding="{TemplateBinding Padding}" CornerRadius="6,210,0">
                        <DockPanel>
                            <ContentPresenter x:Name="Content" DockPanel.Dock="Left" HorizontalAlignment="{Binding HorizontalContentAlignment,RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" VerticalAlignment="{Binding VerticalContentAlignment,RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" ContentSource="Header" RecognizesAccessKey="True"/>
                            <Button x:Name="cmdClose"  DockPanel.Dock="Right"
                                    Command="ApplicationCommands.Close"
                                    Margin="7,3,0" Style="{DynamicResource ButtondistintaCloseStyle}" RenderTransformOrigin="0.5,0.5">
                                <Button.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform/>
                                        <SkewTransform/>
                                        <RotateTransform/>
                                        <TranslateTransform/>
                                    </TransformGroup>
                                </Button.RenderTransform>
                            </Button>
                        </DockPanel> 
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

但它不起作用，因为仍然缺少第一个下划线。怎么了？

解决方法

您需要使用 TabItem 的“Header”属性绑定（设置）您的 TextBlock 的文本， 我认为此示例可以帮助您：

<Window x:Class="MyWpfAppSample1.MainWindow"
        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"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:MyWpfAppSample1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800" WindowStartupLocation="CenterOwner">
    <Window.Resources>
        <Style x:Key="MyTabItemStyle"
           TargetType="{x:Type TabItem}">
            <Setter Property="FocusVisualStyle" Value="{x:Null}" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="VerticalContentAlignment" Value="Stretch" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Grid x:Name="Root"
                          Width="180"
                          Height="45"
                          Margin="0,0"
                          SnapsToDevicePixels="true">                            
                            <TextBlock x:Name="contentPresenter"
                                      HorizontalAlignment="Center"
                                      VerticalAlignment="Center"
                                      Focusable="False"
                                      FontSize="14"
                                      Foreground="LightCoral"
                                      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                      Text="{TemplateBinding Header}" />                            
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <TabControl Margin="0,5,0"
              FocusVisualStyle="{x:Null}">
            <TabItem Header="My First Tab"
                IsSelected="{Binding FirstTabItemSelected}"
                Style="{DynamicResource MyTabItemStyle}">   
                Tab Item1
            </TabItem>
            <TabItem Header="My Second Tab"
                IsSelected="{Binding SecondTabItemSelected}"
                Style="{DynamicResource MyTabItemStyle}">
                TabItem2
            </TabItem>
        </TabControl>
    </Grid>
</Window>

结果：