WPF TabItem header as TextBlock

Question

I would put a TextBlock inside the header of my TabItem as I have the problem concerning the missing underscore. I changed my style as follows:

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

But it does not work, as the first underscore is still missing. What's wrong?

Answer 1

You need bind (set) your TextBlock's Text with TabItem's "Header" property, i think this sample helps you:

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

Result: