How to change background color of TabControl.Header
Solution 1
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>
Solution 2
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>
Solution 3
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>
Solution 4
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.
Related videos on Youtube
Comments
-
Creative over 4 years
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:
-
Terry about 12 yearsI 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.
-
Martin Liversage about 12 yearsYou can always modify the control template by copying it and making your local modifications. This is cumbersome but also what makes WPF so flexible.
-
Creative about 12 yearsLook for it, please. It really need me.
-
Creative about 12 yearsI 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 about 12 yearsThank you very much, you really help me.
-
Jon Dosmann almost 11 years+1, very simple answer. Works well... probably should be marked as best answer