在父节点上设置不透明度<网格>使子节点独立透明。

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>