UWP透明LinearGradientBrush

Question

我的c＃UWP应用程序出现问题。

<Grid VerticalAlignment="Bottom" Height="40" Grid.Row="3" Margin="0,0,0,-1">
  <Grid.Background>
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#00000000" Offset="0"/>
        <GradientStop Color="{StaticResource stdBackgroundColor}" Offset="1"/>
    </LinearGradientBrush>
  </Grid.Background>
</Grid>

此代码段应在页面底部显示透明叠加层，但它会创建一个黑色叠加层，就像它在现有背景上添加透明值（也是Color stdBackgroundColor）因此看起来很奇怪（见下图）

如何在没有此效果的情况下实现内容的透明叠加（例如ScrollViewer）？

Answer 1

免责声明，我正在工作，而且我无法访问可以测试此代码的平台，但是从我查看的内容中它应该可以正常工作。

潜在的问题是颜色混合问题，即我们希望从完整的alpha平滑地混合到任意颜色。从Color.Transparent开始的问题是，当alpha通道比其他组件进展更多时，您将获得一条白色带。 #00000000出现了类似的问题，因为它有一条黑色带。解决方案是从您的颜色版本开始，将不透明度设置为0。根据您正在开发的基于XAML的应用程序版本，我们如何解决这个问题略有不同 - 我发现很难保持这些应用程序。在UWP中，我们没有不透明蒙版，我们无法单独在不透明度上创建渐变。唯一剩下的就是使用IValueConverter。

Color中的GradientStop属性是Color而不是Brush，因为这会使渲染系统过于复杂。因此，我们需要的第一步是IValueConverter，它接受​​任何Color并删除alpha值：

public class TransparentColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType,
                          object parameter, string language)
    {
        Color convert = (Color) value; // Color is a struct, so we cast
        return Color.FromArgb(0, convert.R, convert.G, convert.B);
    }

    public object ConvertBack(object value, Type targetType,
                              object parameter, string language)
    {
         throw new NotImplementedException();
    }
}

下一个挑战是创建一个我们可以使用这种颜色的绑定。绑定对象允许我们指定Source，它可以是我们传入的任何对象。ElementName将无效，因为资源是由key引用的，而不是名称。

<LinearGradientBrush x:Key="OpacityGradientBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientStop Color="{Binding Source={StaticResource stdBackgroundColor},
                       Converter={StaticResource TransparentColorConverter}}" Offset="0"/>
  <GradientStop Color="{StaticResource stdBackgroundColor}" Offset="1"/>
</LinearGradientBrush>

当然，不要忘记将TransparentColorConverter放在Resources中，以便在此处引用。就个人而言，我宁愿不必使用转换器，但在这种情况下，我认为这是有道理的。

注意：我们在绑定中使用Source，因此我们可以引用静态资源。如果我们有一个可以绑定的属性，我们可以使用Path代替。

以下答案适用于WPF，但不适用于UWP 。我希望微软不要以不相容的方式重新定义相同的概念，但这就是我们生活的世界。

根据this answer

更正我的回答

您想要将LinearGradientBrush更改为使用Opacity属性而不是颜色#00000000。问题是它从基本上黑色内插到你想要的颜色。要获得您想要的效果，您需要设置不透明蒙版画笔，如下所示：

<LinearGradientBrush x:Key="OpacityGradientBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientStop Color="#00FFFFFF" Offset="0"/>
  <GradientStop Color="#FFFFFFFF" Offset="1"/>
</LinearGradientBrush>

然后在代码中你需要应用不透明蒙版，你可以像这样引用它：

<Grid VerticalAlignment="Bottom" Height="40" Grid.Row="3"
    Background="{StaticResource stdBackgroundColor}"
    OpacityMask="{StaticResource OpacityGradientBrush} Margin="0,0,0,-1"/>

问题在于，如果您希望混合仅影响不透明度，则其余颜色必须相同。你会得到一条起始颜色渐渐消失的乐队，否则就会变成结束颜色。