标签：schema win one fir stroke ati 通过 影响 sse
今天我们开始着手上一篇文章提到的实现用户动态按钮功能。
同样我们对上一章的代码进行修改按键特效。首先我们将原来的按键样式代码删掉，修改如下代码：
删掉后，为：
在添加按键动态效果之前，我们先添加一个动态背景图案样式，及其渐变笔刷和一个按键背景渐变笔刷样本
"myGradientStopResource">
"WhiteSmoke" Offset="0.2"/>
"Transparent" Offset="0.4"/>
"WhiteSmoke" Offset="0.5"/>
"Transparent" Offset=" 0.75"/>
"WhiteSmoke" Offset="0.9"/>
"Transparent" Offset=" 1.0"/>
"myGlassBrushResource" StartPoint="0,0" EndPoint=" 1,1" Opacity="0.75"
GradientStops="{StaticResource myGradientStopResource }"/>
"grayBlueGradientBrush" StartPoint=" 0,0" EndPoint="1,1">
"Gray" Offset="0"/>
"Cyan" Offset="0.5"/>
"Gold" Offset="1.0"/>
为按键类统一添加背景效果:
"Background" Value="{StaticResource grayBlueGradientBrush}"/>
通过模板属性设计按键效果：
"Template">
"{x:Type Button}">
添加外观框架：
"-26,0,-56,2">
"outerRectangle" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Stroke="{TemplateBinding Background}"
RadiusX="20" RadiusY="20" StrokeThickness="5" Fill="Transparent"/>
"innerRectangle" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Stroke="Transparent"
StrokeThickness="20" Fill="{TemplateBinding Background}"
RadiusX="20" RadiusY="20"/>
"glassCube" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" StrokeThickness="2"
RadiusX="10" RadiusY="10" Opacity="0"
Fill="{StaticResource myGlassBrushResource}"
RenderTransformOrigin="0.5,0.5">
" 0.5,0" EndPoint="0.5,1">
"LightBlue" Offset="0.0"/>
"Gray" Offset="1.0"/>
"myContentPresenterDockPanel">
"myContentPresent" Margin="20"
Content="{TemplateBinding Content}" TextBlock.Foreground="Black"/>
添加鼠标对按键影响动态效果
"IsMouseOver" Value="True">
"Rectangle.Stroke" TargetName="outerRectangle"
Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
"Rectangle.Opacity" Value="1" TargetName="glassCube"/>
"IsFocused" Value="True">
"Rectangle.Stroke" TargetName="outerRectangle"
Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
"Rectangle.Opacity" Value="1" TargetName="glassCube"/>
"Mouse.MouseEnter">
"mouseEnterBeginStoryboard">
"glassCube"
Storyboard.TargetProperty=
"(Rectangle.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
By="-0.2" Duration="0:0:0.5" />
"glassCube"
Storyboard.TargetProperty=
"(Rectangle.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
By="-0.2" Duration="0:0:0.5" />
"Mouse.MouseLeave">
"mouseEnterBeginStoryboard"/>
"Button.Click">
"glassCube"
Storyboard.TargetProperty="(Rectangle.RenderTransform).(TransformGroup.Children)[1].(RotateTransform.Angle)"
By="360" Duration="0:0:0.5"/>
我们解析一下部分代码：
"IsMouseOver" Value="True">
"Rectangle.Stroke" TargetName="outerRectangle"
Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
"Rectangle.Opacity" Value="1" TargetName="glassCube"/>
这里操作的是鼠标移到到按键上时，外框显示高亮效果，玻璃框透明度为1（1代表不透明，值越小越透明）。同样，聚焦的时候也是对对应的外框显示相应的效果。当然我们也可以将其改为内框
"Rectangle.Stroke" TargetName="innerRectangle"
Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
按同样的方法，我们对鼠标移入到按键框内，为玻璃外框添加收缩效果
"Mouse.MouseEnter">
"mouseEnterBeginStoryboard">
"glassCube"
Storyboard.TargetProperty=
"(Rectangle.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
By="-0.2" Duration="0:0:0.5" />
"glassCube"
Storyboard.TargetProperty=
"(Rectangle.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
By="-0.2" Duration="0:0:0.5" />
其中 By="-0.2" 代表收缩程度，值越小，收缩约小。
当鼠标离开按键时，我们将按键效果设置为进入之前的状态：
"Mouse.MouseLeave">
"mouseEnterBeginStoryboard"/>
最后我们添加当鼠标按下时，玻璃外框按中心点旋转360°：
"Button.Click">
"glassCube"
Storyboard.TargetProperty="(Rectangle.RenderTransform).(TransformGroup.Children)[1].(RotateTransform.Angle)"
By="360" Duration="0:0:0.5"/>
通过Margin属性对按键重新布局一下：
完整代码：
"WpfControls.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" >
"myGradientStopResource">
"WhiteSmoke" Offset="0.2"/>
"Transparent" Offset="0.4"/>
"WhiteSmoke" Offset="0.5"/>
"Transparent" Offset=" 0.75"/>
"WhiteSmoke" Offset="0.9"/>
"Transparent" Offset=" 1.0"/>
"myGlassBrushResource" StartPoint="0,0" EndPoint=" 1,1" Opacity="0.75"
GradientStops="{StaticResource myGradientStopResource }"/>
"grayBlueGradientBrush" StartPoint=" 0,0" EndPoint="1,1">
"Gray" Offset="0"/>
"Cyan" Offset="0.5"/>
"Gold" Offset="1.0"/>
"myContentPresenterDockPanel">
"myContentPresent" Margin="20"
Content="{TemplateBinding Content}" TextBlock.Foreground="Black"/>
"IsMouseOver" Value="True">
"Rectangle.Stroke" TargetName="outerRectangle"
Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
"Rectangle.Opacity" Value="1" TargetName="glassCube"/>
"IsFocused" Value="True">
"Rectangle.Stroke" TargetName="innerRectangle"
Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
"Rectangle.Opacity" Value="1" TargetName="glassCube"/>
"Mouse.MouseEnter">
"mouseEnterBeginStoryboard">
"glassCube"
Storyboard.TargetProperty=
"(Rectangle.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
By="-0.2" Duration="0:0:0.5" />
"glassCube"
Storyboard.TargetProperty=
"(Rectangle.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
By="-0.2" Duration="0:0:0.5" />
"Mouse.MouseLeave">
"mouseEnterBeginStoryboard"/>
"Button.Click">
"glassCube"
Storyboard.TargetProperty=
"(Rectangle.RenderTransform).(TransformGroup.Children)[1].(RotateTransform.Angle)"
By="360" Duration="0:0:0.5"/>
"0,1.5" EndPoint="0.5,0.1" Opacity="0.2">
"Green" Offset="0.0"/>
"LightBlue" Offset="0.75"/>
"LightCoral" Offset="1.2"/>
"30"/>
"30"/>
"60"/>
"0" Grid.Column="1" Name="firstName" Margin="0,5,10,5"/>
"1" Grid.Row="1" Name="lastName" Margin="0,5,10,5"/>
View Code
编译运行，就可以看到我们想要的效果。
End.
谢谢。
C#编程之WPF控件开发（十三）
标签：schema win one fir stroke ati 通过 影响 sse
原文地址：https://www.cnblogs.com/lumao1122-Milolu/p/11925929.html