WPF TreeView：鼠标悬停时突出显示项目

WPF TreeView: highlight item on mouse over

提问by Master_T

In WPF, when you have a ListViewpassing over an item with the mouse will give a nice highlight effect, like this:

在 WPF 中，当你ListView用鼠标经过一个项目时会产生很好的高光效果，如下所示：

However, this doesn't happen with a TreeView. My question is simple: how do I enable the same effect for the items in a TreeView?

但是，这不会发生在TreeView. 我的问题很简单：如何为 a 中的项目启用相同的效果TreeView？

NOTE: I'm aware of these questions: WPF TreeView Highlight Row On HoverHighlight whole TreeViewItem line in WPF

注意：我知道这些问题： WPF TreeView Highlight Row On Hover在 WPF 中突出显示整个 TreeViewItem 行

But they are mainly concerned with extending the highlight behavior to the entire row, while I still can't figure out how to enable the highlight effect on a single TreeViewItem(that would be more than enough for me)

但是他们主要关注将高亮行为扩展到整行，而我仍然不知道如何在单个上启用高亮效果TreeViewItem（这对我来说已经足够了）

回答by King King

Normally we can add some style for the TreeViewItemwith some Trigger to toggle the Background on mouse over. However it's not such simple when TreeViewItemcontains each other (nested) and the bubbling of the event will cause some unwanted effect. I've tried digging in solving the problem with this approach but no luck (just nearly solve it but not perfectly).

通常我们可以为TreeViewItemTrigger添加一些样式以在鼠标悬停时切换背景。然而，当TreeViewItem相互包含（嵌套）并且事件的冒泡会导致一些不需要的效果时，事情就不是那么简单了。我试过用这种方法解决问题，但没有运气（几乎解决了它，但并不完美）。

So we have to use another approach, here we will change the template of the Header by setting the HeaderTemplateof TreeViewItem. In that template, we will add triggers such as for the root Border and then everything works OK:

所以我们不得不使用另一种方法，这里我们将通过设置HeaderTemplateof来更改 Header 的模板TreeViewItem。在该模板中，我们将为根边框添加触发器，然后一切正常：

<TreeView>
   <TreeView.Resources>
       <Style TargetType="TreeViewItem">
          <Setter Property="HeaderTemplate">
              <Setter.Value>
                <DataTemplate>  
                  <Border>
                     <TextBlock Text="{Binding}"/>
                     <Border.Style>
                       <Style TargetType="Border">
                         <Setter Property="BorderThickness" Value="1"/>
                         <Setter Property="BorderBrush" Value="Transparent"/>
                         <Style.Triggers>
                           <MultiDataTrigger>
                           <MultiDataTrigger.Conditions>
                             <Condition Binding="{Binding RelativeSource={RelativeSource Self},
                                                  Path=IsMouseOver}" Value="True"/>
                             <Condition Binding="{Binding RelativeSource={RelativeSource AncestorType=TreeViewItem},
                                                  Path=IsSelected}" Value="False"/>
                           </MultiDataTrigger.Conditions>
                           <Setter Property="Background" Value="#ffe5f3fb"/>
                           <Setter Property="BorderBrush" Value="#ffa5d7f0"/>
                           </MultiDataTrigger>
                         </Style.Triggers>
                       </Style>
                      </Border.Style>
                    </Border>
                  </DataTemplate>
                </Setter.Value>
             </Setter>              
       </Style>
   </TreeView.Resources>
   <TreeViewItem Header="Item 1">
      <TreeViewItem Header="Item 11"></TreeViewItem>
      <TreeViewItem Header="Item 12"/>
   </TreeViewItem>
   <TreeViewItem Header="Item 2">
   </TreeViewItem>
</TreeView>

Note that you can create whatever Brushyou like to replace the simple SolidColorBrushI used above for the Background. You should read more about Brushin WPF.

请注意，您可以创建任何Brush您喜欢的内容来替换SolidColorBrush我上面用于Background. 您应该Brush在 WPF 中阅读更多相关信息。

Update:As far as I know to synchronize with the System settings about colors and brushes, we just have the static class SystemColors. The closest color I've found for the hovering highlight is SystemColors.HotTrackColorKey. However I guess the hovering highlight used for the ListViewin Windows 7 applies some opacity for the brush and it looks lighter. So I've tried using the opacity of 0.05for the brush and it looks fairly close to the default highlight color of ListView in Windows 7. You can define the brush in the resource and use it like this:

更新：据我所知，要与有关颜色和画笔的系统设置同步，我们只有静态类SystemColors。我为悬停高光找到的最接近的颜色是SystemColors.HotTrackColorKey。但是我猜ListView在 Windows 7 中使用的悬停高光为画笔应用了一些不透明度，它看起来更轻。所以我尝试使用0.05画笔的不透明度，它看起来非常接近 Windows 7 中 ListView 的默认高亮颜色。您可以在资源中定义画笔并像这样使用它：

//inside the Style for Border
<Style.Resources>
    <SolidColorBrush x:Key="hoverBrush" Opacity=".05" 
             Color="{DynamicResource {x:Static SystemColors.HotTrackColorKey}}"/>
</Style.Resources>

Then set the brush for background via Setter:

然后通过Setter以下方式设置背景画笔：

<Setter Property="Background" Value="{DynamicResource hoverBrush}"/>