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:

enter image description here

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

enter image description here

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?

H.B. H.B. · Accepted Answer · 2012-01-25T13:38:08

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)

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

3 Answers