Change TabItem Icon color dynamically based on IsSelected True/False
Question
I have Icon = Canvas (History_icon) in ResourceDictionary (Controls.xaml):
Controls.xaml:
<!--TABITEM STYLE-->
<SolidColorBrush x:Key="SidebarTabBackgroundBrushSelected" Color="Transparent"></SolidColorBrush>
<SolidColorBrush x:Key="SidebarTabBorderBrushSelected" Color="Transparent"></SolidColorBrush>
<SolidColorBrush x:Key="SidebarTabBackgroundBrush" Color="Transparent"></SolidColorBrush>
<SolidColorBrush x:Key="SidebarTabBorderBrush" Color="Transparent"></SolidColorBrush>
<!--ICON COLORS-->
<SolidColorBrush x:Key="IsSelectedIcon" Color="#00ff00"></SolidColorBrush>
<SolidColorBrush x:Key="IsNOTSelectedIcon" Color="#ff0000"></SolidColorBrush>
<Style x:Key="SideBarTabItem" TargetType="TabItem">
<Setter Property="Padding" Value="10,15,10,15" />
<Setter Property="MinHeight" Value="60"/>
<Setter Property="MinWidth" Value="110"/>
<Setter Property="Foreground" Value="Gray"></Setter>
<Setter Property="FontSize" Value="12"/>
<Setter Property="FontFamily" Value="{StaticResource Roboto}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Border Padding="{TemplateBinding Padding}"
Name="tab"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{StaticResource SidebarTabBorderBrush}"
SnapsToDevicePixels="True">
<ContentPresenter Name="content"
ContentSource="Header" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="tab" Property="Background" Value="{StaticResource SidebarTabBackgroundBrushSelected}" />
<Setter TargetName="tab" Property="BorderBrush" Value="{StaticResource SidebarTabBorderBrushSelected}" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="tab" Property="Background" Value="{StaticResource SidebarTabBackgroundBrush}" />
<Setter TargetName="tab" Property="BorderBrush" Value="{StaticResource SidebarTabBorderBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="White"></Setter>
<Setter Property="FontSize" Value="12"/>
<Setter Property="FontFamily" Value="{StaticResource Roboto}"/>
</Trigger>
</Style.Triggers>
</Style>
<!--HISTORY-->
<Style TargetType="{x:Type ContentControl}" x:Key="History_icon">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Viewbox Width="{Binding Width, RelativeSource={RelativeSource AncestorType=ContentControl}}">
<Canvas Width="384.000" Height="384.000">
<Canvas>
<Canvas>
<!-- Layer 1/<Group>/<Compound Path> -->
<Path Fill="Transparent" Data="...Here are a lot of symbols, so they are shortened..."/>
<!-- Layer 1/<Group>/<Path> -->
<Path Fill="#ff000000" Data="...Here are a lot of symbols, so they are shortened..."/>
<!-- Layer 1/<Group>/<Path> -->
<Path Fill="#ff000000" Data="...Here are a lot of symbols, so they are shortened..."/>
</Canvas>
</Canvas>
</Canvas>
</Viewbox>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
I would like to apply different color for TabItem IsSelected - True/False . So to be able to change this Fill="#ff000000" to for example Green and Red. How I can do that in my current setup?
Here is MainWindow.xaml:
<TabControl HorizontalAlignment="Left" Height="657" Margin="0,80,0,0" VerticalAlignment="Top" Width="1072"
TabStripPlacement="Left" Background="Transparent" BorderThickness="0" Grid.ColumnSpan="2">
<TabItem Style="{DynamicResource SideBarTabItem}">
<TabItem.Header>
<StackPanel Orientation="Vertical">
<ContentControl Style="{StaticResource History_icon}" Width="26" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBlock VerticalAlignment="Center" Padding="0,10,0,0" HorizontalAlignment="Center"><Run Text="HOME"/></TextBlock>
</StackPanel>
</TabItem.Header>
</TabItem>
</TabControl>
EDIT:
Based on answer provided:
<!--ICON COLORS-->
<SolidColorBrush x:Key="IsSelectedIcon" Color="Red"></SolidColorBrush>
<SolidColorBrush x:Key="IsNOTSelectedIcon" Color="Green"></SolidColorBrush>
<Style TargetType="{x:Type ContentControl}" x:Key="Clock_icon">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Viewbox Width="{Binding Width, RelativeSource={RelativeSource AncestorType=ContentControl}}">
<Canvas Width="382.987" Height="383.051">
<Canvas>
<Canvas>
<!-- Layer 1/<Group>/<Compound Path> -->
<Path Data="F1 M 191.097,355.685 C 281.557,355.658 354.804,282.447 354.968,191.891 C 355.133,101.553 281.724,28.129 191.195,28.082 C 100.718,28.035 27.448,101.271 27.365,191.835 C 27.282,282.275 100.667,355.712 191.097,355.685 Z M 0.000,203.085 C 0.000,195.617 0.000,188.150 0.000,180.683 C 0.217,179.610 0.558,178.545 0.633,177.462 C 2.495,150.785 9.407,125.428 22.489,102.162 C 57.697,39.549 111.384,5.374 183.137,1.044 C 220.809,-1.229 256.394,7.800 288.569,27.653 C 346.580,63.448 377.962,115.797 382.038,183.849 C 384.103,218.333 376.567,251.213 359.895,281.529 C 330.245,335.448 285.004,368.398 224.478,380.033 C 217.184,381.436 209.742,382.064 202.368,383.051 C 194.901,383.051 187.433,383.051 179.966,383.051 C 179.005,382.840 178.053,382.502 177.082,382.438 C 153.622,380.896 131.120,375.296 110.077,364.923 C 51.444,336.020 15.559,289.432 3.014,225.150 C 1.595,217.876 0.985,210.444 0.000,203.085 Z">
<Path.Style>
<Style TargetType="Path">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType=TabItem}}" Value="True">
<Setter Property="Fill" Value="{StaticResource IsSelectedIcon}" />
</DataTrigger>
<DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType=TabItem}}" Value="False">
<Setter Property="Fill" Value="{StaticResource IsNOTSelectedIcon}" />
</DataTrigger>
</Style.Triggers>
</Style>
</Path.Style>
</Path>
<!-- Layer 1/<Group>/<Path> -->
<Path Data="F1 M 202.368,383.051 C 209.742,382.064 217.184,381.436 224.478,380.033 C 285.004,368.398 330.245,335.448 359.895,281.529 C 376.567,251.213 384.103,218.333 382.038,183.849 C 377.962,115.797 346.580,63.448 288.569,27.653 C 256.394,7.800 220.809,-1.229 183.137,1.044 C 111.384,5.374 57.697,39.549 22.489,102.162 C 9.407,125.428 2.495,150.785 0.633,177.462 C 0.558,178.545 0.217,179.610 0.000,180.683 C 0.000,120.465 0.000,60.247 0.000,0.000 C 127.631,0.000 255.263,0.000 382.987,0.000 C 382.987,127.664 382.987,255.357 382.987,383.051 C 322.803,383.051 262.585,383.051 202.368,383.051 Z">
<Path.Style>
<Style TargetType="Path">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType=TabItem}}" Value="True">
<Setter Property="Fill" Value="{StaticResource IsSelectedIcon}" />
</DataTrigger>
<DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType=TabItem}}" Value="False">
<Setter Property="Fill" Value="{StaticResource IsNOTSelectedIcon}" />
</DataTrigger>
</Style.Triggers>
</Style>
</Path.Style>
</Path>
<!-- Layer 1/<Group>/<Path> -->
<Path Data="F1 M 0.000,203.085 C 0.985,210.444 1.595,217.876 3.014,225.150 C 15.559,289.432 51.444,336.020 110.077,364.923 C 131.120,375.296 153.622,380.896 177.082,382.438 C 178.053,382.502 179.005,382.840 179.966,383.051 C 119.977,383.051 59.989,383.051 0.000,383.051 C 0.000,323.062 0.000,263.073 0.000,203.085 Z">
<Path.Style>
<Style TargetType="Path">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType=TabItem}}" Value="True">
<Setter Property="Fill" Value="{StaticResource IsSelectedIcon}" />
</DataTrigger>
<DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType=TabItem}}" Value="False">
<Setter Property="Fill" Value="{StaticResource IsNOTSelectedIcon}" />
</DataTrigger>
</Style.Triggers>
</Style>
</Path.Style>
</Path>
<!-- Layer 1/<Group>/<Compound Path> -->
<Path Data="F1 M 177.579,178.295 C 175.458,178.295 173.977,178.295 172.495,178.295 C 142.627,178.297 112.758,178.261 82.890,178.322 C 74.243,178.339 68.295,184.050 68.345,191.955 C 68.395,199.746 74.247,205.425 82.660,205.440 C 118.626,205.503 154.593,205.536 190.559,205.339 C 193.573,205.323 196.930,204.069 199.509,202.421 C 203.858,199.642 204.798,194.976 204.789,189.973 C 204.725,154.878 204.756,119.783 204.750,84.687 C 204.750,83.568 204.737,82.445 204.642,81.331 C 204.116,75.142 199.407,70.161 193.283,69.280 C 184.386,68.000 177.621,74.146 177.602,83.790 C 177.544,113.658 177.579,143.527 177.579,173.395 C 177.579,174.859 177.579,176.324 177.579,178.295 Z M 191.097,355.685 C 100.667,355.712 27.282,282.275 27.365,191.835 C 27.448,101.271 100.718,28.035 191.195,28.082 C 281.724,28.129 355.133,101.553 354.968,191.891 C 354.804,282.447 281.557,355.658 191.097,355.685 Z">
<Path.Style>
<Style TargetType="Path">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType=TabItem}}" Value="True">
<Setter Property="Fill" Value="{StaticResource IsSelectedIcon}" />
</DataTrigger>
<DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType=TabItem}}" Value="False">
<Setter Property="Fill" Value="{StaticResource IsNOTSelectedIcon}" />
</DataTrigger>
</Style.Triggers>
</Style>
</Path.Style>
</Path>
<!-- Layer 1/<Group>/<Path> -->
<Path Data="F1 M 177.579,178.295 C 177.579,176.324 177.579,174.859 177.579,173.395 C 177.579,143.527 177.544,113.658 177.602,83.790 C 177.621,74.146 184.386,68.000 193.283,69.280 C 199.407,70.161 204.116,75.142 204.642,81.331 C 204.737,82.445 204.750,83.568 204.750,84.687 C 204.756,119.783 204.725,154.878 204.789,189.973 C 204.798,194.976 203.858,199.642 199.509,202.421 C 196.930,204.069 193.573,205.323 190.559,205.339 C 154.593,205.536 118.626,205.503 82.660,205.440 C 74.247,205.425 68.395,199.746 68.345,191.955 C 68.295,184.050 74.243,178.339 82.890,178.322 C 112.758,178.261 142.627,178.297 172.495,178.295 C 173.977,178.295 175.458,178.295 177.579,178.295 Z">
<Path.Style>
<Style TargetType="Path">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType=TabItem}}" Value="True">
<Setter Property="Fill" Value="{StaticResource IsSelectedIcon}" />
</DataTrigger>
<DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType=TabItem}}" Value="False">
<Setter Property="Fill" Value="{StaticResource IsNOTSelectedIcon}" />
</DataTrigger>
</Style.Triggers>
</Style>
</Path.Style>
</Path>
</Canvas>
</Canvas>
</Canvas>
</Viewbox>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
I am getting this:
You can see clock, but it is behind red background. What I am still doing wrong?
1 answers
solution1
2 ACCPTED 2020-11-17 09:00:11
You can set the Fill in a Path style using a DataTrigger. The DataTrigger must target the ancestor type (TabItem) IsSelected property, and the Path needs to have the Fill taken off (or it will override the DataTrigger value).
<Path Data="M 10,100 C 10,300 300,-200 300,100">
<Path.Style>
<Style TargetType="Path">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType=TabItem}}" Value="True">
<Setter Property="Fill" Value="{StaticResource IsSelectedIcon}" />
</DataTrigger>
<DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType=TabItem}}" Value="False">
<Setter Property="Fill" Value="{StaticResource IsNOTSelectedIcon}" />
</DataTrigger>
</Style.Triggers>
</Style>
</Path.Style>
</Path>
Obviously you can move this out into a reusable style somewhere but this is all I added to get it working.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
setting the TabItem IsSelected background
Change color of tabitem for multiple tabcontrols
How to change datagridrow backcolor based on "IsSelected" property?
Tabitem WPF change tabitem border instead of background color
Unable to change back color of selected tabitem in silverlight
How to change text color of a MahApps TabItem
WPF C# Bind multiple treeViewItems isSelected to tabItem isSelected
Change true/false to a image
Binding MenuItem's IsChecked to TabItem's isSelected
Bind MenuItem.Visibility to TabItem.IsSelected
Related Tags