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

transparency opacity

Question

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

Por ejemplo, la siguiente cuadrícula principal tiene una cuadrícula secundaria en el medio con un fondo configurado en rojo, pero el fondo aparece rosado debido a la opacidad de los padres. Me gustaría que la cuadrícula infantil tuviera un fondo de color sólido y no transparente:

<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 rejillas principales. De esta manera, solo la cuadrícula principal tendrá su conjunto de opacidad y sus elementos secundarios no lo 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 elementos secundarios del contenedor principal establezcan su propia opacidad independientemente de los elementos principales, puede configurar el canal alfa 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 Alpha (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 desea que todos los niños, excepto uno, se adhieran a la opacidad de los padres, es un poco más complicado. Es posible que puedas hacer eso con un ControlTemplate y algunos trucos inteligentes con los canales Alpha o una máscara de opacidad. Si no, podría crear algún tipo de control personalizado que le proporcionara 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

Solo puede superponer dos cuadrículas dentro de su cuadrícula de diseño. El primero se definirá como su cuadrícula, menos su cuadrícula más interna roja. 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 -->