xaml代码如下

<Button x:Class="UI.btn.ZButton"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
xmlns:i="http://schemas.microsoft.com/xaml/behaviors" xmlns:btn="clr-namespace:UI.btn"
d:DesignHeight="450" d:DesignWidth="800" Cursor="Hand">
<Button.Template>
<ControlTemplate TargetType="Button" >
<Grid ClipToBounds="True" Background="{TemplateBinding Background}" MouseLeftButtonDown="Grid_MouseLeftButtonDown" >
<Border>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" >
</ContentPresenter>
</Border>
<Path Fill="Black" x:Name="MyPath">
<Path.Data>
<EllipseGeometry x:Name="MyEllip" Center="{Binding MyProperty}" RadiusX="0" RadiusY="{Binding RelativeSource={RelativeSource Mode=Self},Path=RadiusX}">
</EllipseGeometry>
</Path.Data>
</Path>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>

CS代码

private void Grid_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
var target=Template.FindName("MyEllip", this) as EllipseGeometry;
target.Center = Mouse.GetPosition(this);
var animation = new DoubleAnimation()
{
From=0,
To=150,
Duration=new Duration(TimeSpan.FromSeconds(1))
};
target.BeginAnimation(EllipseGeometry.RadiusXProperty, animation);
var animation2 = new DoubleAnimation()
{
From = 0.3,
To = 0,
Duration = new Duration(TimeSpan.FromSeconds(1))
};
var target2= Template.FindName("MyPath",this) as Path;
target2.BeginAnimation(Path.OpacityProperty, animation2);
}

WPF按钮实现水波纹效果的更多相关文章

  1. jquery ripples水波纹效果( 涟漪效果)

    这个效果是我从bootstrap-material-design上面分离下来的,bootstrap-material-design的一些组件样式我不太不喜欢,但是非常喜欢这个水波纹效果,所以就有了这篇 ...

  2. Android自定义控件-Path之贝赛尔曲线和手势轨迹、水波纹效果

    从这篇开始,我将延续androidGraphics系列文章把图片相关的知识给大家讲完,这一篇先稍微进阶一下,给大家把<android Graphics(二):路径及文字>略去的quadTo ...

  3. Android点击Button水波纹效果

    先上图,看看接下来我要向大家介绍的是个什么东西,例如以下图: 接下来要介绍的就是怎样实现上述图中的波纹效果.这样的效果假设大家没有体验过的话,能够看看百度手机卫士或者360手机卫士,里面的按钮点击效果 ...

  4. 如何使用 HTML5 Canvas 制作水波纹效果

    今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...

  5. 兼容Android的水波纹效果

    Android的水波纹效果只有高版本才有,我们希望自己的应用在低版本用低版本的阴影,高版本用水波纹,这怎么做呢?其实,只要分drawable和drawablev21两个文件夹就好了. 普通情况下的se ...

  6. android自定义控件(4)-自定义水波纹效果

    一.实现单击出现水波纹单圈效果: 照例来说,还是一个自定义控件,观察这个效果,发现应该需要重写onTouchEvent和onDraw方法,通过在onTouchEvent中获取触摸的坐标,然后以这个坐标 ...

  7. 自定义view实现水波纹效果

    水波纹效果: 1.标准正余弦水波纹: 2.非标准圆形液柱水波纹: 虽说都是水波纹,但两者在实现上差异是比较大的,一个通过正余弦函数模拟水波纹效果,另外一个会运用到图像的混合模式(PorterDuffX ...

  8. Android 颜色渲染(七) RadialGradient 环形渲染实现水波纹效果

    利用环形渲染我们可以做到什么? 其实很多都是非常常见的,比如上一篇实现的帮帮糖效果, 彩色的热气球,比如这里要讲到的水波纹效果,或者也可以理解为扩散色渲染效果 首先看一下效果图: 轻触屏幕,即可看到对 ...

  9. 聊聊Android5.0中的水波纹效果

    水波纹效果已经不是什么稀罕的东西了,用过5.0新控件的小伙伴都知道这个效果,可是如果使用一个TextView或者Button或者其它普通控件的话,你是否知道如何给它设置水波纹效果呢?OK,我们今天就来 ...

随机推荐

  1. POJ 1016 Numbers That Count 不难,但要注意细节

    题意是将一串数字转换成另一种形式.比如5553141转换成2个1,1个3,1个4,3个5,即21131435.1000000000000转换成12011.数字的个数是可能超过9个的.n个m,m是从小到 ...

  2. AcWing 239. 奇偶游戏

    小A和小B在玩一个游戏. 首先,小A写了一个由0和1组成的序列S,长度为N. 然后,小B向小A提出了M个问题. 在每个问题中,小B指定两个数 l 和 r,小A回答 S[l~r] 中有奇数个1还是偶数个 ...

  3. Docker | Docker常用命令学习笔记

    @ 目录 前言 1. 帮助命令: version.info.help 2. 镜像命令: images.search pull.rmi 3. 容器命令: pull.run ps.exit .ctrl+P ...

  4. spring data jpa执行update和delete语句时报错处理

    之前项目中使用spring data jpa时,遇到删除记录的需求时,主要利用spring data中自带的delete()方法处理,最近在dao层使用delete sql语句时报错,代码如下: @Q ...

  5. docker基本操作和部署

    #安装所需的软件包.yum-utils 提供了 yum-config-manager ,并且 device mapper 存储驱动程序需要 device-mapper-persistent-data ...

  6. Linux学习之路第四天(运行级别)

    linux 实用指令 指定运行级别 运行级别说明 0 :关机 1:单用户(找回丢失密码) 2.多用户状态没有网络服务 3.多用户状态有网络服务 4.系统未保留给用户 5.图形界面 6.系统重启 常用的 ...

  7. ESP32-FAT文件系统使用磨损均衡存储文件笔记

    基于ESP-IDF4.1 1 /* 2 FAT文件系统存储文件,使用磨损均衡库wear-leveling 3 */ 4 5 #include <stdlib.h> 6 #include & ...

  8. npm run start失败&Node.js 查询指定端口运行情况及终止占用端口办法

    缘由: node.js项目中运行npm run start命令脚本报错,No such file or directory 最开始以为是命令脚本找不到所谓的执行路径,但后面发现不是,是package. ...

  9. 手写笔记变PDF-几行代码变命令行程序为图形化界面

    前言 最近发现了一个非常不错的Python类库----Gooey, https://github.com/chriskiehl/Gooey 在它的帮助下我们可以非常方便的将一个命令行程序升级成一个图形 ...

  10. HTTP工作过程(浏览器输入URL到返回HTML页面都经历了什么)

    超文本传送协议(HyperText Transport Protocol,HTTP)是互联网上应用最为广泛的一种网络协议,它工作在应用层,使用TCP的80号端口提供服务.并且HTTP是工作在客户/服务 ...