WPF自定义控件09:FlatWaveButton-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

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:FlatButton x: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>
        <ControlTemplate TargetType="{x:Type local:FlatButton}">
            <Grid ClipToBounds="True" Background="Transparent" MouseLeftButtonDown="Wave_MouseClick" >
                <Border CornerRadius="{TemplateBinding CornerRadius}" Background="{TemplateBinding Background}">
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
                <Path Fill="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},Path=WaveBackground}" 
                      Name="Wave_Path" >
                    <Path.Data>
                        <EllipseGeometry x: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核心代码,具体如下所示:

using System;
using System.Windows;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace Yd.WpfControls
{
    /// <summary>
    /// FlatWaveButton.xaml 的交互逻辑
    /// </summary>
    public partial class FlatWaveButton : FlatButton
    {
        public FlatWaveButton()
        {
            InitializeComponent();
        }
        public static readonly DependencyProperty WaveBackgroundProperty =
           DependencyProperty.Register("WaveBackground", typeof(Brush), typeof(FlatWaveButton),
               new PropertyMetadata(Brushes.White));
        /// <summary>
        /// 水波背景颜色
        /// </summary>
        public Brush WaveBackground
        {
            get { return (Brush)GetValue(WaveBackgroundProperty); }
            set { 
                SetValue(WaveBackgroundProperty, value);
            }
        }
        private void Wave_MouseClick(object sender, MouseButtonEventArgs e)
        {
            EllipseGeometry myellipse = Template.FindName("Wave_Ellipse", this) as EllipseGeometry;
            myellipse.Center = Mouse.GetPosition(this);
            DoubleAnimation dh = new DoubleAnimation()
            {
                From = 0,
                To = 138,
                Duration = new Duration(TimeSpan.FromSeconds(1.5))
            };
            myellipse.BeginAnimation(EllipseGeometry.RadiusXProperty, dh);

            DoubleAnimation dh02 = new DoubleAnimation()
            {
                From = 0.35,
                To = 0,
                Duration = new Duration(TimeSpan.FromSeconds(1.5))
            };

            Path mypath = Template.FindName("Wave_Path", this) as Path;
            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部分示例代码如下:

<Window
        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: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">
    <Grid Background="Green">
        <WpfControls:FlatWaveButton Content="FlatWaveButton" HorizontalAlignment="Center" 
            Margin="0,88,0,0" VerticalAlignment="Top" Height="66" Width="300"/>
    </Grid>
</Window>

运行界面如下:

5.jpg

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章