WPF 如何利用Blend给Button添加波纹效果

先看一下效果吧:

如果不会写动画或者懒得写动画，就直接交给Blend来做吧;

其实Blend操作起来很简单，有点类似于在操作PS，我们只需要设置关键帧，鼠标点来点去就可以了，Blend会自动帮我们生成我们想要的动画效果.

第一步：要创建一个空的WPF项目

第二步：右键我们的项目，在最下方有一个，在Blend中设计

如果没有这个，应该是你在安装vs的时候把它勾掉了，默认是勾选的，没有的话也可以重新安装回来

点一下上方导航条的工具栏

安装一下就可以了

第三步：打开的Blend项目操作页面和WPF的页面几乎是一模一样的

我们在里面添加一个button按钮,设置长100，高30

然后在设计器中右键我们的Button，找到编辑模板，编辑副本, 点击确定, 然后vs会给我们生成一大段代码

他的ControlTemplate里面的代码是这样的

复制代码

<Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="true">
     <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>

我们改成下面这样一段代码

复制代码

<Grid>
     <Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="#FFDACFCF" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="true" CornerRadius="10"/>
          <Border x:Name="border1" Background="#7FFFFFFF" CornerRadius="10">
               <Border.Clip>
                     <RectangleGeometry>
                            <RectangleGeometry.Rect>
                                    <Rect Width="0" Height="30" X="50" Y="0"/>
                            </RectangleGeometry.Rect>
                     </RectangleGeometry>
                </Border.Clip>
          </Border>
     <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>

我们把原本的ContentPresenter从Border内部拿出来，然后在他们中间夹一层Border，再设置一下这个Border的背景色为White，接着在属性面板里面把他的透明度调整成百分之50

(也可以自己根据喜好调整颜色和透明度，只要能看到Button的文本就行了)

再给这个border添加一个Clip（Clip是什么可以把鼠标放在Clip上，按F1，查看文档说明）

设置里面的Rect的坐标和宽高（坐标点是基于空间的左上角，左上角就是(0,0),右下角就是(宽,高)）

因为我们设置的从中间像两边扩散的效果，所以我们把这个矩形放到中间位置，也就是(50,0)的位置

第四步：现在来利用Blend来写一段动画

Blend得左边有一个文档大纲

打开它就能看见对象和时间轴

点一下那个绿色得 + 号，Blend会创建一个空得动画

接着整个界面就会被红色的线圈住

这个时候我们就可以添加动画了

我们在0秒和1秒的位置，分别点一下那个记录关键帧的按钮

然后我们再点一下1秒关键帧的位置

最后在代码里面选中我们的Border的Rect

修改这里的值，就表示，在1秒以后，这个border的clip会变成什么值

初始值是50,0,0,30

我们改成0,0,100,30，按回车，Blend就自动把动画给生成了

第五步：把这个动画运用到Button的Triggers下面的IsMouseOver为true的下面

复制代码

<Trigger Property="IsMouseOver" Value="true">
    <Trigger.EnterActions>
        <BeginStoryboard x:Name="bs1" Storyboard="{StaticResource Storyboard1}"/>
    </Trigger.EnterActions>
    <Trigger.ExitActions>
         <StopStoryboard BeginStoryboardName="bs1"/>
    </Trigger.ExitActions>
</Trigger>

这样在IsMouseOver这个属性变成True的时候，就会执行这个动画了；

或者我们也可以用EventTrigger来实现这个效果

复制代码

<EventTrigger RoutedEvent="{x:Static UIElement.MouseEnterEvent}">
     <BeginStoryboard Storyboard="{StaticResource Storyboard1}" x:Name="bs1"/>
</EventTrigger>
<EventTrigger RoutedEvent="{x:Static UIElement.MouseLeaveEvent}">
     <StopStoryboard BeginStoryboardName="bs1"/>
</EventTrigger>

区别就在于一个是在属性变更的时候触发动画，一个是在路由事件中执行动画，二者任选其一即可

项目github地址：bearhanQ/WPFFramework: Share some experience (github.com)

QQ技术交流群：332035933；