[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