如何在带DropShadowEffect边框的TreeViewItem中保留选中高亮

这个问题我之前定制WPF TreeView时也踩过坑——既要阴影不污染内部文本和展开按钮，又要保留选中高亮，还得兼顾圆角外观，核心是要给TreeViewItem的模板做分层结构，把阴影、高亮、内容彻底隔离开。

核心思路 #

把TreeViewItem的模板拆成三层，按ZIndex从低到高排列：

1. 阴影层：专门的Border只负责承载DropShadowEffect，用白色背景截断阴影，同时设置和控件一致的圆角
2. 高亮层：叠加在阴影层之上的Border，默认透明，选中时切换高亮背景
3. 内容层：最上层的容器，放展开按钮和Header文本，确保它们不受阴影影响，也不会被高亮层遮挡

完整XAML实现 #

<Style TargetType="TreeViewItem">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TreeViewItem">
                <Grid>
                    <!-- 1. 最底层：阴影容器 -->
                    <Border x:Name="ShadowBorder"
                            Background="White"
                            CornerRadius="4"
                            Margin="2"
                            Panel.ZIndex="1">
                        <Border.Effect>
                            <DropShadowEffect BlurRadius="8"
                                              Color="#88000000"
                                              Opacity="0.6"
                                              ShadowDepth="2"/>
                        </Border.Effect>
                    </Border>

                    <!-- 2. 中间层：选中高亮容器 -->
                    <Border x:Name="SelectionBorder"
                            Background="Transparent"
                            CornerRadius="4"
                            Margin="2"
                            Panel.ZIndex="2">
                        <Border.Style>
                            <Style TargetType="Border">
                                <Style.Triggers>
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Setter Property="Background" Value="#FFE5F1FF"/>
                                    </Trigger>
                                    <Trigger Property="IsSelected" Value="True">
                                        <Setter Property="Background" Value="#FF3399FF"/>
                                        <Setter Property="Foreground" Value="White"/>
                                    </Trigger>
                                </Style.Triggers>
                            </Style>
                        </Border.Style>
                    </Border>

                    <!-- 3. 最上层：内容容器（展开按钮+Header） -->
                    <StackPanel Orientation="Horizontal" Panel.ZIndex="3">
                        <!-- 展开/折叠按钮 -->
                        <ToggleButton x:Name="Expander"
                                      Style="{StaticResource TreeViewItemExpanderStyle}"
                                      IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"
                                      ClickMode="Press"/>

                        <!-- Header内容 -->
                        <ContentPresenter x:Name="PART_Header"
                                          ContentSource="Header"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </StackPanel>

                    <!-- 子项容器 -->
                    <ItemsPresenter x:Name="ItemsHost"
                                    Margin="20,0,0,0"
                                    Visibility="Collapsed"/>
                </Grid>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsExpanded" Value="True">
                        <Setter TargetName="ItemsHost" Property="Visibility" Value="Visible"/>
                    </Trigger>
                    <Trigger Property="HasItems" Value="False">
                        <Setter TargetName="Expander" Property="Visibility" Value="Collapsed"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

关键细节解释 #

• 阴影层的白色背景：ShadowBorder的Background="White"会让DropShadowEffect只作用在Border的边缘，不会渗透到内部的文本和按钮，完美解决阴影污染问题。
• 层级控制：通过Panel.ZIndex明确三层的顺序，确保高亮层在阴影层之上，内容层在最顶部，不会出现遮挡问题。
• 圆角兼容：ShadowBorder和SelectionBorder设置了相同的CornerRadius，和控件整体圆角匹配，不会出现白色方形背景破坏圆角的情况。
• 展开按钮隔离：展开按钮放在最上层的内容容器里，完全不受阴影层影响，符合你的需求。

为什么之前的尝试没生效？ #

• 单独设置Panel.ZIndex="5"：没有分层的话，ZIndex只是调整单个元素的层级，没法解决阴影背景和高亮的覆盖问题。
• 两个重叠边框：如果没明确分层逻辑，可能把高亮层放在了阴影层下面，或者没把内容层独立出来，导致要么高亮被遮挡，要么文本带阴影。

内容的提问来源于stack exchange，提问作者Ruben Bohnet