I want to have selected tab background set to red and unselected to green. However only unselected tab is colored on green when changing. Selected remains white.
<TabControl Background="LightGray" Name="MainTabControl">
<TabControl.Resources>
<Style TargetType="TabItem">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="Red" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter Property="Background" Value="Green" />
</Trigger>
</Style.Triggers>
</Style>
</TabControl.Resources>
<TabItem Header="Main" />
<TabItem Header="Optimizer" />
</TabControl>
The default is false. The following example shows how to use the IsSelected property to select a TabItem programmatically.
Microsoft makes no warranties, express or implied, with respect to the information provided here. Gets or sets a value that indicates whether the TabItem is selected. true if the TabItem is selected; otherwise, false.
The TabItem has an IsSelected property that you can bind to a source property of your view model. But the easiest way is to bind the SelectedIndex property of the TabControl itself to an int property on your view model: <TabControl SelectedIndex="{Binding YourIndexProperty}"> .. </TabControl>
Override the TabItem
's ControlTemplate
and add the trigger to it
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border Name="Border" >
<ContentPresenter VerticalAlignment="Center" Margin="5"
HorizontalAlignment="Center"
ContentSource="Header" >
</ContentPresenter>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Border" Property="Background" Value="Red" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Border" Property="Background" Value="Green" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
EDIT
to keep the original tabitem
style and add you background colors, from vs designer right click on the tabitem
and select EditTemplate > Edit a Copy, then update the TabItem.Static.Background
Gardian brush which is responsible for the non selected tab color, and TabItem.Selected.Background
Brush which is responsible for the Selected tab color:
//..
<LinearGradientBrush x:Key="TabItem.Static.Background" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#F0F0F0" Offset="0.0"/>
<GradientStop Color="Green" Offset="1.0"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="TabItem.Static.Border" Color="#ACACAC"/>
<LinearGradientBrush x:Key="TabItem.MouseOver.Background" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#ECF4FC" Offset="0.0"/>
<GradientStop Color="#DCECFC" Offset="1.0"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="TabItem.MouseOver.Border" Color="#7EB4EA"/>
<SolidColorBrush x:Key="TabItem.Disabled.Background" Color="#F0F0F0"/>
<SolidColorBrush x:Key="TabItem.Disabled.Border" Color="#D9D9D9"/>
<SolidColorBrush x:Key="TabItem.Selected.Border" Color="#ACACAC"/>
<SolidColorBrush x:Key="TabItem.Selected.Background" Color="Red"/>
//..
Or
or you can use a templateBinding
in both the mainBorder
and innerBorder
to the Background
property (initially only the mainBorder
was templateBinded
to the background
property), then add you trigger to the controlTemplate
triggers,
<Grid x:Name="templateRoot" SnapsToDevicePixels="true">
<Border x:Name="mainBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,0" Background="{TemplateBinding Background}" Margin="0">
<Border x:Name="innerBorder" BorderBrush="{StaticResource TabItem.Selected.Border}" BorderThickness="1,1,1,0" Background="{TemplateBinding Background}" Margin="-1" Opacity="0"/>
</Border>
<ContentPresenter x:Name="contentPresenter" ContentSource="Header" Focusable="False" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
</Grid>
and add your trigger at the end
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="Red" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter Property="Background" Value="Green" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
and that should response your second question
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With