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. 正则表达式_爬取豆瓣电影排行Top250

    前言: 利用简单的正则表达式,获取响应内容爬取数据. Part1 正则表达式(Regular Expression) 1.1 简介 正则表达式,又称规则表达式,它是一种文本模式,就是通过事先定义好的一 ...

  2. 《PHP基础知识总结》系列分享专栏

    总结PHP基础知识,对初学者还是高手都值得参考巩固. <PHP基础知识总结>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/2017 ...

  3. ESP32使用SPIFFS文件系统笔记

    基于ESP-IDF4.1 1 #include <stdio.h> 2 #include <string.h> 3 #include <sys/unistd.h> ...

  4. TCP和UDP知识总结

    1.TCP粘包:Tcp是面向连接.流式传送的,没有明确的边界定义.他有一个缓冲区,每过一段时间或者缓存满了就发送出去,造成一次发送的数据可能是多个包或者包的一部分,这就是发送端的粘包.接收端的粘包指应 ...

  5. SpringBoot自动装配原理之Configuration以及@Bean注解的使用

    Configuration以及Bean注解的使用 该知识点在Spring中应该学过,没有学过或者遗忘的的朋友需要预习或温习前置知识点.SpringBoot其实就是Spring的进一步简化,所以前置知识 ...

  6. vscode搭建python环境

    这两天刚下了一个pycharm,结果使用之后将vscode给崩了,重装的时候有些步骤也记不清,走了一些弯路,做个总结来记录一下(本人觉得vscode比pycharm好用一点). Python下载安装 ...

  7. SpringMVC中@Controller和@RequestMapping用法

    一.简介 在SpringMVC 中,控制器Controller 负责处理由DispatcherServlet 分发的请求,它把用户请求的数据经过业务处理层处理之后封装成一个Model ,然后再把该Mo ...

  8. Python语言对Json对象进行新增替换操作

    # Json字符串进行新增操作import jsonimport os# os.path.dirname(__file__):表示当前目录path = os.path.join(os.path.dir ...

  9. 剑指offer-子树结构

    描述 输入两棵二叉树A,B,判断B是不是A的子结构.(ps:我们约定空树不是任意一个树的子结构)   求解思路: 首先肯定是找到树A中等于树B根节点的节点. A和B按照同样的遍历顺序比较,如果全相同A ...

  10. 【并查集模板】并查集模板 luogu-3367

    题目描述 简单的并查集模板 输入描述 第一行包含两个整数N.M,表示共有N个元素和M个操作. 接下来M行,每行包含三个整数Zi.Xi.Yi 当Zi=1时,将Xi与Yi所在的集合合并 当Zi=2时,输出 ...