Question

I have something like this:

<Grid Background="Black" Opacitiy="0.5">
  <Grid.RowDefinitions>...</Grid.RowDefinitions>
  <Image Source="..." Opacity="1.0" Grid.Row="0"/>
  <TextBlock Text="..." Opacitiy="1.0" Grid.Row="1"/>
</Grid>

Unfortunately the image and the text get rendered with 50% opacity as well. What I want is a semi-transparent black background with 100% solid image and text children.

What is the best way to do that?

Answer 1

Add a Rectangle as the first child of the grid, making sure that it spans all of the grid’s rows and columns, with the opacity level you want:

<Grid>
  <Grid.RowDefinitions>...</Grid.RowDefinitions>

  <Rectangle Fill="Black" Opacity="0.5" Grid.RowSpan="2" />

  <Image Source="..." Grid.Row="0"/>
  <TextBlock Text="..." Grid.Row="1"/>
</Grid>

(I’ve removed the Opacity attribute from Image and TextBlock since it’s not needed here.)