[uwp]自定义Behavior之随意拖动

  由于最近有需求,所以自定义了一个随意拖动元素的Behavior.

  当然在使用这个自定义的Behavior时,有个小假设:拖动元素必须是Canvas容器的子元素。

  实现原理比较简单低效:

  监听被拖动元素的PointerMoved事件,当事件触发的时候,获取当前的指针信息,判断是否处于鼠标左键按下状态(Properties.IsLeftButtonPressed,在触摸屏上,手指移动时,该属性也为真),如果为真,就执行改变元素位置的代码,否则不做处理。

  原理大致如上。

  鉴于比较简单,直接上代码

  

public class DragBehavior : DependencyObject, IBehavior
    {
        private bool isTap = false;
        private FrameworkElement element;
        private Canvas surface;
        public DependencyObject AssociatedObject
        {
            get
            {
                throw new NotImplementedException();
            }
        }

        public void Attach(DependencyObject associatedObject)
        {

            element = associatedObject as FrameworkElement;
            element.PointerMoved += Element_PointerMoved;

        }

        private void Element_PointerMoved(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
        {
            var point=e.GetCurrentPoint((UIElement)sender);
            if (point.Properties.IsLeftButtonPressed)
            {
                var pos = point.Position;
                pos.X = pos.X - element.ActualWidth / 2.0;
                pos.Y = pos.Y - element.ActualHeight / 2.0;

                var left = (double)element.GetValue(Canvas.LeftProperty);
                var top = (double)element.GetValue(Canvas.TopProperty);
                element.SetValue(Canvas.LeftProperty, left + pos.X);
                element.SetValue(Canvas.TopProperty, top + pos.Y);
            }

        }

        public void Detach()
        {
            if (element != null)
            {
                element.PointerMoved -= Element_PointerMoved;
            }

        }
    }

  有必要解释的是,pos是相对于被拖动元素自身的位置偏移,而并不是相对于容器的偏移量。

var pos = point.Position;
pos.X = pos.X - element.ActualWidth / 2.0;
pos.Y = pos.Y - element.ActualHeight / 2.0

这两句目的在于,使指针位于元素中心,默认否则指针会在元素左上角处,比较难看。

最后就是如同普通的Behavior一样,附加到元素上就可以,不过元素一定要是Canvas容器的子元素,并且该元素继承自FrameworkElement(一般多从这儿继承)。

以上代码便是全部。使用时记着要添加Behaviors SDK的引用。

    

时间: 2024-10-08 21:17:26

[uwp]自定义Behavior之随意拖动的相关文章

Android 自定义的数字键盘 支持随意拖动 和稳定的字符输入的控件

经过 研究 实现了自定义 键盘 ,支持随意拖动 和数字及其他字符输入 下面是主要的代码 和使用方法 import android.content.Context; import android.util.Log; import android.view.GestureDetector; import android.view.GestureDetector.OnGestureListener; import android.view.Gravity; import android.view.Mo

分享一个自定义打印套打方案(二),扩展Panel,以支持鼠标随意拖动

接上一章节,本篇主要介绍一种支持鼠标随意拖动Panel内部控件位置的方法.为了简单起见,这里我们不妨就暂称我们将要扩展的Panel容器名称为 MoveControlPanel,该容器至少需要实现以下功能 1. 识别当前鼠标位置,是否处于某个内部组件的边框位置,以让鼠标显示出对应的图标(拉伸,移动-) 2.移动鼠标以改变内部某个组件的大小及坐标, 3.保存容器内每个组件的当前坐标及大小. 为了便于描述当前光标状态,我们不妨定义一个枚举.姑且称其为 EMousePointPosition, 其至少应

CentOS6下基于Nginx搭建mp4/flv流媒体服务器(可随意拖动)并支持RTMP/HLS协议(含转码工具)

1.先添加几个RPM下载源 1.1)安装RPMforge的CentOS6源      [[email protected] ~]# wget -c http://pkgs.repoforge.org/rpmforge-release/rpmforge-release-0.5.3-1.el6.rf.x86_64.rpm      [[email protected] ~]# rpm –import http://apt.sw.be/RPM-GPG-KEY.dag.txt      [[email 

CoordinatorLayout高级用法-自定义Behavior

在新的support design中,CoordinatorLayout可以说是最重要的一个控件了,CoordinatorLayout给我们带来了一种新的事件的处理方式--behavior,你是不是还记得我们在使用CoordinatorLayout的时候,一些子view需要一段, app:layout_behavior="@string/appbar_scrolling_view_behavior" 这样的xml配置?当时我们不知道这是干嘛的,直接照用就行了,后来发现这玩意是一个类!而

Material Design系列,自定义Behavior支持所有View

Material Design系列,自定义Behavior支持所有View 版权声明:转载必须注明本文转自严振杰的博客: http://blog.csdn.net/yanzhenjie1003 友情连接: Material Design博客专栏 系列博客: 1. Material Design系列,Behavior之BottomSheetBehavior与BottomSheetDialog 2. Material Design系列,Behavior之SwipeDismissBehavior 3.

十五天精通WCF——第九天 高级玩法之自定义Behavior

原文:十五天精通WCF--第九天 高级玩法之自定义Behavior 终于我又看完了二期爱情保卫战,太酸爽了,推荐链接:http://www.iqiyi.com/a_19rrgublqh.html?vfm=2008_aldbd,不多说,谁看谁入迷,下面言归正传, 看看这个很有意思的Behavior. 一: Behavior这个泼妇的厉害   在前面的文章中,我也清楚的说明了整个wcf通信流,而Behavior这个泼妇可以在wcf通信流中的任何地方插上一脚,蛮狠无比,利用的好,让你上天堂,利用的不

点击页面的悬浮窗口实现随意拖动

最近做了个在线聊天窗口  要求是要可以所以拖动.以下是html 和js相关代码: 1.html <div id="circle" ng-mousedown="move($event)" class="scrollTop" ng-if="onlineService"> <div class="lineHeightTop" ng-click="openNewWindow()"

JS随意拖动图片

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>JS随意拖动图片丨河北冷风机</title> </head> <body onLoad="remove()"> <div id="div1" onMouseOv

javascript如何实现随意拖动的层

javascript如何实现随意拖动的层: 在很多应用中都有拖动层移动的效果的扩展,下面就通过实例简单介绍一下如何利用javascript实现随意拖动一个层的效果. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/"