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); }