UWP：使用Behavior实现Button点击动态效果

废话不多说，先上效果

没有做成安卓那种圆形的原因是...人家真的不会嘛...

好了下面是正文：

首先在工程中引入Behavior的库，我们使用Nuget。

在项目->引用上点击右键，点击管理Nuget程序包，然后浏览里搜索Microsoft.Xaml.Behaviors.Uwp.Managed

或者在程序包管理控制台里（如果输出右边没有这个标签，使用工具->Nuget包管理器->程序包管理控制台打开），输入命令

Install-Package Microsoft.Xaml.Behaviors.Uwp.Managed

回车，坐等，引入成功。

然后我们新建一个类，名字叫ButtonBehavior，继承IBehavior接口，并且实现Attach和Detach方法（不用傻傻的敲，自动补全就可以）。

这时文档的结构是这样的：

namespace MyBehavior
{
    public class Base : DependencyObject, IBehavior
    {
        public DependencyObject AssociatedObject { get; set; }
        public void Attach(DependencyObject associatedObject)
        {
            AssociatedObject  = associatedObject;
            //这里写代码
        }
        public void Detach()
        {

        }
    }
}

给控件设置Behavior时，程序会通过Attach方法，将控件传到我们的类里，也就是associatedObject。

接着，当然是使用Composition了。。。我又不会别的。

先声明一堆准备用的对象：

double SizeValue;
double ScaleValue;

Compositor compositor;

Visual hostVisual;
ContainerVisual containerVisual;
SpriteVisual rectVisual;

ScalarKeyFrameAnimation PressSizeAnimation;
ScalarKeyFrameAnimation PressOffsetAnimation;
ScalarKeyFrameAnimation PressOpacityAnimation;
CompositionAnimationGroup PressAnimationGroup;

ScalarKeyFrameAnimation ReleaseSizeAnimation;
ScalarKeyFrameAnimation ReleaseOffsetAnimation;
ScalarKeyFrameAnimation ReleaseOpacityAnimation;
CompositionAnimationGroup ReleaseAnimationGroup;

然后该处理一下可爱的AssociatedObject了：

public virtual void Attach(DependencyObject associatedObject)
{
    AssociatedObject = associatedObject;
    if (AssociatedObject is FrameworkElement element)
    {
        if (element.ActualWidth > 0 && element.ActualHeight > 0)
            Init();
        else element.Loaded += Element_Loaded;

        hostVisual = ElementCompositionPreview.GetElementVisual(element);
        compositor = hostVisual.Compositor;
        element.AddHandler(UIElement.PointerPressedEvent, new PointerEventHandler(Element_PointerPressed), true);
        element.AddHandler(UIElement.PointerReleasedEvent, new PointerEventHandler(Element_PointerReleased), true);
    }
    else return;
}

这里挂上Loaded事件是因为，如果控件没有加载完成之前设置了Behavior，我们在Attach里获取到的数据就不全了。

然后是Init方法，这是整个Behavior的核心：

void Init()
{
    if (AssociatedObject is FrameworkElement element)
    {
        hostVisual = ElementCompositionPreview.GetElementVisual(element); //获取控件Visual
        compositor = hostVisual.Compositor;  //获取Compositor，Composition的大多数对象都需要他来创建

        var temp = ElementCompositionPreview.GetElementChildVisual(element);
        if (temp is ContainerVisual tempContainerVisual) containerVisual = tempContainerVisual;
        else
        {
            containerVisual = compositor.CreateContainerVisual();  //创建ContainerVisual
            ElementCompositionPreview.SetElementChildVisual(element, containerVisual);  //把ContainerVisual设置成控件的子Visual
        }

    }
}

这里有个小坑，ElementCompositionPreview类里，只有SetElementChildVisual方法，却并没有RemoveChildVisual的方法。所以我们给按钮插入一个子ContainerVisual，ContainerVisual可以所谓容器盛放其他Visual，并且，可以移除。如果不这么做，移除Behavior的时候会爆错。

然后写动画，动画分为两部分，分别是按下和释放。我的思路是这样，鼠标按下时，获取到起始坐标，把让特效Visual移动到起始横坐标的位置，然后让特效Visual的宽度从0到和控件宽度一样大，与此同时，特效Visual从起始位置（(0,0)的右边）慢慢向左移动，这样就能制作出一个向外扩散的效果。

思路有了，继续写Init方法：

