65.9K
CodeProject 正在变化。 阅读更多。
Home

WPF LinearGradientBrush 参数详解

Peter Huber SG
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.48/5 (5投票s)

2021 年 5 月 7 日

CPOL

5分钟阅读

viewsIcon

15514

downloadIcon

294

WPF LinearGradientBrush 参数令人困惑，需要proper explanation

引言

您是否曾遇到过类似的代码，并好奇它做了什么？

<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
  <GradientStop Color="Yellow" Offset="0.0" />
  <GradientStop Color="Red" Offset="0.25" />
  <GradientStop Color="Blue" Offset="0.75" />
  <GradientStop Color="LimeGreen" Offset="1.0" />
</LinearGradientBrush>

此示例摘自 https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.media.lineargradientbrush。

如果您能回答以下问题，那么本文不适合您

  • 当您将 StartPoint 和 Endpoint 中的 '0.5' 更改为相同但不同的值时，会发生什么？
  • 如果末尾添加另一个 GradientStop 并设置 Offset -0.1，会发生什么？
  • 如果 StartPoint 和 Endpoint 的值相同，会发生什么？

但是，如果您惊讶地发现将两个 '0.5' 更改为任何其他值都没有任何影响，那么您应该继续阅读。 :-)

定义 GradientStops

首先，您需要定义 GradientStops。这很容易。上面的代码会产生类似这样的效果

然而，在添加更多 GradientStops 时，您却拥有惊人的自由度。例如，当添加一个 GradientStop 并设置 offset 1 时，会发生什么？

<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Red" Offset="0.25" />
<GradientStop Color="Blue" Offset="0.75" />
<GradientStop Color="LimeGreen" Offset="1.0" />
<GradientStop Color="White" Offset="1.0" />

什么都没有改变。:-(

看来，如果两个 GradientStops 具有相同的偏移量，则只使用第一个。

当 GradientStop 被乱序添加时，会发生什么？

<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Red" Offset="0.25" />
<GradientStop Color="Blue" Offset="0.75" />
<GradientStop Color="LimeGreen" Offset="1.0" />
<GradientStop Color="White" Offset="0.5" />

看起来 GradientStops 是按它们的偏移量排序的。所以即使 White 是最后定义的，由于它的偏移量，它会出现在中间。这种排序是一个很好的便捷功能。

如果缺少偏移量 0 和 1 的值，会发生什么？

<GradientStop Color="Red" Offset="0.25" />
<GradientStop Color="Blue" Offset="0.75" />

从 0 直到在偏移量 0.25 处定义的第一个颜色，一直使用红色。同样，在最后一个偏移量 0.75 之后，在偏移量 1 之前一直使用相同的颜色蓝色。

使用小于 0 或大于 1 的偏移量时，会发生什么？

<GradientStop Color="Yellow" Offset="-0.1" />
<GradientStop Color="Red" Offset="0.25" />
<GradientStop Color="Blue" Offset="0.75" />
<GradientStop Color="LimeGreen" Offset="1.1" />

我曾以为这会引发异常，但 WPF 愉快地接受了这些值，用以定义 0 之前和 1 之后的渐变。对于 LinearGradientBrush，它仅使用 0（橙色而不是黄色）和 1 之间的颜色。

定义 StartPoint 和 EndPoint

GradientStops 定义了渐变中使用的颜色。StartPoint 和 EndPoint 定义了渐变的方向，例如水平或垂直或其他任何角度。奇怪的是，这个角度不是由角度定义的，而是由 2 个点定义的，即 4 个坐标。

在 WPF 中，坐标 x=0 和 y=0 的点位于左上角（在大多数图形中，它位于左下角）。LinearGradientBrush 支持两种坐标，默认值为 0 到 1，并且生成的渐变会拉伸以匹配目标。在另一种模式下，使用实际屏幕坐标。为简单起见，本文仅描述默认设置。

水平和垂直渐变

StartPoint x=0, y=0, EndPoint x=1, y=0 定义了一个从左到右的水平箭头（参见示例 1 中的上方正方形），然后告诉 LinearGradientBrush 创建一个水平渐变，左边是绿色，右边是蓝色。

示例 2 也有一个相同方向的水平箭头，但这次箭头位于正方形的底部。然而，结果与示例 1 完全相同。

这解释了为什么 Microsoft LinearGradientBrush 的帮助文档对我来说如此令人困惑。我想知道 0.5 的影响是什么，但无法弄清楚。现在我知道了，对于水平（和垂直）箭头，箭头在正方形中的位置无关紧要。

示例 3 显示了一个垂直渐变。与水平渐变的不同之处在于，0 和 1 在 y 值中，而 x 值（0.50 不重要，只要它们相同即可。

示例 4 类似于示例 1，但这次箭头从右到左运行，这将蓝色切换到左边，将绿色切换到右边。

示例 5 显示了垂直渐变的颜色切换。

这些示例显示了不同的垂直渐变。示例 1 与上一个示例组相同。

在示例 2 中，StartPoint 为 -0.2，箭头位于正方形外部。生成的渐变长度与箭头相同，但可见的渐变仅显示 0 和 1 之间的部分。limegreen 位于 -0.2。在 0 处，渐变以较浅的 limegreen 开始，更接近白色。

示例 3 显示了一个箭头，其渐变仅从 0.3 开始。对于 0 到 0.3 的值，使用恒定的 limegreen。

示例 4 显示了一个箭头，该箭头在正方形内部开始和结束。这可能非常有用，以便用户可以看到更多起始颜色和结束颜色。

示例 5 显示了更多的起始颜色 limegreen 和底部的浅蓝色组合，因为箭头指向正方形下方。

到目前为止一切顺利。但是，如果 StartPoint 和 EndPoint 的值相同，会发生什么？

我曾以为示例 1 会是 limegreen，因为渐变中的点 0 是 limegreen。然而，似乎 LinearGradientBrush 不关心点值，总是取最后一个渐变色。确实很奇怪。

倾斜渐变

在正方形的相对角定义 StartPoint 和 EndPoint 会创建对角线渐变。示例显示了四种可能的变体。

对角线箭头的长度会影响渐变，如前所述。有点奇怪的是，示例 2-4 创建了完全相同的渐变，尽管箭头位于不同的位置。更奇怪的是，示例 5 具有相同的箭头，但又在不同的位置，确实产生了不同的渐变。

在玩弄了渐变之后，我现在对哪个箭头会产生什么样的渐变有了一点感觉，但我无法用几句话来描述示例 2-5 的行为。难怪我过去觉得使用 LinearGradientBrush 令人困惑。

示例应用程序 渐变画笔浏览器

Visual Studio 尝试帮助创建渐变，Blend 甚至有一个特殊的渐变工具。也许只是我，但通过它们，我从未能弄清楚 LinearGradientBrush 到底是如何工作的。所以，半天之内，我编写了一个简单的应用程序，可以在其中输入所有 LinearGradientBrush 参数并立即看到结果：

网格中有一行代表一个 GradientStop。输入所有值后，按 执行，渐变就会更新。

如果您读到这里，说明您对 WPF 表现出了浓厚的兴趣。我觉得本文的主题相当枯燥，但我写过一些非常有趣且有用的文章，我想推荐给您

历史

  • 2021 年 5 月 7 日：初始版本
© . All rights reserved.