前言
继续玩玩彩虹文字，这次用 LinearGradientBrush 并且制作成按钮，虽然没技术含量反而有些实用，这就是返璞归真吗。
正文
首先来回忆下 LinearGradientBrush 的用法。
LinearGradientBrush 表示线性渐变的画刷，它的 StartPoint 和 EndPoint 代表渐变的方向。
LinearGradientBrush 还包含一个 GradientStops 集合，其中每个对象指定一种颜色和一个沿画笔渐变轴的偏移量。
LinearGradientBrush 使用线性渐变绘制区域。
线性渐变定义沿直线的渐变。
线条的终点由 StartPoint 线性渐变的 和 EndPoint 属性定义。
画 LinearGradientBrush 笔沿这条线绘制它 GradientStops 。
默认线性渐变为对角线。 在默认值中， StartPoint 线性渐变的 (为 0，0) ，即要绘制的区域的左上角，其 EndPoint (1，1) ，即要绘制的区域的右下角。 生成的渐变中的颜色沿对角路径内插。
下图显示了对角线渐变。
添加了一条线来突出显示从起点到终点的渐变的内插路径。
概念很简单，实际使用起来也很简单。
例如将下面的 LinearGradientBrush 应用在文字上，文字就变成了彩虹色：
Copy<LinearGradientBrush x:Name="RainbowBrush" StartPoint="0,0.5" EndPoint="1,.5">
<GradientStop x:Name="G2" Offset=".166" Color="#65b849" />
<GradientStop x:Name="G4" Offset=".3333" Color="#f7b423" />
<GradientStop x:Name="G6" Offset="0.5" Color="#f58122" />
<GradientStop x:Name="G10" Offset="0.666" Color="#de3a3c" />
<GradientStop x:Name="G12" Offset="0.8633" Color="#943f96" />
<GradientStop x:Name="G14" Offset="01" Color="#009fd9" />
</LinearGradientBrush>
这时候也可以在属性窗口里看到这个画刷的具体内容：
如果两个 GradientStop 之间 Color 相同就不会发生渐变，如果两个 GradientStop 之间 Offset 就会马上变。利用这种手法，再加上我使用了等宽字体，所以可以制造出每个字颜色不一样的彩虹文字：
Copy<LinearGradientBrush x:Name="RainbowBrush" StartPoint="0,0.5" EndPoint="1,.5">
<GradientStop x:Name="G1" Offset="0" Color="#65b849" />
<GradientStop x:Name="G2" Offset=".166" Color="#65b849" />
<GradientStop x:Name="G3" Offset=".166" Color="#f7b423" />
<GradientStop x:Name="G4" Offset=".3333" Color="#f7b423" />
<GradientStop x:Name="G5" Offset="0.3333" Color="#f58122" />
<GradientStop x:Name="G6" Offset="0.5" Color="#f58122" />
<GradientStop x:Name="G7" Offset="0.5" Color=" #f8f8f8" />
<GradientStop x:Name="G8" Offset="0.5" Color=" #f8f8f8" />
<GradientStop x:Name="G9" Offset="0.50" Color="#de3a3c" />
<GradientStop x:Name="G10" Offset="0.666" Color="#de3a3c" />
<GradientStop x:Name="G11" Offset="0.666" Color="#943f96" />
<GradientStop x:Name="G12" Offset="0.8633" Color="#943f96" />
<GradientStop x:Name="G13" Offset="0.8633" Color="#009fd9" />
<GradientStop x:Name="G14" Offset="01" Color="#009fd9" />
</LinearGradientBrush>
这时候属性窗口里的画刷就成了这样：
下一步，我将这个 TextBlock 放进按钮的控件模板里面，在 MouseOver 的 Storyboard 里控制 LinearGradientBrush 改变方向。有两种方式可以改变它的方向，其中一种是用 PointAnimation 改变 StartPoint 和 EndPoint，另一种是用 DoubleAnimation 直接改变 LinearGradientBrush.RelativeTransform。后一种的写法如下：
<Storyboard>
<DoubleAnimation Storyboard.TargetName="textBlock"
Storyboard.TargetProperty="(TextBlock.Foreground).(Brush.RelativeTransform).(RotateTransform.Angle)"
To="90"
Duration="0:0:0.5">
<DoubleAnimation.EasingFunction>
<QuarticEase EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
<LinearGradientBrush x:Name="RainbowBrush" StartPoint="0,0.5" EndPoint="1,.5">
<LinearGradientBrush.RelativeTransform>
<RotateTransform Angle="0" CenterX="0.5" CenterY="0.5" />
</LinearGradientBrush.RelativeTransform>
运行起来的效果就是将所有颜色旋转 90 度，看起来就像以前的 Apple 的 Logo 配色。
在上面的 LinearGradientBrush 里，我偷偷藏了两个白色的 GradientStop （名为 G6 和 G7 那两个），它们的 Offset 都是 0.5，处于正中间的位置。在按钮的 Pressed 状态中，用 DoubleAnimation 将它们前后的所有 GradientStop 的 Offset 都设置为 0 或 1，效果是将所有颜色向两边推。因为现在旋转了 90 度，所以实际上是向上下两个方向推：
<DoubleAnimation Storyboard.TargetName="G2"
Storyboard.TargetProperty="Offset"
To="0" />
……
……
<DoubleAnimation Storyboard.TargetName="G13"
Storyboard.TargetProperty="Offset"
To="1" />
到这里一个彩虹按钮就完成了。
总结
在WPF 中创建一个彩虹按钮不仅能为用户界面增添视觉吸引力，还能提升用户的交互体验。
通过本文的介绍，可以了解如何利用 WPF 的强大功能和灵活性来实现一个色彩绚丽、动态变化的彩虹按钮。
希望本文能为 WPF 开发者提供有价值的参考，并激发更多的创意和灵感。
最后
如果你觉得这篇文章对你有帮助，不妨点个赞支持一下！你的支持是我继续分享知识的动力。如果有任何疑问或需要进一步的帮助，欢迎随时留言。
也可以加入微信公众号 [DotNet技术匠] 社区，与其他热爱技术的同行一起交流心得，共同成长！
优秀是一种习惯，欢迎大家留言学习！
作者：dino.c
出处：cnblogs.com/dino623/p/wpf_rainbow_button.html
声明：网络内容，仅供学习，尊重版权，侵权速删，歉意致谢！
