重叠投影效果

Question

我知道我想做的可能很容易和显而易见，但我无法解决它。我有一个网格，有两行，顶行有一个边框元素，填充该行（固定高度为30）。第二行（固定高度为100）目前包含一个带有白色背景的空DockPanel（这将包含用于动态控件的ContentControl）。

我在第一行的边框中添加了一个下拉阴影效果，方向为270以使阴影落在边框下方。由于没有足够的空间容纳阴影，因此几乎不可见，这并不奇怪。我的想法是让阴影从行中溢出，并覆盖下面行的DockPanel。

我通过将包含网格的背景也设置为白色，然后向边框元素添加底部边距来适应阴影，从而实现了这种效果。虽然看起来还可以，但这不是我真正想要的。

抱歉没有代码示例，我必须离开工作，但这仍然困扰着我。

提前致谢。

保罗

- Paulie Waulie

Answer 1

将DockPanel放在Border之前，这样Border在z-order中更高。

这样做是可行的。

<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>

- Phil

---

+1 这个方法很有效，非常明显和简单，谢谢。虽然它基本上与ianschol的答案做的是一样的，但我觉得我稍微更喜欢他的答案，因为它意味着我的标记是按其自然顺序定义的。如果我可以接受两个答案，我会这么做的。非常感谢你的帮助。 - Paulie Waulie

Answer 2

由于网格是面板，因此它继承了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值方面更为有用。

- ianschol

---

谢谢你的简单而有效的答案！我知道它很简单，但没想到会这么简单 :0)。 - Paulie Waulie