void Init()
{
    if (AssociatedObject is FrameworkElement element)
    {
        hostVisual = ElementCompositionPreview.GetElementVisual(element); //获取控件Visual
        compositor = hostVisual.Compositor;  //获取Compositor，Composition的大多数对象都需要他来创建

        var temp = ElementCompositionPreview.GetElementChildVisual(element);
        if (temp is ContainerVisual tempContainerVisual) containerVisual = tempContainerVisual;
        else
        {
            containerVisual = compositor.CreateContainerVisual();  //创建ContainerVisual
            ElementCompositionPreview.SetElementChildVisual(element, containerVisual);  //把ContainerVisual设置成控件的子Visual
        }

        rectVisual = compositor.CreateSpriteVisual();  //创建我们的正主，特效Visual

        var bindSizeAnimation = compositor.CreateExpressionAnimation("hostVisual.Size.Y");
        bindSizeAnimation.SetReferenceParameter("hostVisual", hostVisual);
        rectVisual.StartAnimation("Size.Y", bindSizeAnimation);
        //创建一个表达式动画，把我们自己创建的特效Visual的高度和控件Visual的高度绑定到一起

        rectVisual.Brush = compositor.CreateColorBrush(Windows.UI.Colors.Black);  //设置特效Visual的笔刷
        rectVisual.Opacity = 0f;  //设置特效Visual的初始透明度

        containerVisual.Children.InsertAtTop(rectVisual);  把特效Visual插入到ContainerVisual的顶部
        var easeIn = compositor.CreateCubicBezierEasingFunction(new Vector2(0.5f, 0.0f), new Vector2(1.0f, 1.0f));
        //创建一个关键帧动画用到的贝塞尔曲线

        PressSizeAnimation = compositor.CreateScalarKeyFrameAnimation();
        PressSizeAnimation.InsertKeyFrame(0f, 0f, easeIn);
        PressSizeAnimation.InsertExpressionKeyFrame(1f, "hostVisual.Size.X", easeIn);
        PressSizeAnimation.SetReferenceParameter("hostVisual", hostVisual);
        PressSizeAnimation.Duration = TimeSpan.FromSeconds(1);
        PressSizeAnimation.StopBehavior = AnimationStopBehavior.LeaveCurrentValue;  //动画中途暂停时，将动画的当前值设定到对象上
        PressSizeAnimation.Target = "Size.X";
        //创建按下后，特效Visual的宽度的关键帧动画，持续1秒

        PressOffsetAnimation = compositor.CreateScalarKeyFrameAnimation();
        PressOffsetAnimation.InsertExpressionKeyFrame(0f, "This.CurrentValue", easeIn);
        PressOffsetAnimation.InsertKeyFrame(1f, 0f, easeIn);
        PressOffsetAnimation.Duration = TimeSpan.FromSeconds(1);
        PressOffsetAnimation.StopBehavior = AnimationStopBehavior.LeaveCurrentValue;
        PressOffsetAnimation.Target = "Offset.X";
        //创建按下后，特效Visual的横向偏移的关键帧动画，持续1秒

        PressOpacityAnimation = compositor.CreateScalarKeyFrameAnimation();
        PressOpacityAnimation.InsertKeyFrame(0f, 0.3f, easeIn);
        PressOpacityAnimation.InsertKeyFrame(1f, 0.5f, easeIn);
        PressOpacityAnimation.Duration = TimeSpan.FromSeconds(1);
        PressOpacityAnimation.StopBehavior = AnimationStopBehavior.LeaveCurrentValue;
        PressOpacityAnimation.Target = "Opacity";
        //创建按下后，特效Visual的透明度的关键帧动画，持续1秒

        PressAnimationGroup = compositor.CreateAnimationGroup();
        PressAnimationGroup.Add(PressSizeAnimation);
        PressAnimationGroup.Add(PressOffsetAnimation);
        PressAnimationGroup.Add(PressOpacityAnimation);
        //创建一个动画组，把上面三个动画放在一起，类似Storyboard

        ReleaseSizeAnimation = compositor.CreateScalarKeyFrameAnimation();
        ReleaseSizeAnimation.InsertExpressionKeyFrame(0f, "This.CurrentValue", easeIn);

        //This.CurrentValue是表达式动画中的一个特殊用法，可以将设置的属性的当前值传递给动画

        ReleaseSizeAnimation.InsertExpressionKeyFrame(1f, "hostVisual.Size.X", easeIn);
        ReleaseSizeAnimation.SetReferenceParameter("hostVisual", hostVisual);
        ReleaseSizeAnimation.Duration = TimeSpan.FromSeconds(0.2);
        ReleaseSizeAnimation.StopBehavior = AnimationStopBehavior.LeaveCurrentValue;
        ReleaseSizeAnimation.Target = "Size.X";
        //创建释放后，特效Visual的宽度的关键帧动画，持续0.2秒。

        ReleaseOffsetAnimation = compositor.CreateScalarKeyFrameAnimation();
        ReleaseOffsetAnimation.InsertExpressionKeyFrame(0f, "This.CurrentValue", easeIn);
        ReleaseOffsetAnimation.InsertKeyFrame(1f, 0f, easeIn);
        ReleaseOffsetAnimation.Duration = TimeSpan.FromSeconds(0.2);
        ReleaseOffsetAnimation.StopBehavior = AnimationStopBehavior.LeaveCurrentValue;
        ReleaseOffsetAnimation.Target = "Offset.X";
        //创建释放后，特效Visual的横向偏移的关键帧动画，持续0.2秒。

        ReleaseOpacityAnimation = compositor.CreateScalarKeyFrameAnimation();
        ReleaseOpacityAnimation.InsertExpressionKeyFrame(0f, "This.CurrentValue", easeIn);
        ReleaseOpacityAnimation.InsertKeyFrame(1f, 0f, easeIn);
        ReleaseOpacityAnimation.Duration = TimeSpan.FromSeconds(0.2);
        ReleaseOpacityAnimation.DelayTime = TimeSpan.FromSeconds(0.2);
        ReleaseOpacityAnimation.StopBehavior = AnimationStopBehavior.LeaveCurrentValue;
        ReleaseOpacityAnimation.Target = "Opacity";
        //创建释放后，特效Visual的透明度的关键帧动画，持续0.2秒。

        ReleaseAnimationGroup = compositor.CreateAnimationGroup();
        ReleaseAnimationGroup.Add(ReleaseSizeAnimation);
        ReleaseAnimationGroup.Add(ReleaseOffsetAnimation);
        ReleaseAnimationGroup.Add(ReleaseOpacityAnimation);
        //创建动画组
    }
}

