XAML中Border的DropShadowEffect异常：修改主视图背景后阴影消失

我给顶部栏Border添加了DropShadowEffect，但设置主视图Border的背景色后，阴影就消失了。

预期效果：

实际效果：

相关XAML代码：

<Grid>
    <Grid.RowDefinitions>
        <!--TopBar-->
        <RowDefinition Height="106"
                       x:Name="Top_Bar"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    
    <!--Top Bar stuff-->
    <Border Grid.Row="0"
            BorderBrush="White"
            BorderThickness="1">
        <Border.Effect>
            <DropShadowEffect BlurRadius="10"
                              ShadowDepth="4"/>
        </Border.Effect>
    </Border>
    

    <!--Side Bar and MainView-->
    <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="128"
                              x:Name="SideBar"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>


        <!--Side Bar stuff-->
        <Border Grid.Column="0">
        </Border>
        
        <!--Main View stuff-->
        <Border Grid.Column="1"
                Background="#F2F2F2">
            
        </Border>
    </Grid>
</Grid>

问题原因 #

WPF容器内元素的视觉层级默认由声明顺序决定：后声明的元素ZIndex更高（默认值均为0时）。这里顶部栏Border先声明，下方包含主视图的Grid后声明，导致下方Grid覆盖在顶部栏Border之上。当主视图Border设置不透明背景后，完全挡住了顶部栏向下延伸的阴影。

解决方案 #

给顶部栏的Border设置更高的Panel.ZIndex，让它的视觉层级高于下方Grid，阴影就能正常显示在主视图背景之上。

修改后的代码：

<Grid>
    <Grid.RowDefinitions>
        <!--TopBar-->
        <RowDefinition Height="106"
                       x:Name="Top_Bar"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    
    <!--Top Bar stuff-->
    <Border Grid.Row="0"
            BorderBrush="White"
            BorderThickness="1"
            Panel.ZIndex="1"> <!-- 添加ZIndex设置 -->
        <Border.Effect>
            <DropShadowEffect BlurRadius="10"
                              ShadowDepth="4"/>
        </Border.Effect>
    </Border>
    

    <!--Side Bar and MainView-->
    <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="128"
                              x:Name="SideBar"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>


        <!--Side Bar stuff-->
        <Border Grid.Column="0">
        </Border>
        
        <!--Main View stuff-->
        <Border Grid.Column="1"
                Background="#F2F2F2">
            
        </Border>
    </Grid>
</Grid>

也可以通过调整元素声明顺序（将顶部栏Border移到下方Grid之后）实现相同效果，但设置ZIndex的方式更直观，且不会打乱原有布局结构。

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