选择但失去焦点时更改 WPF treeViewItem 背景颜色答案

【问题标题】：Change WPF treeViewItem Background color when selected but lost focus选择但失去焦点时更改 WPF treeViewItem 背景颜色
【发布时间】：2014-03-03 14:20:41
【问题描述】：

当 TreeViewItem 被选中但失去焦点时，我正在尝试更改它的背景颜色。我看到了一些类似的问题，例如： WPF TreeViewItem Background ，但我无法使用它...

这是我的树视图 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>

选中时当前背景颜色为蓝色。

但是当仍然被选中，但失去焦点时，背景颜色是灰色的。

我只想让它保持蓝色！感谢您的帮助。

【问题讨论】：

标签： wpf xaml treeview

【解决方案1】：

关于另一个post，ControlBrushKey 对我不起作用。但是，InactiveSelectionHighlightBrushKey 做到了。还设置InactiveSelectionHighlightTextBrushKey 绕过了不断变化的文本颜色。

我的完整解决方案：

<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>

【讨论】：

【解决方案2】：

在 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>

那么就不需要重写TreeViewItem的ControlTemplate了。

但是，它也将 treeViewItem 的文本设置为 ControlTextBrushKey，默认情况下为黑色。所以，只有ControlBrushKey 被覆盖，你会得到它这样的工作：

没有焦点：

专注

如您所见，画笔已被正确覆盖，但如果您覆盖 ControlTextBrushKey 并将其设置为白色，则 treeView 项目将不可见，因为 controlTextBrush 将设置为白色。

但是，如果您希望 TreeViewItem 具有与焦点完全相同的外观，则必须覆盖控件模板并从默认模板中删除该 MultiDataTrigger。

默认模板如下所示：

    <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>

【讨论】：

成功了！！！！！！非常感谢！！！我没有足够的声望给你投票。对不起……
没问题 S.K.很高兴帮助..!!
P.S，我通过在选择时将前景色涂成黑色来解决前景色问题。
这对我有用（就颜色而言），除了切换按钮不再打开该项目。 :-(
所以我将 ToggleButton 上的 IsChecked 更改为 IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" 现在它可以工作了。