ItemContainerStyle of TabItem is overriden by defalt Blue/white control colors in WPF Tabcontrol

Question

i have a Tabcontrol with Datatemplate for its TabItems and a ItemContainerStyle for the style of the TabItem.

The TabControl:

<TabControl Name="MainTabCtrl"  Margin="0" Padding="0" BorderThickness="0" Background="Transparent"
                        IsSynchronizedWithCurrentItem="True"
                        ItemsSource="{Binding Path=TabViewModels}" 
                        ItemTemplate="{StaticResource ClosableTabItemTemplate}"
                        HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"
                        ItemContainerStyle="{StaticResource ContainerStyle}">

The DataTemplate for the TabItems called ClosableTabItemTemplate:

<DataTemplate x:Key="ClosableTabItemTemplate" >
            <Border BorderThickness="3" BorderBrush="Transparent" CornerRadius="4" >
                <!--Border to make the tab item gap from the content-->
                <Border x:Name="InsideBorder" BorderThickness="3" BorderBrush="#D6EAFF" CornerRadius="4">
                    <!--Border for the rounded corners-->
                    <!--TabItem Content Grid-->
                    <Grid x:Name="tabItemGrid" ShowGridLines="True" Margin="0" Background="#D6EAFF">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="25"/>
                            <!--Icon Column-->
                            <ColumnDefinition Width="1*"/>
                            <!--Title Column-->
                            <ColumnDefinition Width="20"/>
                            <!--Close Button Column-->
                        </Grid.ColumnDefinitions>

                        <!--Icon of tab Item-->
                        <Image Grid.Column="0" Grid.Row="1" Height="18" HorizontalAlignment="Left" Source="Images/tab1.jpg"/>

                        <!--Title of tab Item-->
                        <Label Name="TabText" Grid.Column="1" Grid.Row="1" Content="TabItem"  Height="23"  HorizontalAlignment="Left" 
                                           Margin="4,1,0,0"  VerticalAlignment="Top" FontFamily="Courier" FontSize="12" />

                        <!--Close button of tab Item-->
                        <Button Style="{DynamicResource TabButton}"
                                            Name="button_close" Content="x"
                                            Command="{Binding Path=CloseCommand}"
                                            Grid.Column="2" Grid.Row="1" 
                                            Height="20" Width="20" 
                                            Margin="0,0,0,2" VerticalAlignment="Center" HorizontalAlignment="Right"
                                            FontFamily="Courier" FontStretch="Normal" FontWeight="Bold" FontSize="14" 
                                            Visibility="Visible" ToolTip="Close" 
                                            BorderBrush="Transparent" BorderThickness="0" Background="Transparent" Padding="0,0,0,0"
                                            >
                        </Button>
                    </Grid>
                </Border>
            </Border>


            <DataTemplate.Triggers>

                <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type TabItem}},Path=IsSelected}" Value="True">
                    <Setter TargetName="tabItemGrid" Property="Background" Value="#D6EAFF" />
                </DataTrigger>

                <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type TabItem}},Path=IsSelected}" Value="False">
                    <!--<Trigger Property="IsSelected"  Value="False">-->
                    <Setter TargetName="InsideBorder" Property="BorderBrush">
                        <Setter.Value>
                            <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                <GradientStop Color="#FFCCCCD0" />
                                <GradientStop Color="#FF526593" Offset="1" />
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                    <Setter TargetName="tabItemGrid" Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                <GradientStop Color="#FFCCCCD0" />
                                <GradientStop Color="#FF526593" Offset="1" />
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                </DataTrigger>
                <!--</Trigger>-->
            </DataTemplate.Triggers>
        </DataTemplate>

The ItemContainerStyle of the tabItem:

<Style TargetType="{x:Type TabItem}" x:Key="ContainerStyle">
            <Setter Property="Background" Value="Red" />
            <Setter Property="BorderBrush" Value="Red" />
            <Setter Property="Padding" Value="0" />
            <Setter Property="Margin" Value="0" />
            <Style.Triggers>
                <Trigger Property="IsEnabled" Value="false">
                    <Setter Property="Background" Value="Red"/>
                    <Setter Property="BorderBrush" Value="Red" />
                </Trigger>
                <Trigger Property="IsEnabled" Value="true">
                    <Setter Property="Background" Value="Red"/>
                    <Setter Property="BorderBrush" Value="Red" />
                </Trigger>

                <Trigger Property="IsMouseOver" Value="false">
                    <Setter Property="Background" Value="Red"/>
                    <Setter Property="BorderBrush" Value="Red" />
                </Trigger>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter Property="Background" Value="Red"/>
                    <Setter Property="BorderBrush" Value="Red" />
                </Trigger>

                <Trigger Property="IsFocused" Value="false">
                    <Setter Property="Background" Value="Red"/>
                    <Setter Property="BorderBrush" Value="Red" />
                </Trigger>
                <Trigger Property="IsFocused" Value="true">
                    <Setter Property="Background" Value="Red"/>
                    <Setter Property="BorderBrush" Value="Red" />
                </Trigger>
                <Trigger Property="IsKeyboardFocused" Value="false">
                    <Setter Property="Background" Value="Red"/>
                    <Setter Property="BorderBrush" Value="Red" />
                </Trigger>
                <Trigger Property="IsKeyboardFocused" Value="true">
                    <Setter Property="Background" Value="Red"/>
                    <Setter Property="BorderBrush" Value="Red" />
                </Trigger>

            </Style.Triggers>
        </Style>

