WPF – TabItem Background color changes when tabitem selected or hover over

Here is example of TabItem ControlTemplate

Copy it to your resources and set wherever you need Red color as Background.

SAMPLE

<Window x:Class="TestCustomTab.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <SolidColorBrush x:Key="RedBrush" Color="Red"/>       

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

        <SolidColorBrush x:Key="GreenBrush" Color="Green" />

        <SolidColorBrush x:Key="DisabledBackgroundBrush" Color="#EEE" />       

        <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>
                            <Border 
                                Name="Border"
                                Margin="0,0,-4,0" 
                                Background="{StaticResource RedBrush}"
                                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="Background" Value="{StaticResource GreenBrush}" />
                                <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" />
                                <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
                                <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>        
    </Window.Resources>
    <Grid>
        <TabControl>
            <TabItem Header="MyTabItem" />
            <TabItem Header="MyTabItem"  />
        </TabControl>
    </Grid>
</Window>

Create test WPF project and paste sample code instead of Window1.xaml code.

Leave a Comment