title: WPF - Change Outer Control Opacity Will Not Change Inner Control Opacity
body: <p>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.</p>
  
  <pre><code> &lt;Border x:Name="border1" Background="#011627"/&gt;
   &lt;Grid&gt;
       &lt;Grid.RowDefinitions&gt;
           &lt;RowDefinition Height="*"/&gt;
           &lt;RowDefinition Height="*"/&gt;
       &lt;/Grid.RowDefinitions&gt;
       &lt;Grid.ColumnDefinitions&gt;
           &lt;ColumnDefinition Width="*"/&gt;
           &lt;ColumnDefinition Width="*"/&gt;
       &lt;/Grid.ColumnDefinitions&gt;
       &lt;TextBlock Grid.Row="1" Text="Test" Foreground="White" FontSize="30"/&gt;
       &lt;Border x:Name="border2" Background="#0b192a"/&gt;
   &lt;/Grid&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/ep6DF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ep6DF.png" alt="enter image description here"></a></p>
  
  <p>Now I want to set Grid's Opacity to 0.1 and influence text's Opacity, and don't influence border2's Background.</p>
  
  <p>But it doesn't meet my expectation.</p>
  
  <pre><code> &lt;Border x:Name="border1" Background="#011627"/&gt;
   &lt;Grid Opacity="0.1"&gt;
       &lt;Grid.RowDefinitions&gt;
           &lt;RowDefinition Height="*"/&gt;
           &lt;RowDefinition Height="*"/&gt;
       &lt;/Grid.RowDefinitions&gt;
       &lt;Grid.ColumnDefinitions&gt;
           &lt;ColumnDefinition Width="*"/&gt;
           &lt;ColumnDefinition Width="*"/&gt;
       &lt;/Grid.ColumnDefinitions&gt;
       &lt;TextBlock Grid.Row="1" Text="Test" Foreground="White" FontSize="30"/&gt;
       &lt;Border x:Name="border2" Background="#0b192a"/&gt;
   &lt;/Grid&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/wvdwC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wvdwC.png" alt="enter image description here"></a></p>
  
  <p>Could it happen? Thanks!</p>