---

1、运行效果

1、封装用户控件

1、创建文件

打开 Wpf_Examples 项目，在 UserControlLib 用户控件库中创建按钮文件 WaterRipplesButton.xaml ，修改 UserContol 标签为 Button 标签，编写按钮模板和依赖属性，具体代码如下：

<Button x:Class="UserControlLib.WaterRipplesButton"
             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" 
             xmlns:local="clr-namespace:UserControlLib"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">

    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Grid ClipToBounds="True" Background="{TemplateBinding Background}" MouseLeftButtonDown="Grid_MouseLeftButtonDown">
                <Border>
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
                <Path Fill="White" Name="MyPath">
                    <Path.Data>
                        <EllipseGeometry x:Name="MyEllipse" RadiusX="0" RadiusY="{Binding RelativeSource={RelativeSource Mode=Self},Path=RadiusX}">

                        </EllipseGeometry>
                    </Path.Data>
                </Path>
            </Grid>
        </ControlTemplate>
    </Button.Template>
</Button>

2、依赖属性实现

namespace UserControlLib
{
    /// <summary>
    /// WaterRipplesButton.xaml 的交互逻辑
    /// </summary>
    public partial class WaterRipplesButton : Button
    {
        public WaterRipplesButton()
        {
            InitializeComponent();
        }

        private void Grid_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            var target = Template.FindName("MyEllipse", 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);
        }
    }
}

2、使用封装的按钮控件

1.主界面引用

代码如下（示例）：

        xmlns:uc="clr-namespace:UserControlLib;assembly=UserControlLib"

2.按钮属性设置

<Window x:Class="Wpf_Examples.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:converter="clr-namespace:Wpf_Examples.Converters"
        xmlns:local="clr-namespace:Wpf_Examples"
        xmlns:cc="clr-namespace:CustomControlLib;assembly=CustomControlLib"
        xmlns:uc="clr-namespace:UserControlLib;assembly=UserControlLib"
        DataContext="{Binding Source={StaticResource Locator},Path=Main}"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800" WindowStartupLocation="CenterScreen">
    <Grid>
        <WrapPanel>
            <Button Width="120" Height="40" FontSize="18" Content="霓虹灯字特效" Command="{Binding ButtonClickCmd}" CommandParameter="{Binding RelativeSource={RelativeSource Mode=Self},Path=Content}" Margin="8"/>
            <uc:WaterRipplesButton Width="120" Height="40" Background="#23238D" Foreground="White" FontSize="15" Content="水波纹按钮" Margin="8"/>
        </WrapPanel>
    </Grid>
</Window>

3 总结

整体来说还是比较简单的实现，源代码已经全部在界面样式中了，喜欢的小伙伴可以拷贝使用。