重叠投影效果(Overlap Drop Shadow Effect)

重叠投影效果(Overlap Drop Shadow Effect)

我知道我想要做的事很可能是简单而明显的，但我无法解决这个问题。 我有一个两行的网格，最上面一行有一个填充行的边框元素（固定高度为30）。 第二行（固定高度为100）当前包含一个空白的DockPanel，其背景为白色（这将包含动态控件的ContentControl）。

我在第一行的边框中添加了阴影效果，方向为270，将阴影放在边界下方。 由于没有足够的空间来容纳阴影，所以这并不令人惊讶。 我想要的是阴影从行中溢出并覆盖下面一行中的DockPanel。

我通过让含有白色背景的网格来实现这一点，然后向边框元素添加底部边距以适应阴影。 虽然这看起来不错，但它并不是我想要实现的。

对于没有代码示例的道歉，我不得不离开工作，但这仍然困扰着我。

提前致谢。

保罗

I know what I want to do is probably easy and obvious but I cannot work it out. I have a grid with two rows, the top row has a border element which fills the row (Fixed height of 30). The second row (Fixed Height of 100) currently contains an empty DockPanel with a white background (this will contain ContentControl for dynamic controls).

I added a drop shadow effect to the border in the first row, with a direction of 270 to drop the shadow below the border. It is barely visible which is not a surprise as there is not enough space to accommodate the shadow. What I want is for the shadow to overflow from the row and overlap the DockPanel in the row below.

I sort of achieved this by having the containing grid with a white background as well and then add a bottom margin to the border element to accommodate the shadow. Whilst this looks OK, it is not really what I'm trying to achieve.

Apologies for no code example, I had to leave work but this is still bothering me.

Thanks in advance.

Paul

最满意答案

由于Grid是一个Panel，它继承了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。

Since Grid is a Panel, it inherits the Panel.ZIndex attached property. It's possible to use this property to set the Z-index literally, rather than inferring it from the XAML order as Phil does in his example.

The non-working example can be fixed up with a pair of attached properties:

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

Either approach does the same thing, but Panel.ZIndex can be helpful for formatting concerns, or altering the Z-index programmatically.