WPF Tab Control: Setting Tab Color?

Question

I have a tab control in my WPF application that uses the default colors for the WPF tab control. In other words, the active tab is white, and the inactive tabs are silver. I have changed the background color of all of the tab pages to Beige, by setting the Background property of the TabControl object, but it doesn't change the tab color, only the client area. So, I have ended up with an active tab that has a beige client area and a white tab.

I would like to set the tab color to match the client area, so that the entire page is beige. How would I do that? Thanks.

Answer 1

Here is an example of tab item style from one of my projects. Sorry for some irrelevant code, I'm sure you will extract what you need from it.

<Style x:Uid="Style_21" TargetType="{x:Type TabItem}">
        <Setter x:Uid="Setter_75" Property="Template">
            <Setter.Value>
                <ControlTemplate x:Uid="ControlTemplate_7" TargetType="{x:Type TabItem}">
                    <Grid x:Uid="Grid_13">
                        <Border 
                             x:Uid="Border" Name="Border"
                             Background="#F0F0F0"
                             BorderBrush="LightGray" 
                             BorderThickness="1,1,1,0" 
                             CornerRadius="4,4,0,0" 
                             Margin="0,0,2,0" SnapsToDevicePixels="True" >
                            <TextBlock x:Uid="TextBlock" FontSize="15" 
                                       HorizontalAlignment="Center" 
                                       Name="TextBlock" 
                                       Foreground="DarkGray">
                            <ContentPresenter x:Uid="ContentSite" x:Name="ContentSite"
                                               VerticalAlignment="Center"
                                               HorizontalAlignment="Center"
                                               ContentSource="Header"
                                               Margin="12,2,12,2"/>
                            </TextBlock>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger x:Uid="Trigger_14" Property="IsSelected" Value="True">
                            <Setter x:Uid="Setter_76" TargetName="Border" Property="Background" Value="White" />
                            <Setter x:Uid="Setter_77" TargetName="Border" Property="BorderBrush" Value="Gray" />
                            <Setter x:Uid="Setter_78" TargetName="TextBlock" Property="Foreground" Value="Black" />
                            <Setter x:Uid="Setter_79" TargetName="Border" Property="Margin" Value="0,0,2,-1" />
                        </Trigger>
                        <Trigger x:Uid="Trigger_15" Property="IsMouseOver" Value="True" SourceName="Border" >
                            <Setter x:Uid="Setter_80" TargetName="Border" Property="Background" Value="White" />
                            <Setter x:Uid="Setter_81" TargetName="Border" Property="BorderBrush" Value="DarkGray" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Hope it helps.

Answer 2

I worked out the solution. I am going to leave levanovd's answer selected as the correct one, in appreciation for his help.

Essentially, the fix is a one-line change to the TabItem control template. Start with a copy of the normal TabItem control template, and set the control template to target all controls of type TabItem. Find the IsSelected trigger, and change it to the following:

<Setter Property="Background" TargetName="Bd" Value="{Binding Path=Background, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabControl}}}"/>

Bd is the Border control that sets the border and background for the tab area of a TabItem. This markup tells WPF to bind the Bd Background property to a relative source. In this case, the relative source is the Background property of the TabControl that hosts the TabItem. As a result, when you set the Background property of the TabControl, the color will flow through to the tab area of all of the TabItem controls hosted in the TabControl.

Here is the complete markup for a demo that I created in Blend 3:

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="WpfApplication1.MainWindow"
    x:Name="Window"
    Title="MainWindow"
    Width="640" Height="480">
    <Window.Resources>

        <Style x:Key="TabItemFocusVisual">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Rectangle Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1" Margin="3,3,3,1" SnapsToDevicePixels="true"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <SolidColorBrush x:Key="TabControlNormalBorderBrush" Color="#8C8E94"/>
        <LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#F3F3F3" Offset="0"/>
            <GradientStop Color="#EBEBEB" Offset="0.5"/>
            <GradientStop Color="#DDDDDD" Offset="0.5"/>
            <GradientStop Color="#CDCDCD" Offset="1"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="TabItemHotBackground" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#EAF6FD" Offset="0.15"/>
            <GradientStop Color="#D9F0FC" Offset=".5"/>
            <GradientStop Color="#BEE6FD" Offset=".5"/>
            <GradientStop Color="#A7D9F5" Offset="1"/>
        </LinearGradientBrush>
        <SolidColorBrush x:Key="TabItemSelectedBackground" Color="#F9F9F9"/>
        <SolidColorBrush x:Key="TabItemHotBorderBrush" Color="#3C7FB1"/>
        <SolidColorBrush x:Key="TabItemDisabledBackground" Color="#F4F4F4"/>
        <SolidColorBrush x:Key="TabItemDisabledBorderBrush" Color="#FFC9C7BA"/>
        <Style TargetType="{x:Type TabItem}">
            <Setter Property="FocusVisualStyle" Value="{StaticResource TabItemFocusVisual}"/>
            <Setter Property="Foreground" Value="Black"/>
            <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="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}">
                                <ContentPresenter x:Name="Content" 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"/>
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemHotBackground}"/>
                            </Trigger>
                            <Trigger Property="IsSelected" Value="true">
                                <Setter Property="Panel.ZIndex" Value="1"/>
                                <Setter Property="Background" TargetName="Bd" Value="{Binding Path=Background, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabControl}}}"/>
                            </Trigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="false"/>
                                    <Condition Property="IsMouseOver" Value="true"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource TabItemHotBorderBrush}"/>
                            </MultiTrigger>
                            <Trigger Property="TabStripPlacement" Value="Bottom">
                                <Setter Property="BorderThickness" TargetName="Bd" Value="1,0,1,1"/>
                            </Trigger>
                            <Trigger Property="TabStripPlacement" Value="Left">
                                <Setter Property="BorderThickness" TargetName="Bd" Value="1,1,0,1"/>
                            </Trigger>
                            <Trigger Property="TabStripPlacement" Value="Right">
                                <Setter Property="BorderThickness" TargetName="Bd" Value="0,1,1,1"/>
                            </Trigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="true"/>
                                    <Condition Property="TabStripPlacement" Value="Top"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Margin" Value="-2,-2,-2,-1"/>
                                <Setter Property="Margin" TargetName="Content" Value="0,0,0,1"/>
                            </MultiTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="true"/>
                                    <Condition Property="TabStripPlacement" Value="Bottom"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Margin" Value="-2,-1,-2,-2"/>
                                <Setter Property="Margin" TargetName="Content" Value="0,1,0,0"/>
                            </MultiTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="true"/>
                                    <Condition Property="TabStripPlacement" Value="Left"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Margin" Value="-2,-2,-1,-2"/>
                                <Setter Property="Margin" TargetName="Content" Value="0,0,1,0"/>
                            </MultiTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="true"/>
                                    <Condition Property="TabStripPlacement" Value="Right"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Margin" Value="-1,-2,-2,-2"/>
                                <Setter Property="Margin" TargetName="Content" Value="1,0,0,0"/>
                            </MultiTrigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemDisabledBackground}"/>
                                <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource TabItemDisabledBorderBrush}"/>
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </Window.Resources>

    <Grid x:Name="LayoutRoot">
        <TabControl Background="Beige" HorizontalAlignment="Left" VerticalAlignment="Top" Width="500" Height="300">
            <TabItem Header="TabItem">
                <Grid/>
            </TabItem>
            <TabItem Header="TabItem">
                <Grid/>
            </TabItem>
        </TabControl>
    </Grid>
</Window>