title: How do you override the opacity of a parent control in WPF?
body: <p>When you set the opacity on a <code>Grid</code> in WPF, all the child elements appear to inherit its <code>Opacity</code>. How can you have a child element not inherit the parent's opacity?</p>
  
  <p>For example, the following parent grid has one child grid in the middle with a background set to red, but the background appears pinkish because of the parent's opacity. I'd like the child grid to have a solid color, non-transparent background:</p>
  
  <pre><code>&lt;Grid x:Name="LayoutRoot"&gt;
  
    &lt;Grid Background="Black" Opacity="0.5"&gt;
      &lt;Grid.RowDefinitions&gt;
        &lt;RowDefinition Height="0.333*"/&gt;
        &lt;RowDefinition Height="0.333*"/&gt;
        &lt;RowDefinition Height="0.333*"/&gt;
      &lt;/Grid.RowDefinitions&gt;
      &lt;Grid.ColumnDefinitions&gt;
        &lt;ColumnDefinition Width="0.333*"/&gt;
        &lt;ColumnDefinition Width="0.333*"/&gt;
        &lt;ColumnDefinition Width="0.333*"/&gt;
      &lt;/Grid.ColumnDefinitions&gt;
  
      &lt;-- how do you make this child grid's background solid red
          and not inherit the Opacity/Transparency of the parent grid? --&gt;
      &lt;Grid Grid.Column="1" Grid.Row="1" Background="Red"/&gt;
    &lt;/Grid&gt;
  
  &lt;/Grid&gt;
  </code></pre>