Setting Opacity on parent <Grid /> makes children indepedently transparent - windows

Question

I have a list of items, and when an item becomes "complete", it's opacity is set to 0.4 to fade it away. Also when an item is completed, the icon gets an orange-yellow completion overlay.
.
The markup for this is something similar to
<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>
The problem I'm having is that it appears the opacity is applied individually to each descendant, so the orange completion triangle appears semi-tranparent on top of the icon, and you can see the icon underneath. You can also see this where the triangle overlaps the border.
Instead, the desired behaviour is that the triangle should be completely opaque and the grid as a whole should be semi-transparent, as it behaves in CSS:
opacity applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, the element and its children all have the same opacity relative to the element's background, even if they have different opacities relative to one another.
It should look like
(note how the white icon is not visible through the orange triangle)
Is there a way to change how opacity is composited and rendered to achieve this? Very soon the app's background will be slightly transparent, so I need a solution that will work with that as well.

Answer 1

You can get around this by simply doing the inverse.
Put a mask grid, above the item, set a solid color to the grid, set it to 0 opacity, and simply increase its opacity when you want the content behind to fade.
<Grid Name="BaseGrid">
<Canvas>
<Image />
[...]
</Canvas>
<Grid Name="MaskGrid" Background="Gainsboro" Opacity="0.2"/>
</Grid>