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

posted @ 2020-07-02 15:16  可乐_加冰  阅读(1640)  评论(0编辑  收藏  举报