如何在TreeView的HierarchicalDataTemplate中通过IsSelected触发Border背景变红
实现TreeViewItem选中时更改内部Border背景色
要实现选中TreeViewItem时将其内部Border的背景改为红色,你需要在Border的Style中添加DataTrigger,通过RelativeSource绑定到父级TreeViewItem的IsSelected属性,具体修改如下:
核心逻辑:由于Border嵌套在HierarchicalDataTemplate内部,无法直接访问TreeViewItem的属性,所以通过RelativeSource AncestorType=TreeViewItem向上查找父级TreeViewItem,监听它的IsSelected状态变化,触发背景色修改。
修改后的完整XAML代码:
<TreeView Margin="0,0,0,49.8" x:Name="lstOwnActions" ItemsSource="{Binding ActivityList}" TreeViewItem.Expanded="lstOwnActions_Expanded" HorizontalAlignment="Stretch" > <TreeView.Resources> <HierarchicalDataTemplate DataType="{x:Type local:ActivityList}" ItemsSource="{Binding SubCategory}"> <Border CornerRadius="10" Width="Auto" HorizontalAlignment="Stretch" ToolTip="{Binding Name}" PreviewMouseDown="TextBlock_PreviewMouseDown" > <Border.Style> <Style TargetType="Border"> <!-- 默认背景色 --> <Setter Property="Background" Value="Black"/> <!-- 选中状态触发器 --> <Style.Triggers> <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=TreeViewItem}}" Value="True"> <Setter Property="Background" Value="Red"/> </DataTrigger> </Style.Triggers> </Style> </Border.Style> <Label Content="{Binding Name}" Foreground="White" Width="Auto" VerticalAlignment="Center" HorizontalAlignment="Stretch" /> </Border> </HierarchicalDataTemplate> <HierarchicalDataTemplate DataType="{x:Type local:SubCategory}"> <Border CornerRadius="10" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Top" ToolTip="{Binding SubCategoryName}" PreviewMouseDown="TextBlock_PreviewMouseDown"> <Border.Style> <Style TargetType="Border"> <Setter Property="Background" Value="Black"/> <Style.Triggers> <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=TreeViewItem}}" Value="True"> <Setter Property="Background" Value="Red"/> </DataTrigger> </Style.Triggers> </Style> </Border.Style> <Label Foreground="White" Content="{Binding SubCategoryName}" Width="Auto" VerticalAlignment="Top" /> </Border> </HierarchicalDataTemplate> </TreeView.Resources> </TreeView>
关键说明:
- 移除了Border原本直接设置的
Background="Black",将其移到Style的Setter中,确保触发器能覆盖默认值 - 通过DataTrigger绑定父级TreeViewItem的IsSelected属性,当值为True时,将Border的Background改为红色
内容的提问来源于stack exchange,提问作者Mihir Choudhary
相关产品推荐
相关产品推荐

