WPF - Change Outer Control Opacity Will Not Change Inner Control Opacity

Question

I have a border1 with full screen and it's Background is #011627. A Grid splits into four part, one of them have border2 and it's Background is #0b192a.

 <Border x:Name="border1" Background="#011627"/>
 <Grid>
     <Grid.RowDefinitions>
         <RowDefinition Height="*"/>
         <RowDefinition Height="*"/>
     </Grid.RowDefinitions>
     <Grid.ColumnDefinitions>
         <ColumnDefinition Width="*"/>
         <ColumnDefinition Width="*"/>
     </Grid.ColumnDefinitions>
     <TextBlock Grid.Row="1" Text="Test" Foreground="White" FontSize="30"/>
     <Border x:Name="border2" Background="#0b192a"/>
 </Grid>

Now I want to set Grid's Opacity to 0.1 and influence text's Opacity, and don't influence border2's Background.

But it doesn't meet my expectation.

 <Border x:Name="border1" Background="#011627"/>
 <Grid Opacity="0.1">
     <Grid.RowDefinitions>
         <RowDefinition Height="*"/>
         <RowDefinition Height="*"/>
     </Grid.RowDefinitions>
     <Grid.ColumnDefinitions>
         <ColumnDefinition Width="*"/>
         <ColumnDefinition Width="*"/>
     </Grid.ColumnDefinitions>
     <TextBlock Grid.Row="1" Text="Test" Foreground="White" FontSize="30"/>
     <Border x:Name="border2" Background="#0b192a"/>
 </Grid>

Could it happen? Thanks!

Answer 1

UIElement.Opacity is by definition applied to all child elements of the (sub)tree, where the root is the element that defines the value.

If you want the to set Opacity exclusively to a specific element, you have to set it locally/by Style on this very element:

<Grid>
  <TextBlock Opacity="0.1" Text="Test" />
  <Border x:Name="border2" />
</Grid>