彩票走势图

　这个按钮实现也是微软的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="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添加样式就可以了。