如何在WPF中覆盖父控件的不透明度？

Question

如何在WPF中覆盖父控件的不透明度？

33

在WPF中，当你在一个Grid上设置不透明度时，所有子元素似乎都继承了它的Opacity属性。那么如何让一个子元素不继承父元素的不透明度呢？

比如说，下面这个父级Grid有一个中间的子Grid，背景设置为红色，但是由于父元素的不透明度，背景颜色看起来有些粉色。我希望子元素Grid有一个纯色、不透明的背景：

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

- Metro Smurf

3个回答

4

您可以在布局网格中叠加两个网格。第一个网格定义为您的网格，减去您内部的红色网格。第二个网格将使用相同的列和行，具有透明背景。此网格的唯一子级将是您的最内部网格。

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

- Wonko the Sane

@Wonko，谢谢。这个方法是对chief的答案提供的一个很好的替代方案。 - Metro Smurf

1

如果您希望父容器的所有子元素都能够独立设置其不透明度，而不受父元素的影响，您可以通过设置父面板背景的 Alpha 通道（而不是设置不透明度）来获得略微透明的背景，从而不会影响子元素。类似于这样的代码，其中背景中的 0C 是 Alpha 通道（AARRGGBB 中的 AA）：

<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和一些Alpha通道或不透明度蒙版的巧妙技巧来实现这一点。如果不行，您可以构建某种自定义控件，以获得所需的行为。我需要考虑一下，看看什么是这种情况的最佳解决方案。

- Brad Cunningham

意图是让除一个之外的所有子元素都遵循父元素的不透明度。也许可以在本地 XAML 中设置一些东西，而无需构建自定义控件？ - Metro Smurf

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- chiefanov · Accepted Answer

我能够使用Brush在纯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>