WPF TabItem 标头为 TextBlock

Posted 2023-03-29

【中文标题】WPF TabItem 标头为 TextBlock

【英文标题】：WPF TabItem header as TextBlock

【发布时间】：2021-09-16 21:48:02

【问题描述】：

我会在 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,1,1,0" Padding="TemplateBinding Padding" CornerRadius="6,210,0,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,0,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>

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

【参考方案1】：

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

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

结果：