Setting opacity to the grid changes the opacity of the children controls with each other in windows 8

Question

I have the Grid and I want to set the Opacity 50%. When I set the Opacity of the parent element, some children controls are seen under others. This occurs only in Metro application.

Please tell me how can I apply the Opacity similar to how it works in WPF. I give a simplified example. In my case, the XAML is much complicated, so the color #80000000 for Grid is not a solution.

I use a multilayer user control. When I set Opacity to it, I see each layer, but layers inside the user control should not be transparent to each other.

<Grid Background="Black"
      Opacity="0.5">
    <Border Background="Red"
            Opacity="1">
        <TextBlock Text="Under"
                   FontSize="100" />
    </Border>
    <Border Background="Yellow"
            Opacity="1">
        <TextBlock Text="Over"
                   FontSize="100" />
    </Border>
</Grid>

How it works in Metro: https://i.sstatic.net/EM9oJ.png

How it works in WPF (desired): https://i.sstatic.net/tRGxi.png

For example, when I set Opacity="0.5" for my book, the pages become also semitransparent: http: //i.sstatic.net/SvG0d.png

I think this is the bug in Metro.

Answer 1

Set CacheMode="BitmapCache" on your Grid. This behavior is no longer the default.

The likely reason is that the old behavior needed to render the semi-transparent element to a separate surface requiring more memory and two render passes, while the new default doesn't and should thus be faster, less hardware constrained and still work for many if not most cases.