¿Cómo se anula la opacidad de un control principal en WPF?

Question

Cuando configura la opacidad en Grid en WPF, todos los elementos secundarios parecen heredar su Opacity. ¿Cómo puede tener un elemento secundario que no herede la opacidad de los padres?

Por ejemplo, la siguiente cuadrícula principal tiene una cuadrícula secundaria en el centro con un fondo configurado en rojo, pero el fondo aparece en color rosado debido a la opacidad de los padres. Me gustaría que la rejilla niño a tener un color sólido, no transparente de fondo:

<Grid x:Name="LayoutRoot"> 

    <Grid Background="Black" Opacity="0.5"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="0.333*"/> 
     <RowDefinition Height="0.333*"/> 
     <RowDefinition Height="0.333*"/> 
    </Grid.RowDefinitions> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="0.333*"/> 
     <ColumnDefinition Width="0.333*"/> 
     <ColumnDefinition Width="0.333*"/> 
    </Grid.ColumnDefinitions> 

    <-- how do you make this child grid's background solid red 
     and not inherit the Opacity/Transparency of the parent grid? --> 
    <Grid Grid.Column="1" Grid.Row="1" Background="Red"/> 
    </Grid> 

</Grid> 

Answer 1

Pude lograr algo como esto en xaml puro usando un Pincel para pintar el fondo de las cuadrículas principales. De esta manera, solo la cuadrícula principal tendrá su opacidad establecida y sus elementos secundarios no la heredarán.

<Grid x:Name="LayoutRoot">  
     <Grid> 
     <Grid.Background> 
      <SolidColorBrush Color="Black" Opacity="0.5"/> 
     </Grid.Background> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="0.333*"/> 
      <RowDefinition Height="0.333*"/> 
      <RowDefinition Height="0.333*"/> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="0.333*"/> 
      <ColumnDefinition Width="0.333*"/> 
      <ColumnDefinition Width="0.333*"/> 
     </Grid.ColumnDefinitions> 

     <Grid Grid.Column="1" Grid.Row="1" Background="Red" /> 
     </Grid> 
</Grid> 

Answer 2

Si desea que todos los niños del contenedor primario para establecer su propia opacidad independientemente de los padres que se acaba de establecer el alfa canal del fondo del panel principal (en lugar de establecer la opacidad) para obtener un fondo ligeramente transparente sin afectar los elementos secundarios. Algo como esto, donde el 0C en el fondo es el canal alfa (el AA en aarrggbb):

<Grid Grid.Column="0" 
     Grid.Row="1" 
     Background="Red" 
     Opacity="1" /> 

<Grid Grid.Column="1" 
     Grid.Row="1" 
     Background="Green" /> 

<Grid Grid.Column="2" 
     Grid.Row="1" 
     Background="Blue" /> 

Sin embargo, si quiere que todos los niños, excepto uno, se adhieran a la opacidad de los padres que es un poco más comp licated. Es posible que pueda hacer eso con un ControlTemplate y algunos trucos ingeniosos con los canales Alpha o una máscara de opacidad. Si no, podría construir algún tipo de control personalizado que le diera el comportamiento que deseaba. Tendría que pensarlo un poco para ver cuál podría ser la mejor solución para ese tipo de escenario.

Answer 3

Puede superponer dos cuadrículas dentro de su cuadrícula de diseño. El primero se definiría como su cuadrícula, menos su cuadrícula roja más interna. El segundo se definiría con las mismas columnas y filas, con un fondo transparente. El único hijo de esta cuadrícula sería tu cuadrícula más interna.

<Grid x:Name="LayoutRootNew" 
      HorizontalAlignment="Stretch" 
      VerticalAlignment="Stretch"> 

     <Grid Background="Black" Opacity="0.5"> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="0.333*"/> 
       <RowDefinition Height="0.333*"/> 
       <RowDefinition Height="0.333*"/> 
      </Grid.RowDefinitions> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="0.333*"/> 
       <ColumnDefinition Width="0.333*"/> 
       <ColumnDefinition Width="0.333*"/> 
      </Grid.ColumnDefinitions> 

      <TextBlock Grid.Column="0" Grid.Row="0"> 
       Here is some content in a somewhat transparent cell 
      </TextBlock> 

     </Grid> <!-- End of First Grid --> 

     <!-- Second grid --> 
     <Grid Background="Transparent"> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="0.333*"/> 
       <RowDefinition Height="0.333*"/> 
       <RowDefinition Height="0.333*"/> 
      </Grid.RowDefinitions> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="0.333*"/> 
       <ColumnDefinition Width="0.333*"/> 
       <ColumnDefinition Width="0.333*"/> 
      </Grid.ColumnDefinitions> 

      <Grid Grid.Column="1" Grid.Row="1" Background="Red"> 
       <TextBlock Foreground="White" Text="Here Is Your Red Child" /> 
      </Grid> <!-- Inner Child Grid --> 
     </Grid> <!-- End of Second Grid --> 
    </Grid>  <!-- Layout Grid -->