WPF自定义控件09:FlatWaveButton

简介: 按钮在很多应用程序中都是必不可少的控件,如果给按钮控件添加一些动画效果,比如单击它后会显示一个水波纹扩散的动画效果,那么感觉上更加的高级。本文将介绍一下自定义水波纹按钮控件FlatWaveButton,它是一个UserControl(FlatButton)控件,自身携带UI样式和后台逻辑。

    按钮在很多应用程序中都是必不可少的控件,如果给按钮控件添加一些动画效果,比如单击它后会显示一个水波纹扩散的动画效果,那么感觉上更加的高级。本文将介绍一下自定义水波纹按钮控件FlatWaveButton,它是一个UserControl(FlatButton)控件,自身携带UI样式和后台逻辑。下面将详细介绍具体的实现细节。

1 WPF项目结构


    基于之前创建的WPF示例项目,在其中创建一个新的关于FlatWaveButton的用户控件项目文件。添加过程如下图所示:

1.jpg

添加成功后,本项目文件结构,如下图所示:

2.jpg

与之前的自定义控件不同,用户控件类型的项目文件UI和后台逻辑是在一起的,这样也非常的方便。另外,这种方式创建的自定义控件不需要将其注册到Generic.xaml文件中。

2 WPF FlatWaveButton实现


    首先,在控件的UI界面上,UserControl类的控件原生带有UI布局,即像一个窗口一样,可以通过拖入已有的控件进行UI设计,因此从布局到功能上都更加的方便。FlatWaveButton控件,布局界面如下:

3.jpg

其中的核心代码如下:

<local:FlatButtonx:Class="Yd.WpfControls.FlatWaveButton"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:Yd.WpfControls"mc:Ignorable="d"CornerRadius="16"VerticalContentAlignment="Center"HorizontalContentAlignment="Center"d:DesignHeight="32"d:DesignWidth="100"><local:FlatButton.Template><ControlTemplateTargetType="{x:Type local:FlatButton}"><GridClipToBounds="True"Background="Transparent"MouseLeftButtonDown="Wave_MouseClick"><BorderCornerRadius="{TemplateBinding CornerRadius}"Background="{TemplateBinding Background}"><ContentPresenterHorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/></Border><PathFill="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},Path=WaveBackground}"Name="Wave_Path"><Path.Data><EllipseGeometryx:Name="Wave_Ellipse"RadiusX="0"RadiusY="{Binding RelativeSource={RelativeSource Mode=Self},Path=RadiusX}"></EllipseGeometry></Path.Data></Path></Grid></ControlTemplate></local:FlatButton.Template></local:FlatButton>

其中用户控件默认的usercontrol修改为local:FlatButton,且自定义了ControlTemplate模板信息,这里用Path进行了路径的定义,其中的路径数据是通过EllipseGeometry实现的,它通过动态修改RadiusX和RadiusY实现一个动态水波纹的效果。当然这个动画后台进行实现。下面给出FlatWaveButton.xaml.cs核心代码,具体如下所示:

usingSystem;
usingSystem.Windows;
usingSystem.Windows.Input;
usingSystem.Windows.Media;
usingSystem.Windows.Media.Animation;
usingSystem.Windows.Shapes;
namespaceYd.WpfControls{
/// <summary>/// FlatWaveButton.xaml 的交互逻辑/// </summary>publicpartialclassFlatWaveButton : FlatButton    {
publicFlatWaveButton()
        {
InitializeComponent();
        }
publicstaticreadonlyDependencyPropertyWaveBackgroundProperty=DependencyProperty.Register("WaveBackground", typeof(Brush), typeof(FlatWaveButton),
newPropertyMetadata(Brushes.White));
/// <summary>/// 水波背景颜色/// </summary>publicBrushWaveBackground        {
get { return (Brush)GetValue(WaveBackgroundProperty); }
set { 
SetValue(WaveBackgroundProperty, value);
            }
        }
privatevoidWave_MouseClick(objectsender, MouseButtonEventArgse)
        {
EllipseGeometrymyellipse=Template.FindName("Wave_Ellipse", this) asEllipseGeometry;
myellipse.Center=Mouse.GetPosition(this);
DoubleAnimationdh=newDoubleAnimation()
            {
From=0,
To=138,
Duration=newDuration(TimeSpan.FromSeconds(1.5))
            };
myellipse.BeginAnimation(EllipseGeometry.RadiusXProperty, dh);
DoubleAnimationdh02=newDoubleAnimation()
            {
From=0.35,
To=0,
Duration=newDuration(TimeSpan.FromSeconds(1.5))
            };
Pathmypath=Template.FindName("Wave_Path", this) asPath;
mypath.BeginAnimation(OpacityProperty, dh02);
        }
    }
}

