[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

標籤：WPF

上一篇：dotnet 6 使用 CreateSymbolicLink 創建檔案夾符號鏈接

下一篇：WPF 使用 VisualBrush 在 4k 加 200 DPI 設備上某些文本不渲染看不見問題