根据 IsSelected True/False 动态更改 TabItem 图标颜色
[英]Change TabItem Icon color dynamically based on IsSelected True/False
问题描述
I have Icon = Canvas (History_icon) in ResourceDictionary (Controls.xaml):
我在 ResourceDictionary (Controls.xaml) 中有 Icon = Canvas (History_icon)：
Controls.xaml:控件.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 .我想为TabItem IsSelected - True/False应用不同的颜色。 So to be able to change this Fill="#ff000000" to for example Green and Red.因此，为了能够将此Fill="#ff000000"更改为例如绿色和红色。 How I can do that in my current setup?我如何在当前设置中做到这一点？
Here is MainWindow.xaml:这是 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 个解决方案
解决方案1
2 已采纳 2020-11-17 09:00:11
You can set the Fill in a Path style using a DataTrigger.您可以使用 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). DataTrigger 必须以祖先类型 (TabItem) IsSelected 属性为目标，并且 Path 需要取消 Fill（否则它将覆盖 DataTrigger 值）。
<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.显然，您可以将其移出到某个地方的可重用样式，但这就是我添加的所有内容以使其正常工作。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
设置TabItem IsSelected背景 - setting the TabItem IsSelected background
更改多个Tab控件的Tabitem颜色 - Change color of tabitem for multiple tabcontrols
如何根据“IsSelected”属性更改 datagridrow 背景颜色？ - How to change datagridrow backcolor based on "IsSelected" property?
Tabitem WPF 更改 tabitem 边框而不是背景颜色 - Tabitem WPF change tabitem border instead of background color
无法在Silverlight中更改所选Tabitem的背景色 - Unable to change back color of selected tabitem in silverlight
如何更改 MahApps TabItem 的文本颜色 - How to change text color of a MahApps TabItem
WPF C# 绑定多个treeViewItems isSelected到tabItem isSelected - WPF C# Bind multiple treeViewItems isSelected to tabItem isSelected
将真/假更改为图像 - Change true/false to a image
将MenuItem的IsChecked绑定到TabItem的isSelected - Binding MenuItem's IsChecked to TabItem's isSelected
将MenuItem.Visibility绑定到TabItem.IsSelected - Bind MenuItem.Visibility to TabItem.IsSelected
相关标签