半透明背景和不透明前景wpf

Question

我目前有以下 xaml 代码：

<Grid
    Name="rootGrid"
    Opacity=".25"
    Background="Black"
    HorizontalAlignment="Stretch"
    VerticalAlignment="Stretch">
    <Border
        Background="Black"
        Margin="120">
        <Grid
            Background="White"
            Margin="8">
            <TextBlock
                Name="popupContent">
                Test
            </TextBlock>
            <Button
                Click="Button_Click">
                Test
            </Button>
        </Grid>
    </Border>
</Grid>

目前，Grid 上的 Opacity 设置也应用于其子项。

我只想将此不透明度应用于其背景颜色，以实现变暗效果，而不是前景。我该怎么做？

Answer 1

不透明度将始终应用于儿童，因此我倾向于在同一级别使用 Canvas 来实现此效果：

<Grid>
    <Canvas Opacity=".25"
        Background="Black"/>
    <Grid Name="rootGrid"
        HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch">
        <Border
            Background="Black"
            Margin="120">
            <Grid
                Background="White"
                Margin="8">
                <TextBlock
                    Name="popupContent">
                    Test
                </TextBlock>
                <Button
                    Click="Button_Click">
                    Test
                </Button>
            </Grid>
        </Border>
    </Grid>
</Grid>

Answer 2

诀窍是不要将 Opacity 添加到整个 Grid 元素：

<Grid>
    <Grid.Background>
        <SolidColorBrush Color="Black" Opacity=".75"/>
    </Grid.Background>
    <!--(Other elements)-->
</Grid>

Answer 3

使用半透明背景，如 SolidColorBrush

<Grid ...>
    <Grid.Background>
        <SolidColorBrush Color="Black" Opacity="0.25"/>
    </Grid.Background>
    ...
</Grid>

或者通过在颜色中指定一个 alpha 值，例如

<Grid Background="#3F000000" ...>

Answer 4

这对我有用。我有两个网格，一个根网格和一个 RootContent 子网格。我控制 RootContent 的不透明度。 "Root" 中的任何控件都不会受到影响。

<Grid x:Name="Root" KeyDown="Root_KeyDown" Tapped="Root_Tapped">
      <!--(Other elements)-->
   <Grid x:Name="RootContent">
          <!--(Other elements)-->
   </Grid>
</Grid>

半透明背景和不透明前景wpf

Semitransparent background and opaque foreground wpf

c#

wpf

uwp