How to make WPF TabItem Headers' Background transparent?

Question

I have a TabControl with a few TabItems. Each TabItem has a Grid with a TextBlock and one Image, which has transparent areas, in it.

My goal is to have the Text and the

Answer 1

You will need to make a custom TabItem ControlTemplate to do so.

Here is a slightly modified TabItem ControlTemplate (slightly modified from the default one):

<SolidColorBrush x:Key="SolidBorderBrush" Color="#888" />

<SolidColorBrush x:Key="DisabledBorderBrush" Color="#AAA" />

<SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" />

<Style TargetType="{x:Type TabItem}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabItem}">
                <Grid Background="Transparent">
                    <Border 
                            Name="Border"
                            Margin="0,0,-4,0" 
                            Background="Transparent"
                            BorderBrush="{StaticResource SolidBorderBrush}" 
                            BorderThickness="1,1,1,1" 
                            CornerRadius="2,12,0,0" >
                        <ContentPresenter x:Name="ContentSite"
                              VerticalAlignment="Center"
                              HorizontalAlignment="Center"
                              ContentSource="Header"
                              Margin="12,2,12,2"
                              RecognizesAccessKey="True"/>
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="Panel.ZIndex" Value="100" />
                        <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
                        <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

You'll probably need to modify it a bit to show what TabItem is selected (in the Trigger on IsSelected).