WPF開發者QQ群：?340500857? | 微信群 -> 進入公眾號主頁?加入組織

?

????玩玩彩虹文字，這次用 LinearGradientBrush 并且制作成按鈕，雖然沒技術含量反而有些實用，這就是返璞歸真嗎。

首先來回憶下 LinearGradientBrush 的用法。LinearGradientBrush 表示線性漸變的畫刷，它的 StartPoint和 EndPoint 代表漸變的方向。LinearGradientBrush 還包含一個 GradientStops 集合，其中每個對象指定一種顏色和一個沿畫筆漸變軸的偏移量。

PS：有更好的方式歡迎推薦。

01

—

代碼如下

一、概念很簡單，實際使用起來也很簡單。

例如將下面的 LinearGradientBrush 應用在文字上，文字就變成了彩虹色：。

<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 就會馬上變。利用這種手法，再加上我使用了等寬字體，所以可以制造出每個字顏色不一樣的彩虹文字：

<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> </LinearGradientBrush>

運行起來的效果就是將所有顏色旋轉 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" />

到這里一個彩虹按鈕就完成了。

02

—

效果預覽

鳴謝素材提供者 - [Dino]陳錦華

源碼地址如下

https://github.com/DinoChan/wpf_design_and_animation_lab

github：https://github.com/yanjinhuagood/WPFDevelopers.git

gitee：https://gitee.com/yanjinhua/WPFDevelopers.git

WPF開發者QQ群：?340500857?

blogs：?https://www.cnblogs.com/dino623

Github：https://github.com/DinoChan

出處：https://www.cnblogs.com/dino623

版權：本作品采用「署名-非商業性使用-相同方式共享 4.0 國際」許可協議進行許可。

轉載請著名作者 出處 https://github.com/yanjinhuagood

掃一掃關注我們，

更多知識早知道！

點擊閱讀原文可跳轉至源代碼

總結

以上是生活随笔為你收集整理的WPF实现一个彩虹按钮的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。