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>

这个代码片段应该在页面底部显示一个透明的覆盖，但是它创建了一个黑色的覆盖，就像它在现有的背景(也是颜色stdBackgroundColor)的基础上添加透明值一样，因此看起来很奇怪(见下图)。

​

​

如何在没有这种效果的情况下实现内容的透明覆盖(如ScrollViewer)？

Answer 1

免责声明，我在工作，我没有访问一个平台，我可以测试这段代码，但从我所查到的，它应该可以工作。

根本的问题是颜色混合，即我们想要顺利地混合从完全阿尔法到任何任意颜色。从Color.Transparent开始的问题是，当alpha通道比其他组件前进得更快时，您将得到一条白色的通道。一个类似的问题发生在#00000000上，因为它有一条黑色的带子。解决方案是从颜色的一个版本开始，该版本的不透明度设置为0。根据您正在开发的基于XAML的应用程序的哪个版本，我们如何做到这一点略有不同--我发现很难保持原样。在UWP中，我们没有一个不透明掩码，我们不能单独在不透明度上创建一个梯度。剩下的唯一的事情就是使用IValueConverter。

Color属性在GradientStop中是一个Color，而不是一个Brush，因为这会使呈现系统过于复杂。因此，我们需要的第一步是获取任何IValueConverter并去掉alpha值的Color：

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不能工作，因为资源是由键而不是名称引用的。

<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更改为使用不透明度属性，而不是使用颜色#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"/>

问题是，如果你想要混合只影响不透明度，其余的颜色必须是相同的。你会得到一个波段的起始颜色褪色，并改变为结束颜色，否则。