[WPF] 抄一個 CSS3 實現的按鈕

1. 來源

繼上一篇文章模仿了一下這個按鈕，這篇文章索性抄一下，連動畫都模仿過來，順便熟習下 CSS3。原版：

純CSS3實現質感細膩絲滑按鈕

2. 實現

第一步

<ContentPresenter.Effect>
    <DropShadowEffect BlurRadius="2"
                      Direction="270"
                      Opacity=".9"
                      ShadowDepth="1"
                      Color="#F000" />
</ContentPresenter.Effect>

第一步先做最外層的 Border，並在中間的文字加上一個陰影。這時候文字會有些模糊，在樣式上加上 <Setter Property="UseLayoutRounding" Value="True" /> 會有些改善。

第二步

<Border x:Name="HighlightBorder"
        BorderBrush="White"
        BorderThickness="0,1,0,0"
        CornerRadius="4">
    <Border.OpacityMask>
        <RadialGradientBrush x:Name="Brush" Center=".3,.0" GradientOrigin=".3,.0" RadiusX=".2" RadiusY=".2">
            <GradientStop Color="#F000" />
            <GradientStop Offset=".7" Color="#8000" />
            <GradientStop Offset="1" Color="#5000" />
        </RadialGradientBrush>
    </Border.OpacityMask>
</Border>

然后放一層只有上邊框的 Border。注意這里不能高度為 1 像素的 Line，因為要配合圓角的彎曲。

第三步

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

放個遮罩層增加一點立體感。

第四步

<Border Background="{TemplateBinding Background}"
        BorderBrush="{TemplateBinding BorderBrush}"
        BorderThickness="{TemplateBinding BorderThickness}"
        CornerRadius="4"
        SnapsToDevicePixels="true">
    <Border.Effect>
        <DropShadowEffect x:Name="OuterShadow"
                          BlurRadius="0"
                          Direction="270"
                          Opacity=".25"
                          ShadowDepth="1"
                          Color="#FFF" />
    </Border.Effect>
</Border>

復制一個外邊框並應用 DropShadowEffect，用於展示下邊緣的立體感，以及用於 MouseOver 狀態的動畫。

第五步

<Grid x:Name="InnerShadow" Opacity="0">
    <Border Margin="-5"
            BorderBrush="Black"
            BorderThickness="5">
        <Border.Effect>
            <DropShadowEffect BlurRadius="7" ShadowDepth="0" />
        </Border.Effect>
    </Border>
    <Grid.OpacityMask>
        <VisualBrush Stretch="None" Visual="{Binding ElementName=border}" />
    </Grid.OpacityMask>
</Grid>

最后需要一個內陰影，用於 Pressed 狀態的動畫，可以參考這篇文章：

實現 WPF 的 Inner Shadow

3. 成果

再增加一些動畫，成果如下：

4. 源碼

https://github.com/DinoChan/wpf_design_and_animation_lab