重叠阴影效果

Question

我知道我想做的事情可能很简单明了但我无法解决.我有一个有两行的网格,顶行有一个填充行的边框元素(固定高度为30).第二行(Fixed Height为100)当前包含一个带有白色背景的空DockPanel(这将包含用于动态控件的ContentControl).

我在第一行的边框添加了阴影效果,方向为270以将阴影放在边框下方.由于没有足够的空间容纳阴影,所以几乎看不到它并不令人惊讶.我想要的是阴影从行溢出并重叠在下面的行中的DockPanel.

我通过使包含网格具有白色背景来实现这一点,然后向边框元素添加底部边距以容纳阴影.虽然看起来不错,但这并不是我想要实现的目标.

没有代码示例的道歉,我不得不离开工作,但这仍然困扰着我.

提前致谢.

保罗

Answer 1

将DockPanel放在Border之前,以便在z顺序中Border更高

这有效

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <DockPanel Grid.Row="1" Background="White" />
    <Border Background="PaleGreen" BorderBrush="DarkGreen" BorderThickness="5">
        <Border.Effect>
            <DropShadowEffect/>
        </Border.Effect>
    </Border>
</Grid>

但这里的停靠面板重叠并遮挡阴影

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Border Background="PaleGreen" BorderBrush="DarkGreen" BorderThickness="5">
        <Border.Effect>
            <DropShadowEffect/>
        </Border.Effect>
    </Border>
    <DockPanel Grid.Row="1" Background="White" />
</Grid>

Answer 2

由于 Grid 是一个面板，它继承了 Panel.ZIndex 附加属性。可以使用此属性逐字设置 Z-index，而不是像 Phil 在他的示例中那样从 XAML 顺序推断它。

可以使用一对附加属性修复非工作示例：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Border Background="PaleGreen" BorderBrush="DarkGreen" BorderThickness="5"  Panel.ZIndex="2">
        <Border.Effect>
            <DropShadowEffect/>
        </Border.Effect>
    </Border>
    <DockPanel Grid.Row="1" Background="White" Panel.ZIndex="1"/>
</Grid>

两种方法都做同样的事情，但 Panel.ZIndex 可以帮助格式化问题，或以编程方式更改 Z-index。