WPF+MVVM案例实战（十）- 水波纹按钮实现与控件封装

---

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 总结

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