這個(gè)按鈕實(shí)現(xiàn)也是微軟的Demo，還是先上效果圖：

　　這個(gè)效果完全是用XAML實(shí)現(xiàn)的 所以會(huì)使用ControlTemplate

　　ControlTemplate： 更改控件外觀,利用 Style，可以一次為多個(gè)控件設(shè)置屬性，但有時(shí)除了通過(guò)創(chuàng)建 Style 可執(zhí)行的操作之外，您可能想要自定義 Control 的外觀。從 Control 類繼承的類具有 ControlTemplate，它用于定義 Control 的結(jié)構(gòu)和外觀。

代碼如下：

<Window x:Class="WPFPro.WPFDemo2"
xmlns="//schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="//schemas.microsoft.com/winfx/2006/xaml"
Title="使用XAML創(chuàng)建玻璃按鈕" 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>

<!--漸變畫(huà)筆實(shí)現(xiàn)玻璃效果-->
<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}">
<!--在按鈕上添加一個(gè)grid布局面板-->
<!--ClipToBounds如果內(nèi)容應(yīng)剪裁，則為 true，否則為 false。 默認(rèn)值為 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" />

<!-- 內(nèi)容框 -->
<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>

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

</Rectangle>

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

<ControlTemplate.Triggers>
<!-- 設(shè)置鼠標(biāo)懸停觸發(fā)器 -->
<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>

<!-- 鼠標(biāo)離開(kāi)按鈕后 繼續(xù)完成動(dòng)畫(huà) -->
<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>

<!--事件觸發(fā)器-->
<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>

　　其實(shí)看代碼會(huì)發(fā)現(xiàn)，所使用的方法都差不多如：樣式、屬性觸發(fā)器、事件觸發(fā)器，關(guān)鍵就是WPF給我們提東了較多的動(dòng)畫(huà)和樣式效果需要我們慢慢的熟悉。

　　當(dāng)前這個(gè)動(dòng)畫(huà)效果是對(duì)應(yīng)的一個(gè)頁(yè)面，如果要應(yīng)用到整個(gè)程序 ,在App.xaml中 的Application.Resources添加樣式就可以了。