Как создать сетку с полупрозрачным фоном, но сплошными дочерними элементами?

Question

У меня есть что-то вроде этого:

<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>

К сожалению, изображение и текст также отображаются с непрозрачностью 50%.Что я хочу, так это полупрозрачный черный фон со 100% сплошным изображением и текстовыми дочерними элементами.

Какой лучший способ сделать это?

Answer 1

Добавьте Rectangle в качестве первого дочернего элемента сетки, убедившись, что он охватывает все строки и столбцы сетки с требуемым уровнем непрозрачности:

<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>

(я удалилатрибут Opacity из Image и TextBlock, поскольку здесь он не нужен.)

Answer 2

Или без необходимости в дополнительном элементе пользовательского интерфейса:

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

Помня, что "# 80000000" означает альфа (непрозрачность) = "80", красный = "00", зеленый = "00",Синий = "00" и что эти числа являются шестнадцатеричными значениями