what happens is that the selected tab is always with white default control background no matter what i do:

also when i point the mouse over the unselected tab it turns blue background instead of red:

i use transparent color instead of red but it is easier to show the problem with the red color.

why does the default colors override the itemStyleContainer and the style triggers?

Answer 1

Usually some behavior is hard-coded into the Template , so if you drastically restyle a control you need to create a new template, too. (You could use the default one as base though)

Answer 2

In your style for TabItem, add a ressource section:

<Style.Resources>
   <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Red" />
   <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Green" />
</Style.Resources>

The original style uses those system colors, so if you override them locally, you get the desired result.

Answer 3

Ok, found the solution. the Datatemplate messed things up, i just entered the same code of the Datatemplate, inside the override code of the Tabitem style and its working fine.

The style of Tabitem (instead of DataTemplate):

<!--Oveerriding TabItem-->
        <Style TargetType="{x:Type TabItem}">
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="HorizontalContentAlignment" Value="Center" />

            <!--Creating TabItem Template-->
            <Setter Property="Template">
                <Setter.Value>
                    <!--Content of template-->
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Border BorderThickness="3" BorderBrush="Transparent" CornerRadius="4">
                            <!--Border to make the tab item gap from the content-->
                            <Border x:Name="InsideBorder" BorderThickness="3" BorderBrush="#D6EAFF" CornerRadius="4">
                                <!--Border for the rounded corners-->
                                <!--TabItem Content Grid-->
                                <Grid x:Name="tabItemGrid" ShowGridLines="True" Margin="0" Background="#D6EAFF">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="25"/>
                                        <!--Icon Column-->
                                        <ColumnDefinition Width="1*"/>
                                        <!--Title Column-->
                                        <ColumnDefinition Width="20"/>
                                        <!--Close Button Column-->
                                    </Grid.ColumnDefinitions>

                                    <!--Icon of tab Item-->
                                    <Image Grid.Column="0" Grid.Row="1" Height="18" HorizontalAlignment="Left" Source="Images/tab1.jpg"/>

                                    <!--Title of tab Item-->
                                    <Label Name="TabText" Grid.Column="1" Grid.Row="1" Content="TabItem"  Height="23"  HorizontalAlignment="Left" 
                                           Margin="4,1,0,0"  VerticalAlignment="Top" FontFamily="Courier" FontSize="12" />

                                    <!--Close button of tab Item-->
                                    <Button Style="{DynamicResource TabButton}"
                                            Name="button_close" Content="x"
                                            Command="{Binding Path=CloseCommand}"
                                            Grid.Column="2" Grid.Row="1" 
                                            Height="20" Width="20" 
                                            Margin="0,0,0,2" VerticalAlignment="Center" HorizontalAlignment="Right"
                                            FontFamily="Courier" FontStretch="Normal" FontWeight="Bold" FontSize="14" 
                                            Visibility="Visible" ToolTip="Close" 
                                            BorderBrush="Transparent" BorderThickness="0" Background="Transparent" Padding="0,0,0,0">
                                    </Button>
                                </Grid>
                            </Border>
                        </Border>

                        <!--TabItem Triggers-->
                        <ControlTemplate.Triggers>

                            <Trigger Property="IsSelected" Value="True">
                                <Setter TargetName="tabItemGrid" Property="Background" Value="#D6EAFF" />
                            </Trigger>

                            <Trigger Property="IsSelected"  Value="False">
                                <Setter TargetName="InsideBorder" Property="BorderBrush">
                                    <Setter.Value>
                                        <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                            <GradientStop Color="#FFCCCCD0" />
                                            <GradientStop Color="#FF526593" Offset="1" />
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                                <Setter TargetName="tabItemGrid" Property="Background">
                                    <Setter.Value>
                                        <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                            <GradientStop Color="#FFCCCCD0" />
                                            <GradientStop Color="#FF526593" Offset="1" />
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                                <!--<Setter TargetName="button_close" Property="Visibility" Value="Hidden" />-->
                            </Trigger>

                            <!--<Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="tabItemCtrl" Property="Background" Value="#D6EAFF" />
                                <Setter TargetName="InsideBorder" Property="BorderBrush" Value="#D6EAFF" />
                            </Trigger>-->
                        </ControlTemplate.Triggers>

                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Tabcontrol code (no Itemtemplate property):

<TabControl Name="MainTabCtrl"  Margin="0" Padding="0" BorderThickness="0" Background="Transparent"
                        IsSynchronizedWithCurrentItem="True"
                        ItemsSource="{Binding Path=TabViewModels}" 
                        HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
            </TabControl>

The result is: