如何在 WPF 中制作多向渐变？答案

【问题标题】：How do I make a multi-directional gradient in WPF?如何在 WPF 中制作多向渐变？
【发布时间】：2018-12-01 11:29:31
【问题描述】：

我目前在 XAML 中设置了如下渐变：

<Canvas>
    <Canvas.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="Black" Offset="0"/>
            <GradientStop Color="Red" Offset="0.5"/>
            <GradientStop Color="White" Offset="1"/>
        </LinearGradientBrush>
    </Canvas.Background>
</Canvas>

结果：

但是，这不是我想要实现的。我想要的是有一个渐变过渡到纯色。以下是我想要实现的目标：

从上图可以看出，顶部有一个白-红渐变，向下平滑过渡到黑色。我还没有找到一种方法来做到这一点，这就是我需要帮助的地方。有没有办法做到这一点？如果有，实现这一目标的最佳方法是什么（您知道）？

【问题讨论】：

标签： wpf colors gradient brush

【解决方案1】：

您可以使用改变不透明度的垂直 LinearGradientBrush 覆盖第二个元素：

<Grid>
    <Canvas>
        <Canvas.Background>
            <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                <GradientStop Color="White" Offset="0"/>
                <GradientStop Color="Red" Offset="1"/>
            </LinearGradientBrush>
        </Canvas.Background>
    </Canvas>
    <Canvas>
        <Canvas.Background>
            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                <GradientStop Color="#00000000" Offset="0"/>
                <GradientStop Color="Black" Offset="1"/>
            </LinearGradientBrush>
        </Canvas.Background>
    </Canvas>
</Grid>

【讨论】：

感谢您的帮助 :) 在等待您的答复时，我确实找到了替代解决方案。我在画布元素中添加了一个OpacityMask，然后在下面放置了一个全黑控件。这是一种适当的做法，对吗？
Canvas 的所有子元素也会被 OpacityMask 淡出。当然，如果它被用作没有子元素的“仅背景”元素，那将不是问题。但是矩形会更简单。