在父级<Grid />上设置不透明度会使子级独立地透明

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中一样：

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

应该看起来像

（请注意如何通过橙色三角形看不到白色图标）

是否有一种方法可以更改不透明度的合成和渲染方式以实现这一目标？很快，该应用程序的背景将变得稍微透明，因此我需要一个与此兼容的解决方案。

Answer 1

您只需执行相反的操作即可解决此问题。

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

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

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

</Grid>