How to change background color of TabControl.Header

Question

I need to change the background color of the TabControl header, but TabControl haven't property for it, how can I do it. Help me please. Here is my code:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="502" Width="628">
    <TabControl Background="#123" TabStripPlacement="Left" HorizontalAlignment="Stretch" BorderBrush="#41020202">
        <TabControl.BitmapEffect>
            <DropShadowBitmapEffect Color="Black" Direction="270"/>
        </TabControl.BitmapEffect>
        <TabControl.Resources>
            <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>
</Window>

Here is my result:

Here is result that I need:

I remember being stuck on that issue too, if I remember correctly, I have a project at home in which I solved, I'll look it up if you haven't found it yet by then. — Terry, May 29 '12 at 11:05
You can always modify the control template by copying it and making your local modifications. This is cumbersome but also what makes WPF so flexible. — Martin Liversage, May 29 '12 at 11:09
I have pereprobyval all styles: TabControl.ItemContainerStyle, TabControl.ItemsPanel, TabControl.Style, but yet not one did not help, please tell me what style should be changed at least — Creative, May 29 '12 at 11:27

score 35 · Accepted Answer · edited Jun 23 '22 at 15:14

35

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>

edited Jun 23 '22 at 15:14

ASh

34,632
9
60
82

answered May 29 '12 at 11:27

ShadeOfGrey

1,256
12
14

If not works, try to place the `Style` inside `TabControl.Resources` not global `Resources` (`UserControl` or else) – Brains Aug 24 '22 at 17:49

score 12 · Answer 2 · edited Jan 25 '20 at 11:02

12

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>

edited Jan 25 '20 at 11:02

סטנלי גרונן

2,917
23
46
68

answered Jan 25 '20 at 10:22

NEBEZ

702
8
19

score 5 · Answer 3 · answered May 29 '12 at 11:29

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>

score 5 · Answer 4 · answered May 01 '17 at 06:53

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.

How to change background color of TabControl.Header

4 Answers4

Linked