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

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

28 голосов
/ 16 апреля 2010

Когда вы устанавливаете прозрачность на 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>

Ответы [ 3 ]

44 голосов
/ 16 апреля 2010

Мне удалось добиться чего-то подобного в чистом 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>
3 голосов
/ 16 апреля 2010

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

    <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 -->
1 голос
/ 16 апреля 2010

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

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

...