代码之家 › 专栏 › 技术社区 › Metro Smurf

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

opacity transparency wpf

27

Metro Smurf · 技术社区 · 16 年前

当您将不透明度设置为 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 回复 | 直到 16 年前

1

41

chiefanov 16 年前

我可以在纯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>

2

3

Wonko the Sane 16 年前

您可以在布局网格中覆盖两个网格。第一个将被定义为网格,减去红色的最里面的网格。第二个将被定义为具有相同的列和行,具有透明的背景。这个网格的唯一子级是您的最里面的网格。

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

3

1

Brad Cunningham 16 年前

如果您希望父容器的所有子容器都设置自己的不透明度,而不管父容器是什么,您只需设置父面板背景的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" />

但是,如果你想要所有的孩子,除了一个坚持家长的不透明性,那就要复杂一点。你可以用一个控制模板和一些巧妙的技巧来处理alpha通道或者不透明度蒙版。如果不是这样,您可以构建某种自定义控件,为您提供所需的行为。我需要考虑一下,看看对于这种类型的场景,什么是最好的解决方案。