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>