[WPF] 實現一個很久以前流行的按鈕樣式

偶爾看到這個按鈕樣式，用 WPF 模仿一下。這個按鈕樣式好像好幾年前看到過，已經不記得怎麼稱呼了。

實現起來還挺簡單的，首先用 OpacityMask 和 RadialGradientBrush 實現一個高光的邊框：

<Border x:Name="HighlightBorder"
        BorderBrush="White"
        BorderThickness="1"
        CornerRadius="4">
    <Border.OpacityMask>
        <RadialGradientBrush x:Name="Brush" Center=".3,.0" GradientOrigin=".3,.0" RadiusX=".2" RadiusY=".2">
            <GradientStop Color="#8000" />
            <GradientStop Offset=".7" Color="#3000" />
            <GradientStop Offset="1" Color="#1000" />
        </RadialGradientBrush>
    </Border.OpacityMask>
</Border>
<ContentPresenter x:Name="contentPresenter"
                  Margin="{TemplateBinding Padding}"
                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                  Focusable="False"
                  RecognizesAccessKey="True"
                  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />

然後在上面放一個半透明的遮罩層：

<Rectangle x:Name="rectangle"
           RadiusX="4"
           RadiusY="4">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
            <GradientStop x:Name="Stop1" Offset=".5" Color="#10FFFFFF" />
            <GradientStop x:Name="Stop2" Offset=".5" Color="#0000" />
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

下一步，在外面套一個 Border，Border 的邊框爲一個像素，並且應用上背景色：

<Border x:Name="border"
        Background="{TemplateBinding Background}"
        BorderBrush="{TemplateBinding BorderBrush}"
        BorderThickness="{TemplateBinding BorderThickness}"
        CornerRadius="4"
        SnapsToDevicePixels="true">

最後，在底層放一個半透明的層，添加一點立體感：

<Border Margin="0,0,0,-1"
        Background="{TemplateBinding Background}"
        BorderBrush="{TemplateBinding BorderBrush}"
        CornerRadius="5"
        Opacity=".3"
        SnapsToDevicePixels="true">
    <Rectangle Margin="0,4,0,0"
               Fill="White"
               Opacity=".5"
               RadiusX="5"
               RadiusY="5" />
</Border>

應用上各種顏色，成果如下：

最後再 MouseOver 和 Pressed 狀態對遮罩層做手腳，實現了簡單的狀態變化：

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