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

时间:2014-09-19 09:47:40

标签: wpf treeview

在WPF中,当您使用鼠标移动某个项目ListView时会产生一个很好的高亮效果,如下所示:

enter image description here

但是,TreeView不会发生这种情况。我的问题很简单:如何为TreeView中的项目启用相同的效果?

注意:我知道这些问题: WPF TreeView Highlight Row On Hover Highlight whole TreeViewItem line in WPF

但是他们主要关注的是将突出显示行为扩展到整行,而我仍然无法弄清楚如何在单个TreeViewItem上启用突出显示效果(这对我来说已经足够了)

1 个答案:

答案 0 :(得分:3)

通常我们可以为TreeViewItem添加一些样式,并使用一些触发器在鼠标悬停时切换背景。然而,当TreeViewItem包含彼此(嵌套)并且事件的冒泡会导致一些不良影响时,它并不是那么简单。我试过用这种方法来解决这个问题,但没有运气(只是差不多解决它但不完美)。

所以我们必须使用另一种方法,在这里我们将通过设置HeaderTemplate的{​​{1}}来更改标题的模板。在该模板中,我们将添加触发器,例如根边界,然后一切正常:

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> 替换上面用于Brush的简单SolidColorBrush。您应该在WPF中阅读有关Background的更多信息。

更新:据我所知,要与颜色和画笔的系统设置同步,我们只有静态类Brush。我在悬停突出显示中找到的最接近的颜色是SystemColors。但是我想在Windows 7中用于SystemColors.HotTrackColorKey的悬停突出显示为画笔应用了一些不透明度,它看起来更亮。所以我尝试将ListView的不透明度用于画笔,它看起来非常接近Windows 7中ListView的默认高亮颜色。您可以在资源中定义画笔并使用它,如下所示:

0.05

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

设置背景画笔
Setter