'How to bind border background to tabitem header background in WPF?
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?
Solution 1:[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.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 |