[WPF] 制作一個彩虹按鈕

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

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

概念很簡單，實際使用起來也很簡單。例如將下面的 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>

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

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

源碼：- https://github.com/DinoChan/wpf_design_and_animation_lab