XAML 边框 dropdownshadow 未按预期工作

Question

我试图为我的顶部栏创建下拉阴影效果，但它没有按我想要的方式工作。 问题是当我将主视图背景更改为不同颜色时，下拉阴影效果被删除。

我想要的样子：

怎么样：

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>

Answer 1

您的代码目前存在两个问题：

1 -

Border

元素需要背景

透明元素不会抛出背景，因此需要在边框上添加背景。这将创建一些投射阴影的东西。

2 - 增加

Panel.ZIndex

代码文件顶部的项目首先渲染，而下部的项目则“在顶部”渲染。要解决此问题，您可以设置

Panel.ZIndex="1"

来强制该元素加载到所有其他元素的“顶部”，因为默认值为 0。

解决方案

按如下方式更改您的

<!--Top Bar stuff-->

<!--Top Bar stuff-->
<Border Grid.Row="0" BorderBrush="White" BorderThickness="1" Background="White" Panel.ZIndex="1">
    <Border.Effect>
        <DropShadowEffect BlurRadius="10" ShadowDepth="4" />
    </Border.Effect>
</Border>

结果：