如何在TreeViewItem鼠标悬停时显示子元素Rectangle Hb

需求说明 #

已实现TreeViewItem鼠标悬停时背景变为绿色，现在需要补充：当TreeViewItem被鼠标悬停时，将其ItemTemplate中名为Hb的Rectangle的Visibility属性设为Visible。

解决方案 #

TreeViewItem的Style触发器无法直接访问其ItemTemplate内部的元素，因此需要将触发器定义在HierarchicalDataTemplate内部，通过RelativeSource绑定父级TreeViewItem的IsMouseOver属性来实现目标效果。

修改后的完整XAML代码 #

<Window.Resources>
    <VisualBrush x:Key="HighlightBrush">LightBlue</VisualBrush>
    <Style x:Key="RectangleStyle" TargetType="Rectangle">
        <Setter Property="Fill" Value="{StaticResource HighlightBrush}"/>
    </Style>
</Window.Resources>
<TreeView Grid.Column ="0" Name="MyTreeView">
    <TreeView.ItemContainerStyle>
        <Style TargetType="{x:Type TreeViewItem}">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Green" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </TreeView.ItemContainerStyle>
    <d:TreeView.ItemsSource >
        <x:Array Type="system:String">
            <system:String>First element</system:String>
            <system:String>Second element</system:String>
        </x:Array>
    </d:TreeView.ItemsSource>
    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate DataType="{x:Type system:String}" >
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding .}" d:Text="{Binding .}" />
                <Rectangle x:Name="Hb" Width="100000" Margin="-10000,0,0,0" Panel.ZIndex="-1" Visibility="Hidden" Style="{DynamicResource  RectangleStyle}" />
            </StackPanel>
            <!-- 模板内触发器，绑定父级TreeViewItem的鼠标悬停状态 -->
            <HierarchicalDataTemplate.Triggers>
                <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=TreeViewItem}, Path=IsMouseOver}" Value="True">
                    <Setter TargetName="Hb" Property="Visibility" Value="Visible" />
                </DataTrigger>
            </HierarchicalDataTemplate.Triggers>
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

关键修改点 #

• 在HierarchicalDataTemplate中新增HierarchicalDataTemplate.Triggers节点
• 通过DataTrigger绑定父级TreeViewItem的IsMouseOver属性
• 用TargetName="Hb"指定目标Rectangle，将其Visibility设为Visible

内容的提问来源于stack exchange，提问作者Jack Miller