万事俱备，只欠东风，还记得Attach方法里给控件挂上的PointerPressed和PointerReleased方法不？

这里不能用+=和-=，因为Pointer的事件很特殊（怎么个说法记不清了），必须要用到AddHandler的最后一个参数，HandlerEventToo为true，才能正确的处理。

private void Element_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    if (AssociatedObject is FrameworkElement element)
    {
        var point = e.GetCurrentPoint(element).Position.ToVector2();  //获取点击相对于控件的坐标

        rectVisual.StopAnimationGroup(PressAnimationGroup);
        rectVisual.StopAnimationGroup(ReleaseAnimationGroup);
        //停止正在播放的动画

        rectVisual.Offset = new Vector3(point.X, 0f, 0f);  //设置特效Visual的起始横坐标为点击的横坐标，纵坐标为0
        rectVisual.StartAnimationGroup(PressAnimationGroup);  //开始按下的动画
    }

}

private void Element_PointerReleased(object sender, PointerRoutedEventArgs e)
{
    rectVisual.StopAnimationGroup(PressAnimationGroup);
    rectVisual.StopAnimationGroup(ReleaseAnimationGroup);
    //停止正在播放的动画
    rectVisual.StartAnimationGroup(ReleaseAnimationGroup);  //开始释放的动画
}

最后再写一个Detach方法擦屁股就大功告成了：

public void Detach()
{
    if (AssociatedObject is UIElement element)
    {
        element.RemoveHandler(UIElement.PointerPressedEvent, new PointerEventHandler(Element_PointerPressed));
        element.RemoveHandler(UIElement.PointerReleasedEvent, new PointerEventHandler(Element_PointerReleased));
    }
    //卸载事件

    rectVisual.StopAnimationGroup(PressAnimationGroup);
    rectVisual.StopAnimationGroup(ReleaseAnimationGroup);
    //停止动画

    containerVisual.Children.Remove(rectVisual);
    //移除特效Visual
}

很轻松，不是吗？

使用方法也很简单：

