WPF Tab Styling

Question

I am trying to style my WPF TabControl. I basically want to get the tab control to have a transparent background, with a white border and text. I want the selected tab to have a White Background and Transparent Text (or any colour text!). Essentially a 2 colour tab.

However, I cannot override the selected tab appearance - this shows as white. And my child textboxes are taking the style of the TabItem font. Note, in the screen shot my labels have their own style set so do not take the TabItem font.

I have the following XAML in place to do this. Ideally I want to create the styles so that I can reuse across the application.

Resource Dictionary

<ResourceDictionary 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">
  <Style x:Key="Tabs" TargetType="TabControl">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderBrush" Value="White"/>
  </Style>
  <Style x:Key="TabItemStyle" TargetType="TabItem">
        <Setter Property="Foreground" Value="White" />
        <Setter Property="VerticalAlignment" Value="Top" />
        <Setter Property="FontSize" Value="16" />
        <Setter Property="Background" Value="Transparent"/>
        <Style.Triggers>
            <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=TabItem}}" Value="True">
                <Setter Property="Foreground" Value="Red"/>
                <Setter Property="Background" Value="White"/>
            </DataTrigger>
            <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=TabItem}}" Value="False">
                <Setter Property="Foreground" Value="LightGray"/>
                <Setter Property="Background" Value="Transparent"/>
            </DataTrigger>
        </Style.Triggers>
    </Style>

</ResourceDictionary>

Then the XAML MarkUp

<TabControl Style="{StaticResource Tabs}">
  <TabItem Header="General" Style="{StaticResource TabItemStyle}">...</TabItem>
  <TabItem Header="Details" Style="{StaticResource TabItemStyle}">...</TabItem>
  <TabItem Header="Info" Style="{StaticResource TabItemStyle}">...</TabItem>
  <TabItem Header="More Stuff..." Style="{StaticResource TabItemStyle}">...</TabItem>
</TabControl>

How can I style my tabs to be and prevent the children from sizing?

Answer 1

Your DataTriggers don't work. To fix it change RelatveSource to Self

Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource Self}}"

However I would suggest to change them to Triggers like so:

<Style.Triggers>
   <Trigger Property="IsSelected" Value="True">
      <Setter Property="Foreground" Value="Red"/>
      <Setter Property="Background" Value="White"/>
   </Trigger>
   <Trigger Property="IsSelected" Value="False">
      <Setter Property="Foreground" Value="LightGray"/>
      <Setter Property="Background" Value="Transparent"/>
   </Trigger>
</Style.Triggers>

Answer 2

You should create control template for TabItem.

This sample change TabItem background to Transparent and Text color to White.

You can use own color schema.

<Window.Resources>
    <Style TargetType="TabControl">
        <Setter Property="Background"
                Value="Transparent" />
        <Setter Property="BorderBrush"
                Value="White" />
    </Style>

    <Style TargetType="{x:Type TabItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid>
                        <Border Name="Border"
                                Margin="0,0,-4,0"
                                Background="{x:Static Brushes.White}"
                                BorderBrush="{x:Static Brushes.White}"
                                BorderThickness="1,1,1,1"
                                CornerRadius="2,12,0,0">
                            <ContentPresenter x:Name="ContentSite"
                                              Margin="12,2,12,2"
                                              HorizontalAlignment="Center"
                                              VerticalAlignment="Center"
                                              ContentSource="Header"
                                              RecognizesAccessKey="True" />
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected"
                                 Value="True">
                            <Setter Property="Panel.ZIndex"
                                    Value="100" />
                            <Setter TargetName="Border"
                                    Property="Background"
                                    Value="{x:Static Brushes.Transparent}" />
                            <Setter TargetName="Border"
                                    Property="BorderThickness"
                                    Value="1,1,1,0" />
                            <Setter Property="TextBlock.Foreground"
                                    Value="White" />
                            <!--<Setter Property="TextBlock.Foreground"
                                    Value="Transparent" />-->
                        </Trigger>
                        <Trigger Property="IsEnabled"
                                 Value="False">
                            <Setter TargetName="Border"
                                    Property="Background"
                                    Value="{x:Static Brushes.White}" />
                            <Setter TargetName="Border"
                                    Property="BorderBrush"
                                    Value="{x:Static Brushes.White}" />
                            <Setter Property="Foreground"
                                    Value="{x:Static Brushes.White}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<Grid Background="SkyBlue">
    <TabControl Margin="20">
        <TabItem Header="TabItem #1">
            <TextBox>Tab Item #1 content</TextBox>
        </TabItem>
        <TabItem Header="TabItem #2">
            <TextBox>Tab Item #1 content</TextBox>
        </TabItem>
        <TabItem Header="TabItem #3">
            <TextBox>Tab Item #1 content</TextBox>
        </TabItem>
    </TabControl>
</Grid>