如何设置 Canvas.ZIndex 在控件之间绘制黑色面板？

Question

通过以下代码，我可以演示一个不透明度为 50% 的黑色面板如何位于每个矩形的顶部：

 <Grid>
    <Rectangle Fill="Black" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="0.5" Canvas.ZIndex="1"/>
    <Rectangle Fill="Red" Width="200" Height="200" Canvas.ZIndex="0"/>
    <Grid>
        <Rectangle Fill="Blue" Width="100" Height="100" Canvas.ZIndex="0"/>
        <Rectangle Fill="Yellow" Width="50" Height="50" Canvas.ZIndex="1"/>
    </Grid>
</Grid>

看起来像这样：

我希望黑色面板上方的黄色矩形，但这似乎是不可能的。

我可以通过将包含蓝色和黄色矩形的网格的 ZIndex 设置为“1”来实现接近的效果。但这也会将蓝色矩形提升到黑色之上，这是一个问题。

<Grid>
    <Rectangle Fill="Black" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="0.5" Canvas.ZIndex="1"/>
    <Rectangle Fill="Red" Width="200" Height="200" Canvas.ZIndex="0"/>
    <Grid Canvas.ZIndex="1">
        <Rectangle Fill="Blue" Width="100" Height="100" Canvas.ZIndex="0"/>
        <Rectangle Fill="Yellow" Width="50" Height="50" Canvas.ZIndex="1"/>
    </Grid>
</Grid>

如何只获得黑色上方的黄色矩形？ 在我的真实应用程序中，我有用户控件而不是矩形。我喜欢通过将其他所有内容都覆盖在半黑色阴影中来突出特定控件。

非常感谢，

Answer 1

我认为您将无法使用您当前的控件安排来实现这一点。

这里有两个级别的控件，内部网格内的“蓝色”和“黄色”控件，然后是内部网格内的“黑色”和“红色”控件。

ZIndex 在同一“级别”的控件上工作 - 因此您可以确保黄色控件位于蓝色之上，但在更高级别，这些控件被分组在内部网格下，因此被视为单个单元。

唯一可行的方法是所有控件都处于同一级别。如果您在内部网格中包含第二个半不透明矩形，则可以将黄色放在 那个 的顶部，但这可能最终会使其他控件变得太暗。

Answer 2

一种方法可能是不只使用一个简单的黑色矩形。

改为使用由两个矩形组成的路径。第一个矩形将覆盖整个区域，第二个矩形将覆盖可用的控件。

这将创建一个带有孔的大矩形，您的目标控件可以在其中显示并接受输入。

不利的一面是计算矩形几何形状以添加以创建孔，但这相当简单。