当我们单击控件时,首先通过Template.FindName("Wave_Ellipse", this) as EllipseGeometry获取到名为Wave_Ellipse对象,并根据Mouse.GetPosition(this)获取到鼠标位置,作为myellipse的中心,这样圆形就从鼠标位置进行生成。关于动画是用内置的DoubleAnimation实现的,它有两个作用,一个是动态修改EllipseGeometry.RadiusXProperty的属性值,即半径大小。另外一个就是动态修改名为Wave_Path的Path对象的透明度。

3 WPF FlatWaveButton测试


    首先,需要重新生成一下项目文件,然后在WpfControls项目中添加一个窗口Window7,并在此窗口中添加自定义控件FlatWaveButton,Window7.xaml部分示例代码如下:

<Windowxmlns="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:local="clr-namespace:WpfControls"xmlns:WpfControls="clr-namespace:Yd.WpfControls;assembly=Yd.WpfControls"x:Class="WpfControls.Window7"mc:Ignorable="d"Title="Window7"Height="350"Width="500"><GridBackground="Green"><WpfControls:FlatWaveButtonContent="FlatWaveButton"HorizontalAlignment="Center"Margin="0,88,0,0"VerticalAlignment="Top"Height="66"Width="300"/></Grid></Window>

运行界面如下:

5.jpg

相关文章
WPF自定义控件05:ToggleButton
本文重点介绍WPF中如何实现自定义ToggleButton控件,它是一个开关控件,通过单击来进行状态的快速切换。
5057 0
WPF自定义控件05:ToggleButton
|
人工智能 C#
WPF自定义控件库之Window窗口
本文以自定义窗口为例,简述WPF开发中如何通过自定义控件来扩展功能和样式,仅供学习分享使用,如有不足之处,还请指正。
242 5
|
XML C# 数据格式
WPF中用户控件和自定义控件
无论是在WPF中还是WinForm中,都有用户控件(UserControl)和自定义控件(CustomControl),这两种控件都是对已有控件的封装,实现功能重用。但是两者还是有一些区别,本文对这两种控件进行讲解。
|
数据可视化 前端开发 C#
WPF自定义控件的三种方式
某些场景下,我们确实需要创建新的控件。此时,理解 WPF不同控件的创建方法就显得非常重要。 WPF 提供3个用于创建控件的方法,每个方法都提供不同的灵活度。
890 1
WPF自定义控件的三种方式
|
C# 容器
WPF自定义控件10:FlatListView
在不少的应用程序中,有时候需要使用ListView控件来显示一组集合数据,这样可以从一组数据中进行选择,让数据更加的规范,便于统计和分析。本文将介绍一下自定义的列表控件FlatListView,它与FlatCheckBox实现过程非常类似,它是继承自ListView,但使用自定义的UI样式来美化界面。
577 0
WPF自定义控件10:FlatListView
|
Web App开发 C#
WPF自定义控件08:FlatRoundImage
在不少的应用程序中,用户中心的个人页面经常需要显示头像,这个当前主流的做法就是用户上传一个图片,系统进行截取并显示为一个圆形的轮廓,即圆形的照片。本文将介绍一下自定义的图片控件FlatRoundImage,它是一个UserControl控件,自身携带UI样式和后台逻辑。
653 0
WPF自定义控件08:FlatRoundImage
WPF自定义控件07:FlatTextBox
本文将介绍一下自定义的文本框控件FlatTextBox,它与FlatCheckBox实现过程非常类似,它是继承自TextBox,但使用自定义的UI样式来美化界面,并添加了特有的一些依赖属性。
537 0
WPF自定义控件07:FlatTextBox
WPF自定义控件06:FlatComboBox
在不少的应用程序中,经常需要使用下拉框(ComboBox)控件来从类别字段中选择,这样可以限定值的范围,让数据更加的规范,便于统计和分析。本文将介绍一下自定义的下拉框控件FlatComboBox,它与FlatCheckBox实现过程非常类似,它是继承自ComboBox,但使用自定义的UI样式来美化界面。下面将详细介绍具体的实现细节。
833 0
WPF自定义控件06:FlatComboBox
WPF自定义控件04:FlatRadioButton
本文通过在WPF中引入Font Awesome图标字体来实现自定义FlatRadioButton控件的UI绘图。用户只需要在窗体上引入自定义的FlatRadioButton控件即可使用具有Flat UI效果的控件,非常方便。
610 0
WPF自定义控件04:FlatRadioButton
WPF自定义控件03:FlatCheckBox
本文通过在WPF中引入Font Awesome图标字体来实现自定义FlatCheckBox控件的UI绘图。用户只需要在窗体上引入自定义的FlatCheckBox控件即可使用具有Flat UI效果的控件,非常方便。
727 0
WPF自定义控件03:FlatCheckBox