這個按鈕實現也是微軟的Demo，還是先上效果圖：

　　這個效果完全是用XAML實現的 所以會使用ControlTemplate

　　ControlTemplate： 更改控件外觀,利用 Style，可以一次為多個控件設置屬性，但有時除了通過創建 Style 可執行的操作之外，您可能想要自定義 Control 的外觀。從 Control 類繼承的類具有 ControlTemplate，它用于定義 Control 的結構和外觀。

代碼如下：

<Window x:Class="WPFPro.WPFDemo2"
xmlns="//schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="//schemas.microsoft.com/winfx/2006/xaml"
Title="使用XAML創建玻璃按鈕" Height="300" Width="300">
<Window.Resources>

<!--玻璃效果樣式-->
<GradientStopCollection x:Key="MyGlassGradientStopsResource">
<GradientStop Color="WhiteSmoke" Offset="0.2" />
<GradientStop Color="Transparent" Offset="0.4" />
<GradientStop Color="WhiteSmoke" Offset="0.5" />
<GradientStop Color="Transparent" Offset="0.75" />
<GradientStop Color="WhiteSmoke" Offset="0.9" />
<GradientStop Color="Transparent" Offset="1" />
</GradientStopCollection>

<!--漸變畫筆實現玻璃效果-->
<LinearGradientBrush x:Key="MyGlassBrushResource"
StartPoint="0,0" EndPoint="1,1" Opacity="0.75"
GradientStops="{StaticResource MyGlassGradientStopsResource}" />

<!--按鈕背景顏色-->
<LinearGradientBrush x:Key="GrayBlueGradientBrush"
StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="#227DB0" Offset="0" />
<GradientStop Color="#82DDFF" Offset="0.5" />
<GradientStop Color="#227DB0" Offset="1" />
</LinearGradientBrush>

<!--按鈕效果添加-->
<Style TargetType="{x:Type Button}">
<!--添加按鈕背景色-->
<Setter Property="Background" Value="{StaticResource GrayBlueGradientBrush}" />
<Setter Property="Width" Value="90" />
<Setter Property="Margin" Value="10" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<!--在按鈕上添加一個grid布局面板-->
<!--ClipToBounds如果內容應剪裁，則為 true，否則為 false。 默認值為 false。

-->
<Grid Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}" >

<!-- 外邊框 StrokeThickness輪廓的寬度 -->
<Rectangle x:Name="outerRectangle" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Stroke="{TemplateBinding Background}"
RadiusX="20" RadiusY="20" StrokeThickness=&quot;5" Fill="Transparent" />

<!-- 內容框 -->
<Rectangle x:Name="innerRectangle" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Stroke="Transparent"
StrokeThickness="20"
Fill="{TemplateBinding Background}" RadiusX="20" RadiusY="20"
/>

<!-- 玻璃框 -->
<Rectangle x:Name="glassCube" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
StrokeThickness="2" RadiusX="10" RadiusY="10" Opacity="0"
Fill="{StaticResource MyGlassBrushResource}"
RenderTransformOrigin="0.5,0.5">
<Rectangle.Stroke>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.0" Color="LightBlue" />
<GradientStop Offset="1.0" Color="Gray" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Rectangle.Stroke>

<!-- 獲取或設置影響此元素呈現位置的轉換信息 -->
<Rectangle.RenderTransform>
<TransformGroup>
<!--沿水平或垂直方向拉伸或收縮對象-->
<ScaleTransform />
<!--圍繞點 CenterX 和 CenterY 將對象旋轉指定的 Angle -->
<RotateTransform />
</TransformGroup>
</Rectangle.RenderTransform>

</Rectangle>

<!--DockPanel定義一個區域，從中可以相對于彼此水平或垂直排列子元素。 -->
<DockPanel Name="myContentPresenterDockPanel">
<!--ContentPresenter顯示 ContentControl 的內容。-->
<ContentPresenter x:Name="myContentPresenter" Margin="20"
Content="{TemplateBinding Content}" TextBlock.Foreground="Black" />
</DockPanel>
</Grid>

<ControlTemplate.Triggers>
<!-- 設置鼠標懸停觸發器 -->
<Trigger Property="IsMouseOver" Value="True">
<!--外邊框顏色-->
<Setter Property ="Rectangle.Stroke" TargetName="outerRectangle"
Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
<Setter Property="Rectangle.Opacity" Value="1" TargetName="glassCube" />
</Trigger>

<!-- 鼠標離開按鈕后 繼續完成動畫 -->
<Trigger Property="IsFocused" Value="true">
<Setter Property="Rectangle.Opacity" Value="1" TargetName="glassCube" />
<Setter Property="Rectangle.Stroke" TargetName="outerRectangle"
Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
<Setter Property="Rectangle.Opacity" Value="1" TargetName="glassCube" />
</Trigger>

<!--事件觸發器-->
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard Name="mouseEnterBeginStoryboard">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="glassCube"
Storyboard.TargetProperty=
"(Rectangle.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
By="-0.1" Duration="0:0:0.5" />
<DoubleAnimation
Storyboard.TargetName="glassCube"
Storyboard.TargetProperty=
"(Rectangle.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
By="-0.1" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<EventTrigger.Actions>
<StopStoryboard BeginStoryboardName="mouseEnterBeginStoryboard" />
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Button.Click">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="glassCube"
Storyboard.TargetProperty=
"(Rectangle.RenderTransform).(TransformGroup.Children)[1].(RotateTransform.Angle)"
By="360" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Button Content="Button" Margin="12,12,0,0" Name="btn1" VerticalAlignment="Top" />
<Button Content="Button" Margin="12,72,0,0" Name="btn2" VerticalAlignment="Top" />
<Button Content="Button" Margin="12,132,0,0" Name="btn3" VerticalAlignment="Top" />
</Grid>
</Window>

　　其實看代碼會發現，所使用的方法都差不多如：樣式、屬性觸發器、事件觸發器，關鍵就是WPF給我們提東了較多的動畫和樣式效果需要我們慢慢的熟悉。

　　當前這個動畫效果是對應的一個頁面，如果要應用到整個程序 ,在App.xaml中 的Application.Resources添加樣式就可以了。