How to bind border background to tabitem header background in WPF? - wpf

Question

My TabItem styling is something like
<!-- TabItem Style -->
<Style
TargetType="TabItem">
<Setter
Property="BorderThickness"
Value="0" />
<Setter
Property="BorderBrush"
Value="Transparent" />
<Setter
Property="Background"
Value="Transparent" />
<Setter
Property="VerticalContentAlignment"
Value="Center" />
<Setter
Property="HorizontalContentAlignment"
Value="Center" />
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="{x:Type TabItem}">
<Border>
<Grid>
<Grid Name="TabPanel">
<Border
CornerRadius="3,3,0,0"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" />
</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="TabPanel" Property="Background" Value="LightGreen" />-->
<Setter Property="FontWeight" Value="Bold" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter Property="FontWeight" Value="Normal" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and my TabControl code
<TabControl>
<TabItem
Header="Dash"
Name="tabItem1"
...>
<Border
Background="#002e00"
...>
...
</Border>
</TabItem>
<TabItem
Header="Hash"
Name="tabItem2"
...>
<Border
Background="#00a800"
...>
...
</Border>
</TabItem>
<TabItem
Header="Bash"
Name="tabItem3"
...>
<Border
Background="#ffde24"
...>
...
</Border>
</TabItem>
</TabControl>
I want to make the Background colors of TabItem Headers i.e. Header="Dash", "Hash" & "Bash" to be exact of its TabItem Border Backgrounds i.e. "#002e00", "#00a800" & "#ffde24" respectively when it is selected using Trigger in ControlTemplate.Triggers?

Answer 1

You can add styling as key based on your base styling (something like)
<SolidColorBrush
x:Key="Blueish"
Color="#5252ff" />
<SolidColorBrush
x:Key="Greenish"
Color="#005757" />
<SolidColorBrush
x:Key="Blackish"
Color="#2e2e00" />
<Style TargetType="TabItem" BasedOn="{StaticResource {x:Type TabItem}}" x:Key="blue">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="{x:Type TabItem}">
<Border>
<Grid>
<Grid Name="TabPanel">
<Border
CornerRadius="3,3,0,0"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" />
</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="TabPanel" Property="Background" Value="{DynamicResource Blueish}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="TabItem" BasedOn="{StaticResource {x:Type TabItem}}" x:Key="green">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="{x:Type TabItem}">
<Border>
<Grid>
<Grid Name="TabPanel">
<Border
CornerRadius="3,3,0,0"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" />
</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="TabPanel" Property="Background" Value="{DynamicResource Greenish}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="TabItem" BasedOn="{StaticResource {x:Type TabItem}}" x:Key="black">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="{x:Type TabItem}">
<Border>
<Grid>
<Grid Name="TabPanel">
<Border
CornerRadius="3,3,0,0"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" />
</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="TabPanel" Property="Background" Value="{DynamicResource Blackish}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Use it like:
<TabItem Style="{StaticResource blue}" ...>
<Border Background="{DynamicResource Blueish}" ...</Border>...
<TabItem Style="{StaticResource green}" .../>
<Border Background="{DynamicResource Greenish}" ...</Border>...
<TabItem Style="{StaticResource black}" .../>
<Border Background="{DynamicResource Blackish}" ...</Border>...
Now, I'm not sure whether this code can be further shortened (possibly) but nonetheless this should do the job.