Change default highlight colour of TabItem in TabControl WPF

Question

Hi,

Im trying to change the default highlight colour of a tab item in a tab control in WPF.

In the image the highlight colour is orange, I just want to know if there is away to change it to another solid colour?

Here is my XAML which declares the TabControl and 2 TabItems

<TabControl>
            <TabControl.Background>
                <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                    <GradientStop Color="#FFCCCCD0"/>
                    <GradientStop Color="#FF526593" Offset="1"/>
                </LinearGradientBrush>
            </TabControl.Background>
            <TabItem Header="test1">
                <TabItem.Content>
                    <StackPanel Orientation="Horizontal">
                        <Button Content="Test" VerticalAlignment="Center" />
                        <Button Content="Test2" />
                    </StackPanel>
                </TabItem.Content>              
            </TabItem>
            <TabItem Header="Test2">
                <TabItem.Content>
                    <TextBox />
                </TabItem.Content>
            </TabItem>
        </TabControl>

Please note as well I dont have access to expression blend, so any solutions need be possible in Visual Studio 2010.

Thanks.

Answer 1

You need to override the style of the TabItem control. Below is an example that still needs some tweaking. Just change it to the style you want. The IsSelected trigger adds changes to the TabItem when it is selected.

<Window.Resources>
    <ResourceDictionary>
        <Style TargetType="{x:Type TabItem}">
            <Setter Property="BorderThickness"
                    Value="3" />
            <Setter Property="BorderBrush"
                    Value="Blue" />
            <Setter Property="VerticalContentAlignment"
                    Value="Center" />
            <Setter Property="HorizontalContentAlignment"
                    Value="Center" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Border>
                            <Grid>
                                <Grid>
                                    <Border x:Name="border" 
                                            CornerRadius="3,3,0,0"
                                            Background="{TemplateBinding Background}"
                                            BorderBrush="{TemplateBinding BorderBrush}"
                                            BorderThickness="1,1,1,0" />
                                </Grid>
                                <Border BorderThickness="{TemplateBinding BorderThickness}"
                                        Padding="{TemplateBinding Padding}">
                                    <ContentPresenter ContentSource="Header"
                                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                                </Border>
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected"
                                     Value="True">
                                <Setter TargetName="border"
                                        Property="BorderBrush"
                                        Value="Red" />
                                <Setter TargetName="border"
                                        Property="BorderThickness"
                                        Value="0,3,0,0" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ResourceDictionary>
</Window.Resources>

<Grid>
    <TabControl>
        <TabControl.Background>
            <LinearGradientBrush EndPoint="0,1"
                                 StartPoint="0,0">
                <GradientStop Color="#FFCCCCD0" />
                <GradientStop Color="#FF526593"
                              Offset="1" />
            </LinearGradientBrush>
        </TabControl.Background>
        <TabItem Header="test1">
            <TabItem.Content>
                <StackPanel Orientation="Horizontal">
                    <Button Content="Test"
                            VerticalAlignment="Center" />
                    <Button Content="Test2" />
                </StackPanel>
            </TabItem.Content>
        </TabItem>
        <TabItem Header="Test2">
            <TabItem.Content>
                <TextBox />
            </TabItem.Content>
        </TabItem>
    </TabControl>
</Grid>