How to change background color of TabControl.Header

If ShadeOfGrey answer does not work, you should use Grid instead of TabPanel:

<TabControl.Resources>
    <Style TargetType="{x:Type Grid}">
        <Setter Property="Background" Value="WhiteSmoke"/>
    </Style>
</TabControl.Resources>

Adding the following style in the TabControl.Resources section should do what you want:

<Style TargetType="{x:Type TabPanel}">
    <Setter Property="Background" Value="Black"/>
</Style>

The above solution didn't work for me but I had my Tab Control in a User Control and not a window. Setting User Control background colour instead fixed the issue; maybe this will be helpful for others with the same problem if the up-voted solution does not work.


You should set the style for the TabPanel... Basically we arrange the Tabs in the TabPanel in the TabControl.

The below code will help you..

<TabControl Background="#123" TabStripPlacement="Left" HorizontalAlignment="Stretch" BorderBrush="#41020202">
            <TabControl.BitmapEffect>
                <DropShadowBitmapEffect Color="Black" Direction="270"/>
            </TabControl.BitmapEffect>
            <TabControl.Resources>
                <Style TargetType="{x:Type TabPanel}">
                    <Setter Property="Background" Value="Yellow"/>
                </Style>
                <Style TargetType="{x:Type TabItem}">
                    <Setter Property="BorderThickness" Value="0"/>
                    <Setter Property="Padding" Value="0" />
                    <Setter Property="HeaderTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <Border x:Name="grid" Background="Red">
                                    <ContentPresenter>
                                        <ContentPresenter.Content>
                                            <TextBlock Margin="4" FontSize="15" Text="{TemplateBinding Content}"/>
                                        </ContentPresenter.Content>
                                        <ContentPresenter.LayoutTransform>
                                            <RotateTransform Angle="270" />
                                        </ContentPresenter.LayoutTransform>
                                    </ContentPresenter>
                                </Border>
                                <DataTemplate.Triggers>
                                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type TabItem}},Path=IsSelected}" Value="True">
                                        <Setter TargetName="grid" Property="Background" Value="Green"/>
                                    </DataTrigger>
                                </DataTemplate.Triggers>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </TabControl.Resources>
            <TabItem Header="Tab Item 1" />
            <TabItem Header="Tab Item 2" />
            <TabItem Header="Tab Item 3" />
            <TabItem Header="Tab Item 4" />
        </TabControl>