WPF開(kāi)發(fā)者QQ群：?340500857? | 微信群 -> 進(jìn)入公眾號(hào)主頁(yè)?加入組織

?

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

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

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

01

—

代碼如下

一、概念很簡(jiǎn)單，實(shí)際使用起來(lái)也很簡(jiǎn)單。

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

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

這時(shí)候也可以在屬性窗口里看到這個(gè)畫(huà)刷的具體內(nèi)容：

二、如果兩個(gè) GradientStop 之間 Color 相同就不會(huì)發(fā)生漸變，如果兩個(gè) GradientStop 之間 Offset 就會(huì)馬上變。利用這種手法，再加上我使用了等寬字體，所以可以制造出每個(gè)字顏色不一樣的彩虹文字：

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

這時(shí)候?qū)傩源翱诶锏漠?huà)刷就成了這樣：

下一步，我將這個(gè) TextBlock 放進(jìn)按鈕的控件模板里面，在 MouseOver 的 Storyboard 里控制LinearGradientBrush改變方向。有兩種方式可以改變它的方向，其中一種是用 PointAnimation 改變 StartPoint 和 EndPoint，另一種是用 DoubleAnimation 直接改變 LinearGradientBrush.RelativeTransform。后一種的寫(xiě)法如下：

三、創(chuàng)建代碼如下

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

運(yùn)行起來(lái)的效果就是將所有顏色旋轉(zhuǎn) 90 度，看起來(lái)就像以前的 Apple 的 Logo 配色。

四、在上面的 LinearGradientBrush 里，我偷偷藏了兩個(gè)白色的 GradientStop （名為 G6 和 G7 那兩個(gè)），它們的 Offset 都是 0.5，處于正中間的位置。在按鈕的 Pressed 狀態(tài)中，用 DoubleAnimation 將它們前后的所有 GradientStop 的 Offset 都設(shè)置為 0 或 1，效果是將所有顏色向兩邊推。因?yàn)楝F(xiàn)在旋轉(zhuǎn)了 90 度，所以實(shí)際上是向上下兩個(gè)方向推：

<DoubleAnimation Storyboard.TargetName="G2"Storyboard.TargetProperty="Offset"To="0" />…… ……<DoubleAnimation Storyboard.TargetName="G13"Storyboard.TargetProperty="Offset"To="1" />

到這里一個(gè)彩虹按鈕就完成了。

02

—

效果預(yù)覽

鳴謝素材提供者 - [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開(kāi)發(fā)者QQ群：?340500857?

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

Github：https://github.com/DinoChan

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

版權(quán)：本作品采用「署名-非商業(yè)性使用-相同方式共享 4.0 國(guó)際」許可協(xié)議進(jìn)行許可。

轉(zhuǎn)載請(qǐng)著名作者 出處 https://github.com/yanjinhuagood

掃一掃關(guān)注我們，

更多知識(shí)早知道！

點(diǎn)擊閱讀原文可跳轉(zhuǎn)至源代碼

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。