WPF按钮实现水波纹效果
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按钮实现水波纹效果的更多相关文章
- jquery ripples水波纹效果( 涟漪效果)
这个效果是我从bootstrap-material-design上面分离下来的,bootstrap-material-design的一些组件样式我不太不喜欢,但是非常喜欢这个水波纹效果,所以就有了这篇 ...
- Android自定义控件-Path之贝赛尔曲线和手势轨迹、水波纹效果
从这篇开始,我将延续androidGraphics系列文章把图片相关的知识给大家讲完,这一篇先稍微进阶一下,给大家把<android Graphics(二):路径及文字>略去的quadTo ...
- Android点击Button水波纹效果
先上图,看看接下来我要向大家介绍的是个什么东西,例如以下图: 接下来要介绍的就是怎样实现上述图中的波纹效果.这样的效果假设大家没有体验过的话,能够看看百度手机卫士或者360手机卫士,里面的按钮点击效果 ...
- 如何使用 HTML5 Canvas 制作水波纹效果
今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...
- 兼容Android的水波纹效果
Android的水波纹效果只有高版本才有,我们希望自己的应用在低版本用低版本的阴影,高版本用水波纹,这怎么做呢?其实,只要分drawable和drawablev21两个文件夹就好了. 普通情况下的se ...
- android自定义控件(4)-自定义水波纹效果
一.实现单击出现水波纹单圈效果: 照例来说,还是一个自定义控件,观察这个效果,发现应该需要重写onTouchEvent和onDraw方法,通过在onTouchEvent中获取触摸的坐标,然后以这个坐标 ...
- 自定义view实现水波纹效果
水波纹效果: 1.标准正余弦水波纹: 2.非标准圆形液柱水波纹: 虽说都是水波纹,但两者在实现上差异是比较大的,一个通过正余弦函数模拟水波纹效果,另外一个会运用到图像的混合模式(PorterDuffX ...
- Android 颜色渲染(七) RadialGradient 环形渲染实现水波纹效果
利用环形渲染我们可以做到什么? 其实很多都是非常常见的,比如上一篇实现的帮帮糖效果, 彩色的热气球,比如这里要讲到的水波纹效果,或者也可以理解为扩散色渲染效果 首先看一下效果图: 轻触屏幕,即可看到对 ...
- 聊聊Android5.0中的水波纹效果
水波纹效果已经不是什么稀罕的东西了,用过5.0新控件的小伙伴都知道这个效果,可是如果使用一个TextView或者Button或者其它普通控件的话,你是否知道如何给它设置水波纹效果呢?OK,我们今天就来 ...
随机推荐
- hdu 6034 贪心模拟 好坑
关键在排序!!! 数组间的排序会超时,所以需要把一个数组映射成一个数字,就可以了 #include <bits/stdc++.h> using namespace std; typedef ...
- 互联网时代CRM软件帮助企业销售升级
随着信息技术的发展,互联网+的浪潮逐渐改变了我们的生活.对于企业来说,他们的管理模式和服务模式也需要作出改变,企业不再满足只进行内部业务的优化和管理,传统CRM开始不再符合企业的需求.由此可见,在网络 ...
- SonarQube集成Gitlab
SonarQube配置gitlab Gitlab创建访问Token 拷贝此Token至Sonarqube进行配置 检查配置配置成功 可以看到权限内的项目
- Kafka:Springboot整合Kafka消息队列
本文主要分享下Spring Boot和Spring Kafka如何配置整合,实现发送和接收来自Spring Kafka的消息. 项目结构 pom依赖包 <?xml version="1 ...
- 资源:Maven相关jar快速下载地址
Maven下载海外jar包太慢,可以进入下面地址搜索下载 下载地址:https://www.findjar.com/
- 第二章 - Java与协程
Java与协程 内核线程的局限 通过一个具体场景来解释目前Java线程面临的困境.今天对Web应用的服务要求,不论是在请求数量上还是在复杂度上,与十多年前相比已不可同日而语,这一方面是源于业务量的增长 ...
- mysql 去重的两种方式
1.distinct一般用于获取不重复字段的条数 使用原则: 1)distinct必须放在要查询字段的开头,不能放在查询字段的中间或者后面 select distinct name from user ...
- Java基础00-多线程28
1. 实现多线程 1.1 进程 1.2 线程 1.3 多线程的实现方式(方式一:继承Thread类) 代码示例:定义类MyThread: //1:定义一个类MyThread继承Thread类 publ ...
- Redis学习——简介
一.Redis简介 Redis是一种基于键值对(key-value)的NoSQL数据库,与很多键值对数据库不同的是,Redis中的值可以是由string(字符串).hash(哈希).list(列表). ...
- 微信小程序云开发-云存储的应用-识别行驶证
一.准备工作 1.创建云函数identify 2.云函数identify中index.js代码 1 // 云函数入口文件 2 const cloud = require('wx-server-sdk' ...