<Page
    ...
    xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
    xmlns:MyBehaviors="using:MyBehaviors"

    ...

    <Button>
        <Interactivity:Interaction.Behaviors>
            <MyBehaviors:ButtonBehavior />
        </Interactivity:Interaction.Behaviors>
    </Button>

把大象关冰箱，统共分几步？

1、设置behavior，获取到控件对象；

2、在behavior中操作控件对象；

3、移除behavior。

就这么简单。接下来又到了挖坑时间（话说上次滑动返回的坑还没填...）：

时间： 2024-10-23 13:29:11

UWP：使用Behavior实现Button点击动态效果的相关文章

Android GridView中Button点击事件onItemClick不能响应

今天在捣鼓一个类似于百度贴吧的东西.布局:上面是个ActionBar标题栏,然后是一个GridView布局,在Java代码中动态加载关注的贴吧,一切就绪中,很愉快的弄好了! 现在需要点击选项进入某个贴吧,那么问题来了—— GridView中Button点击事件onItemClick不能响应. 所以,主要的猫腻还是在com.android.internal.R.attr.buttonStyle这个里面,查看这个xml文件,Button设置多了两个属性如下:<item name="androi

.net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器

1.WebForm使用母版页后执行的顺序是先执行子页面中的Page_Load,再执行母版页中的Page_Load,请求是先生成母版页的控件树,然后将子页面生成的控件树填充到母版页中,最后输出 2.WebForm使用母版页进行登录时候的验证 //新建一个页面父类 public abstract class BasePage:Page { protected void Page_Load(object sender, EventArgs e) { //1.身份验证的方法 Session if (Se

从Listview与Button点击事件冲突看安卓点击事件分发机制

题目有点长.其实实现Listview的时候大家都可能会碰到这样的一个问题,那就是Listview的OnItemClickListener点击事件与Button(或者checkbox)的touch(或者click)事件冲突的问题. 声明一下,非常感谢郭大师的这篇blog: http://blog.csdn.net/guolin_blog/article/details/9097463 原理参考了这篇blog,事实上也是本人功力不够不能阅读源码的缺陷啊. 下面说下自己的解决步骤: 1)首先先set一

button点击传多个参数

// --------------------button点击传多个参数------------------------ UIButton *btn = [UIButton buttonWithType:UIButtonTypeSystem]; btn.frame = CGRectMake(100, 100, 200, 50); btn.backgroundColor = [UIColor blueColor]; [btn setTitle:@"click me" forState:U

Android仿Win8界面的button点击

今天没事的时候,感觉Win8的扁平化的button还是挺好看的,就研究了下怎样在安卓界面实现Win8的扁平化button点击效果. 发现了一个自己定义的View能够实现扁平化button效果,话不多说,我们直接上代码. 1.首先要自己定义自己的View.创建一个自己定义的MyImageView类继承ImageView,并实现点击效果的设定. public class MyImageView extends ImageView { private boolean onAnimation = tru

Android实战简易教程-第十五枪（实现ListView中Button点击事件监听）

1.main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" androi

Android笔记——Button点击事件几种写法

Button点击事件:大概可以分为以下几种: 匿名内部类 定义内部类,实现OnClickListener接口 定义的构造方法 用Activity实现OnClickListener接口 指定Button的onClick的属性 首先我们简单地定义一个带Button的xml布局文件 activity_main.xml: <Button android:id="@+id/bt1" android:layout_width="wrap_content" android:

ios 控制button点击事件的触发频率

在项目中常常会遇到这样的问题: button点击就会触发相应的点击事件,比如说是向向服务器发送网络请求或者弹出弹框. 但如果用户点击频率很快的话,那就会不停的触发点击事件,从而使UI错乱. 对于这种问题我的解决方案是:设置布尔值. (1)对于与服务器有交互的点击事件:点击的时候判断bool值:在发送请求前设置一次:服务器得到应答后改变bool值即可. (2)对于无服务器交互点击事件:点击的时候判断:执行弹框前设置:弹框完成后延时0.25秒在设置. 直接上代码 .... @property (no

RxJava RxBinding 按钮(Button) 点击(click)

/********************************************************************* * RxJava RxBinding 按钮(Button) 点击(click) * 说明: * 之前看了RxJava相关内容,但对于本人来说目前更倾向于从使用中来学 * 习,结果发现找个Button点击的示例都没找到,刚刚在google上找到这两篇 * 文章中有介绍,记录一下. * * 2016-9-8 深圳 南山平山村 曾剑锋 *************