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 Image completely visible and see the Window.Background Image through the transparent areas.

Problem: No matter what I tried, there is a white background behind the Image and TextBlock I have set.

I tried to set the TabControl Opacity to 0, but that makes the whole thing dissapear, as expected. Same result with the TabItem Opacity -> TabItem gets invisible. Next I set the TabItems Foreground, BorderBrush and Background to Opacity="0" what changes nothing at all :(

I am relatively new to WPF and english is not my native language, so forgive me if my question is dumb and my english is bad.

Thanks in advance!

EDIT(Screenshotlink): http://i.stack.imgur.com/NN8AR.png

I can't post the screenshot, because I do not have 10 reputation, so I added the link to it.
I removed the images and only left the Textboxes so there is no confusion about that

Can you upload some screenshot and show exactly which part you want to be transparent. — Bolu

nkoniishvt nkoniishvt · Accepted Answer · 2014-12-03T16:34:45

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

How to make WPF TabItem Headers' Background transparent?

1 Answers