首页 > 其他分享 >WPF 如何利用Blend给Button添加波纹效果

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

时间:2024-08-28 13:52:54浏览次数:14  
标签:动画 Border Button WPF Blend 我们

先看一下效果吧:

如果不会写动画或者懒得写动画,就直接交给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;

 

标签:动画,Border,Button,WPF,Blend,我们
From: https://www.cnblogs.com/lvpp13/p/18384449

相关文章

  • 3D 建模和设计软件 Autodesk 3ds Max、Blender 和 AutoCAD 优缺点比较
    Autodesk3dsMax、Blender和AutoCAD是三款广泛使用的3D建模和设计软件,它们各有优缺点。以下是对这三款软件的比较:Autodesk3dsMax优点:强大的建模和渲染功能:提供丰富的建模工具和功能,特别适合建筑可视化、动画和游戏开发。强大的渲染引擎(如V-Ray、Arnold)支持高质量......
  • QT学习笔记2(QPushButton类、对象树、信号与槽,Lambdabiao表达式)
    那些难过的日子,都一起陪伴,也不说些什么大道理。难过的时候,所有人都给你讲一堆大道理。只有你的好朋友,懂你的沉默,陪你一起在墙角蹲着。对象树QT中创建QObject对象会时,构造函数会接收一个Parent父对象指针作为参数。这就于相当于创建QObject对象时,可以提供一个父类,创建的Q......
  • 一起搭WPF架构之界面绑定显示
    一起搭WPF架构之界面绑定显示1前言2定义文件3定义属性4控制器使用5界面内容绑定6界面效果总结1前言之前的许多介绍,已经完成界面搭建的熟悉内容,现在在搭建的基础上完成简单的界面切换。2定义文件我们在已有项目中需要定义两个CS文件,在这个两个CS文件中,我......
  • 一起搭WPF之列表数据绑定
    一起搭WPF之列表数据绑定1前言2数据绑定2.1前端2.2后端实现2.2.1界面后台2.2.2模型与逻辑3问题3.2解决总结1前言之前已经简单介绍了列表的大致设计,在设计完列表界面后,我们可以开展列表的数据绑定,在前端显示我们的数据,对列表进行数据输入。那么让我们开......
  • WPF 自定义路由事件的实现
    路由事件通过EventManager,RegisterRoutedEvent方法注册,通过AddHandler和RemoveHandler来关联和解除关联的事件处理函数;通过RaiseEvent方法来触发事件;通过传统的CLR事件来封装后供用户使用。如何实现自定义路由事件,可以参考MSDN官网上的文档:如何:创建自定义路由事件下面的这个......
  • WPF 数据校验
    一、新建NameValidationRule类publicclassNameValidationRule:ValidationRule{publicoverrideValidationResultValidate(objectvalue,CultureInfocultureInfo){varlength=value.ToString().Length;if(length......
  • WPF C# split picture into small pieces and show in grid cells
    usingSystem;usingSystem.Collections.Generic;usingSystem.Drawing;usingSystem.Linq;usingSystem.Text;usingSystem.Threading.Tasks;usingSystem.Windows;usingSystem.Windows.Controls;usingSystem.Windows.Data;usingSystem.Windows.Documents;using......
  • WPF 模板
    一、数据模板继承了ItemConrol的控件对象(如ListView、ListBox、DataGrid、TabControl等等),都可以使用数据模板DataTemplate。数据模板的作用在于决定每个Item中的数据的展示形式。普通控件通过Template属性来定义模板,而子项容器控件则通过ItemTemplate属性来定义子项模板。先创......
  • WPF中如何根据数据类型使用不同的数据模板
    我们在将一个数据集合绑定到列表控件时,有时候想根据不同的数据类型,显示为不同的效果。例如将一个文件夹集合绑定到ListBox时,系统文件夹显示为不同的效果,就可以使用模板选择器功能。WPF提供了一个模板选择器类型DataTemplateSelector,它可以根据数据对象和数据绑定元素来选择 Dat......
  • WPF 路由事件
    一、什么是路由事件?根据MSDN定义:功能定义:路由事件是一种可以针对元素树中的多个侦听器(而不是仅针对引发该事件的对象)调用处理程序的事件。实现定义:路由事件是由类的实例支持的CLR事件,RoutedEvent由事件WindowsPresentationFoundation(WPF)系统处理。典型的WPF应......