在父 <Grid /> 上设置 Opacity 使子级独立透明

Question

我有一个项目列表，当一个项目变得“完整”时，它的不透明度设置为 0.4 以使其消失。此外，当一个项目完成时，该图标会得到一个橙黄色的完成覆盖。

.

这个标记类似于

<Grid Opacity="{x:Bind IsCompleted, Converter={StaticResource BooleanNumberConverter}, ConverterParameter=0.4|1}">
    [...]

    <Canvas>
        <Image />

        <Rectangle
            Visibility="{x:Bind IsCompleted, Converter={StaticResource BooleanVisibilityConverter}}"
            Canvas.Top="0" Canvas.Left="0"
            Width="48"
            StrokeThickness="2"
            Opacity="1"
            Height="48" Stroke="#ffC19954" />

        <Polygon
            Visibility="{x:Bind IsCompleted, Converter={StaticResource BooleanVisibilityConverter}}"
            Opacity="1"
            Canvas.Top="23" Canvas.Left="23" Points="0,25 25,25, 25,0" Fill="#ffC19954" />
    </Canvas>

    [...]
</Grid>

我遇到的问题是，不透明度似乎是单独应用于每个后代的，因此橙色完成三角形在图标顶部显示为半透明，您可以在下方看到图标。您还可以在三角形与边框重叠的位置看到这一点。

相反，理想的行为是三角形应该是完全不透明的，而网格作为一个整体应该是半透明的，就像它在 CSS 中的行为一样：

不透明度适用于整个元素，包括其内容，即使该值不被子元素继承。因此，元素及其子元素相对于元素的背景都具有相同的不透明度，即使它们彼此之间具有不同的不透明度。

应该是这样的

（注意白色图标如何通过橙色三角形不可见）

有没有办法改变不透明度的合成和渲染方式来实现这一点？很快应用的背景就会变得稍微透明，所以我需要一个同样适用的解决方案。

Answer 1

你可以通过简单地逆向来解决这个问题。

在项目上方放置一个遮罩网格，为网格设置纯色，将其设置为0不透明度，当您希望后面的内容淡出时，只需增加其不透明度即可。

<Grid Name="BaseGrid">
<Canvas>
        <Image />
    [...]
</Canvas>

<Grid Name="MaskGrid" Background="Gainsboro" Opacity="0.2"/>

</Grid>