Как вы переопределяете непрозрачность родительского элемента управления в WPF?

Question

Когда вы устанавливаете непрозрачность на Grid в WPF, все дочерние элементы, похоже, наследуют свой Opacity. Как у вас есть дочерний элемент, который не наследует непрозрачность родителя?

Например, следующая родительская сетка имеет одну дочернюю сетку посередине с фоном, установленным на красный, но фон выглядит розоватым из-за непрозрачности родителя. Я хотел бы ребенка сетки, чтобы иметь сплошной цвет, прозрачный фон:

<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

Я смог добиться чего-то подобного в чистом xaml, используя кисть, чтобы нарисовать основной фон сетки. Таким образом, только родительская сетка будет иметь свой набор непрозрачности, и ее дочерние элементы не наследуют ее.

<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

Если вы хотите, чтобы все дети родительского контейнера, чтобы установить свою собственную непрозрачность, независимо от родителей, вы можете просто установить альфа канал фона исходной панели (вместо установки непрозрачности), чтобы получить слегка прозрачный фон, не затрагивая дочерние элементы. Что-то вроде этого, где 0C в фоновом режиме является альфа-канал (АА в 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" /> 

Однако, если вы хочу, чтобы все дети, кроме одного, придерживались непрозрачности родителя, что немного больше licated. Возможно, вы сможете сделать это с помощью ControlTemplate и некоторых умных трюков с альфа-каналами или маской непрозрачности. Если нет, вы можете создать какой-то пользовательский элемент управления, который дал бы вам поведение, которое вы хотели. Мне нужно подумать об этом немного, чтобы понять, что может быть лучшим решением для этого типа сценария.

Answer 3

Вы можете просто наложить две сетки внутри вашей сетки макета. Первая будет определяться как ваша сетка, минус красная внутренняя сетка. Второй будет определяться теми же столбцами и строками с прозрачным фоном. Единственным дочерним элементом этой сетки будет ваша самая внутренняя сетка.

<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 -->