选择但失去焦点时更改 WPF treeViewItem 背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21606281/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-09-13 10:44:27 来源:igfitidea点击:
Change WPF treeViewItem Background color when selected but lost focus
提问by S.K
I am trying to change a TreeViewItem background color when it selected but lost focus. I saw some similar questions like: WPF TreeViewItem Background, but I couldn't use it...
我试图更改 TreeViewItem 选择但失去焦点时的背景颜色。我看到了一些类似的问题，例如： WPF TreeViewItem Background，但我无法使用它...
Here is my tree view Xaml code:
这是我的树视图 Xaml 代码：
> <UserControl x:Class="Ednfi.Setup.Presentation.Views.TreeViewViews.StationTree"
> xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
> xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
> xmlns:behaviour="clr-namespace:Ednfi.Setup.Presentation.Extensions;assembly=Ednfi.Setup.Presentation"
> xmlns:nodes="clr-namespace:Ednfi.Setup.Presentation.ViewModels.TreeViewViewModels.Nodes"
> mc:Ignorable="d"
> xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
> xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
> d:DesignHeight="226" d:DesignWidth="227"
> xmlns:ml="clr-namespace:Ednfi.Setup.Presentation.ml_resources">
> <TreeView Margin="10 0 10 20" ItemsSource="{Binding Path=Root.Children}" VirtualizingStackPanel.IsVirtualizing="True"
> VirtualizingStackPanel.VirtualizationMode="Recycling">
>
>
> <TreeView.ItemContainerStyle>
> <Style TargetType="{x:Type TreeViewItem}">
> <Setter Property="IsSelected" Value="{Binding Path=IsSelected, Mode=TwoWay}"/>
> <Setter Property="IsExpanded" Value="{Binding Path=IsExpanded, Mode=TwoWay}" />
> </Style>
> </TreeView.ItemContainerStyle>
> <TreeView.Resources>
> <Style TargetType="{x:Type TreeViewItem}">
> <Setter Property="Background" Value="Transparent" />
> <Setter Property="HorizontalContentAlignment" Value="{Binding Path=HorizontalContentAlignment,
> RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"
> />
> <Setter Property="VerticalContentAlignment" Value="{Binding Path=VerticalContentAlignment,
> RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"
> />
> <Setter Property="Padding" Value="1,0,0,0" />
> <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
> <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />
> <Setter Property="behaviour:TreeViewItemBehavior.IsBroughtIntoViewWhenSelected"
> Value="True" />
> <Setter Property="Template">
> <Setter.Value>
> <ControlTemplate TargetType="{x:Type TreeViewItem}">
> <Grid>
> <Grid.ColumnDefinitions>
> <ColumnDefinition MinWidth="19" Width="Auto" />
> <ColumnDefinition Width="Auto" />
> <ColumnDefinition Width="*" />
> </Grid.ColumnDefinitions>
> <Grid.RowDefinitions>
> <RowDefinition Height="Auto" />
> <RowDefinition />
> </Grid.RowDefinitions>
> <ToggleButton x:Name="Expander" IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource
> TemplatedParent}}" ClickMode="Press" />
> <Border Grid.Column="1" x:Name="Selection_Border" Background="{TemplateBinding Background}"
> BorderBrush="{TemplateBinding BorderBrush}"
> BorderThickness="{TemplateBinding BorderThickness}"
> Padding="{TemplateBinding Padding}">
> <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
> x:Name="PART_Header" ContentSource="Header" />
> </Border>
> <ItemsPresenter Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1" x:Name="ItemsHost" />
> </Grid>
> <ControlTemplate.Triggers>
> <Trigger Property="IsExpanded" Value="false">
> <Setter Property="Visibility" Value="Collapsed" TargetName="ItemsHost" />
> </Trigger>
> <Trigger Property="HasItems" Value="false">
> <Setter Property="Visibility" Value="Hidden" TargetName="Expander" />
> </Trigger>
> <Trigger Property="IsSelected" Value="true">
> <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"
> TargetName="Selection_Border" />
> <Setter Property="Foreground" Value="{DynamicResource {x:Static
> SystemColors.HighlightTextBrushKey}}" />
> </Trigger>
> <MultiTrigger>
> <MultiTrigger.Conditions>
> <Condition Property="IsSelected" Value="true" />
> <Condition Property="IsSelectionActive" Value="false" />
> </MultiTrigger.Conditions>
> <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"
> TargetName="Selection_Border" />
> <Setter Property="Foreground" Value="{DynamicResource {x:Static
> SystemColors.HighlightTextBrushKey}}" />
> </MultiTrigger>
> <Trigger Property="IsEnabled" Value="false">
> <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
> </Trigger>
> </ControlTemplate.Triggers>
> </ControlTemplate>
> </Setter.Value>
> </Setter>
> </Style>
> <!-- Style for the ToggleButton control used to expand/collapse a TreeViewItem control -->
> <Style TargetType="{x:Type ToggleButton}">
> <Setter Property="Focusable" Value="False" />
> <Setter Property="Width" Value="19" />
> <Setter Property="Height" Value="13" />
> <Setter Property="Template">
> <Setter.Value>
> <ControlTemplate TargetType="{x:Type ToggleButton}">
> <Border Width="19" Height="13" Background="#00FFFFFF" x:Name="Border">
> <Border Width="9" Height="9" x:Name="Border1" SnapsToDevicePixels="True" BorderBrush="#FF9495A2"
> BorderThickness="1,1,1,1" CornerRadius="1,1,1,1">
> <Border.Background>
> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
> <GradientStop Color="#FFFFFFFF" Offset="0.4" />
> <GradientStop Color="#FFC6CEDA" Offset="1" />
> </LinearGradientBrush>
> </Border.Background>
> <Path Fill="#FF000000" Margin="1,1,1,1" x:Name="ExpandPath" Data="M0,2L0,3 2,3 2,5 3,5 3,3
> 5,3 5,2 3,2 3,0 2,0 2,2z" />
> </Border>
> </Border>
> <ControlTemplate.Triggers>
> <Trigger Property="IsChecked" Value="True">
> <Setter Property="Data" Value="M0,2L0,3 5,3 5,2z" TargetName="ExpandPath" />
> </Trigger>
> </ControlTemplate.Triggers>
> </ControlTemplate>
> </Setter.Value>
> </Setter>
> </Style>
> <DataTemplate DataType="{x:Type nodes:MonitorNode}">
> <StackPanel Orientation="Horizontal" Margin="0 2 0 0">
> <Image Source="{Binding ImageSource}" Width="16" Height="16" Margin="0 0 3 0" />
> <TextBlock Text="{x:Static ml:MultiLang._157}" x:Name="ML_0048" />
> <TextBlock Text="{Binding ID}" />
> <TextBlock Text="{x:Static ml:MultiLang._158}" x:Name="ML_0050" />
> <TextBlock Text="{Binding Name}" />
> </StackPanel>
> </DataTemplate>
> <HierarchicalDataTemplate DataType="{x:Type nodes:StationNode}" ItemsSource="{Binding Children}">
> <StackPanel Orientation="Horizontal" Margin="0 2 0 0">
> <StackPanel.ContextMenu>
> <ContextMenu HasDropShadow="True">
> <MenuItem Header="{x:Static ml:MultiLang._160}" Command="{Binding CopyMonitorsCommand}"
> x:Name="ML_0055" />
> <MenuItem Header="{x:Static ml:MultiLang._159}" Command="{Binding PasteMonitorsCommand}"
> x:Name="ML_0056" />
> <MenuItem Header="{x:Static ml:MultiLang._162}" Command="{Binding CopyStationsCommand}"
> x:Name="ML_0057" />
> <MenuItem Header="{x:Static ml:MultiLang._161}" Command="{Binding PasteStationsCommand}"
> x:Name="ML_0058" />
> </ContextMenu>
> </StackPanel.ContextMenu>
> <Image Source="{Binding ImageSource}" Width="16" Height="16" Margin="0 0 3 0" />
> <TextBlock Text="{x:Static ml:MultiLang._157}" x:Name="ML_0060" />
> <TextBlock Text="{Binding ID}" />
> <TextBlock Text="{x:Static ml:MultiLang._158}" x:Name="ML_0062" />
> <TextBlock Text="{Binding Name}" />
> </StackPanel>
> </HierarchicalDataTemplate>
> <HierarchicalDataTemplate DataType="{x:Type nodes:FilteringNode}" ItemsSource="{Binding Children}">
> <StackPanel Orientation="Horizontal" Margin="0 2 0 0">
> <Image Source="{Binding ImageSource}" Width="16" Height="16" Margin="0 0 3 0" />
> <TextBlock Text="{Binding Name}" />
> </StackPanel>
> </HierarchicalDataTemplate>
> </TreeView.Resources>
> </TreeView>
> </UserControl>
The current backgroung color looks like this when selected:
选中时当前的背景颜色如下所示：
When selected, but lost focus the background color is:
选中但失去焦点时，背景颜色为：
I just want it to stay blue !!! Thank you for your help.
我只想让它保持蓝色！！！感谢您的帮助。
回答by Mike Richards
In reference to this other post, the ControlBrushKeydid not work for me. The InactiveSelectionHighlightBrushKeydid, however. Also setting the InactiveSelectionHighlightTextBrushKeygot around the changing text color.
参考这篇其他帖子，ControlBrushKey对我不起作用。InactiveSelectionHighlightBrushKey然而，确实如此。还设置InactiveSelectionHighlightTextBrushKey了不断变化的文本颜色。
My complete solution:
我的完整解决方案：
<TreeView.Resources>
<!-- Style the inactive selection the same as active -->
<SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}"
Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}" />
<SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightTextBrushKey}"
Color="{DynamicResource {x:Static SystemColors.HighlightTextColorKey}}"/>
</TreeView.Resources>
回答by Rohit Vats
In default template of TreeViewItem, there is MultiDataTrigger which set the color to ControlBrushKeywhen item is not in focus which you can override in your TreeView resources like this:
在 的默认模板中TreeViewItem，有 MultiDataTrigger 将颜色设置为ControlBrushKey当项目不在焦点时，您可以在 TreeView 资源中覆盖它，如下所示：
<TreeView.ItemContainerStyle>
<Style TargetType="{x:Type TreeViewItem}">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}"
Color="#FF3399FF"/>
</Style.Resources>
...
</Style>
<TreeView.ItemContainerStyle>
then there is no need to override ControlTemplate of TreeViewItem.
那么就不需要覆盖 TreeViewItem 的 ControlTemplate。
But, however it also set text of treeViewItem to ControlTextBrushKeywhich by default is black. So, with only ControlBrushKeyoverriden, you will get it work like this:
但是，它也将 treeViewItem 的文本设置为ControlTextBrushKey默认为黑色。所以，只有ControlBrushKey覆盖，你会得到它这样的工作：
Without Focus:
没有焦点：
With Focus
有焦点
As you can see brush is over-ridden properly but if you override ControlTextBrushKeyand set it to white than treeView Item's won't be visible since controlTextBrush will be set to white.
如您所见，画笔被正确覆盖ControlTextBrushKey，但如果您覆盖并将其设置为白色，则树视图项将不可见，因为 controlTextBrush 将设置为白色。
However, in case you want exact same look of TreeViewItem like it has with focus, you have to override control template and remove that MultiDataTrigger from the default template.
但是，如果您希望 TreeViewItem 的外观与焦点完全相同，则必须覆盖控件模板并从默认模板中删除该 MultiDataTrigger。
Default template will go like this:
默认模板将如下所示：
<TreeView>
<TreeView.ItemContainerStyle>
<Style TargetType="TreeViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TreeViewItem">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="19" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition/>
</Grid.RowDefinitions>
<ToggleButton IsChecked="False"
ClickMode="Press"
Name="Expander">
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Style.Resources>
<ResourceDictionary />
</Style.Resources>
<Setter Property="UIElement.Focusable" Value="False"/>
<Setter Property="FrameworkElement.Width" Value="16"/>
<Setter Property="FrameworkElement.Height" Value="16"/>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border Padding="5,5,5,5"
Background="#00FFFFFF"
Width="16"
Height="16">
<Path Fill="#FFFFFFFF"
Stroke="#FF818181"
Name="ExpandPath">
<Path.Data>
<PathGeometry Figures="M0,0L0,6L6,0z" />
</Path.Data>
<Path.RenderTransform>
<RotateTransform Angle="135" CenterX="3" CenterY="3" />
</Path.RenderTransform>
</Path>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsChecked" Value="True">
<Setter Property="UIElement.RenderTransform" TargetName="ExpandPath">
<Setter.Value>
<RotateTransform Angle="180" CenterX="3" CenterY="3" />
</Setter.Value>
</Setter>
<Setter Property="Shape.Fill" TargetName="ExpandPath">
<Setter.Value>
<SolidColorBrush>#FF595959</SolidColorBrush>
</Setter.Value>
</Setter>
<Setter Property="Shape.Stroke" TargetName="ExpandPath">
<Setter.Value>
<SolidColorBrush>#FF262626</SolidColorBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="UIElement.IsMouseOver" Value="True">
<Setter Property="Shape.Stroke" TargetName="ExpandPath">
<Setter.Value>
<SolidColorBrush>#FF27C7F7</SolidColorBrush>
</Setter.Value>
</Setter>
<Setter Property="Shape.Fill" TargetName="ExpandPath">
<Setter.Value>
<SolidColorBrush>#FFCCEEFB</SolidColorBrush>
</Setter.Value>
</Setter>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="UIElement.IsMouseOver" Value="True"/>
<Condition Property="ToggleButton.IsChecked" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Shape.Stroke" TargetName="ExpandPath">
<Setter.Value>
<SolidColorBrush>#FF1CC4F7</SolidColorBrush>
</Setter.Value>
</Setter>
<Setter Property="Shape.Fill" TargetName="ExpandPath">
<Setter.Value>
<SolidColorBrush>#FF82DFFB</SolidColorBrush>
</Setter.Value>
</Setter>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ToggleButton.Style>
</ToggleButton>
<Border BorderThickness="{TemplateBinding Border.BorderThickness}"
Padding="{TemplateBinding Control.Padding}"
BorderBrush="{TemplateBinding Border.BorderBrush}"
Background="{TemplateBinding Panel.Background}"
Name="Bd"
SnapsToDevicePixels="True"
Grid.Column="1">
<ContentPresenter Content="{TemplateBinding HeaderedContentControl.Header}"
ContentTemplate="{TemplateBinding HeaderedContentControl.HeaderTemplate}"
ContentStringFormat="{TemplateBinding HeaderedItemsControl.HeaderStringFormat}"
ContentSource="Header"
Name="PART_Header"
HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
</Border>
<ItemsPresenter Name="ItemsHost"
Grid.Column="1"
Grid.Row="1"
Grid.ColumnSpan="2" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="TreeViewItem.IsExpanded" Value="False">
<Setter Property="UIElement.Visibility" TargetName="ItemsHost" Value="Collapsed"/>
</Trigger>
<Trigger Property="ItemsControl.HasItems" Value="False">
<Setter Property="UIElement.Visibility" TargetName="Expander" Value="Hidden"/>
</Trigger>
<Trigger Property="TreeViewItem.IsSelected" Value="True">
<Setter Property="Panel.Background" TargetName="Bd">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.HighlightBrushKey}" />
</Setter.Value>
</Setter>
<Setter Property="TextElement.Foreground">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.HighlightTextBrushKey}" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="UIElement.IsEnabled" Value="False">
<Setter Property="TextElement.Foreground">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.GrayTextBrushKey}" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TreeView.ItemContainerStyle>
<TreeViewItem Header="Item1"/>
<TreeViewItem Header="Item2"/>
</TreeView>
