7.制作可拖动的自定义控件,获取拖拽后控件坐标-阿里云开发者社区

开发者社区> 科技小能手> 正文

7.制作可拖动的自定义控件,获取拖拽后控件坐标

简介:
+关注继续查看

       在Silverlight中MouseDragElementBehavior拖动行为的对象添加了某一个元素之后,就可以让该元素可以被拖动。这个行为 极大的方便了程序员的UI体验效果制作。但是在项目中,我们拖动了一个UI元素之后,我们往往还需要记录下这个UI元素的拖动后的元素坐标位置,以保存起 来,让用户自定义的拖动元素下次打开的时候能够还原出来。在这里有一个问题,我们很难获得UI元素拖动后的X,Y坐标。经查询各方面资料以及实践之后得出 这篇文章。通过加载MouseDragElementBehavior行为对象的DragFinished事件(本事件在每拖动一个像素点完成移动之后触 发),在这个事件中我们MouseDragElementBehavior对象实例的X,Y属性可以得到当前UI元素的具体位置。

        首先我们在新项目中添加一个Silverlight 自定义控件名为Rec.xaml。其XAML代码如下:

 


  1. <Grid x:Name="LayoutRoot" Background="White"
  2.      <Rectangle x:Name="ti" Width="140" Height="140" RadiusX="5" RadiusY="5" Fill="Blue"></Rectangle> 
  3.      <sdk:Label Height="28" HorizontalAlignment="Left" Name="label1" VerticalAlignment="Top" Width="120" /> 
  4.  </Grid> 

       其次我们引入System.Windows.Interactivity.dll和Microsoft.Expression.Interactions.dll两个文件。

       在Rec.xaml.cs文件中我们需要引入:
using System.Windows.Interactivity;
using Microsoft.Expression.Interactivity;
using Microsoft.Expression.Interactivity.Layout;

       这个时候,我们就可以使用MouseDragElementBehavior和它的相关方法了。我们现在贴出Rec.xaml.cs的代码如下:

 


  1. using System; 
  2. using System.Collections.Generic; 
  3. using System.Linq; 
  4. using System.Net; 
  5. using System.Windows; 
  6. using System.Windows.Controls; 
  7. using System.Windows.Documents; 
  8. using System.Windows.Input; 
  9. using System.Windows.Media; 
  10. using System.Windows.Media.Animation; 
  11. using System.Windows.Shapes; 
  12. using System.Windows.Interactivity; 
  13. using Microsoft.Expression.Interactivity; 
  14. using Microsoft.Expression.Interactivity.Layout; 
  15.  
  16. namespace SLMoveRecAndToolTip 
  17. public partial class Rec : UserControl 
  18. public Rec() 
  19. InitializeComponent(); 
  20.  
  21. MouseDragElementBehavior dragBehavior = new MouseDragElementBehavior(); 
  22. private bool isDrag; 
  23. /// <summary> 
  24. /// 是否允许被拖拽和鼠标右键 
  25. /// </summary> 
  26. public bool IsDrag 
  27. get { return isDrag; } 
  28. set 
  29. isDrag = value; 
  30. if (isDrag == true
  31. dragBehavior.Attach(this);//将本对象加入到可以鼠标拖动的行为对象中去 
  32. dragBehavior.DragFinished += new MouseEventHandler(dragBehavior_DragFinished); 
  33. //在对象移动成功之后加载一个处理事件。 
  34. else if (isDrag == false
  35. try 
  36. //设置本控件移动行为取消,并且取消DragFinished处理事件 
  37. dragBehavior.Detach(); 
  38. dragBehavior.DragFinished -= new MouseEventHandler(dragBehavior_DragFinished); 
  39. catch 
  40.  
  41.  
  42. /// <summary> 
  43. /// 被拖动完成之后触发的事件 
  44. /// </summary> 
  45. /// <param name="sender"></param> 
  46. /// <param name="e"></param> 
  47. void dragBehavior_DragFinished(object sender, MouseEventArgs e) 
  48. MouseDragElementBehavior dragBehavior = sender as MouseDragElementBehavior; 
  49. this.Tag = dragBehavior.X + "|" + dragBehavior.Y; // this.Tag设置为相应的值 
  50. this.label1.Content = "X:" + dragBehavior.X + "---Y:" + dragBehavior.Y; 
  51. //设置鼠标拖动本控件之后,在label1中显示当前控件的坐标位置 

        相关的代码解释都在注释中,在这里我不再啰嗦。在MainPage.xaml.cs中我们只需要实例化这个对象,然后再设置这个对象的IsDrag属性为true,即可让此控件被拖动。如果为false,则此自定义控件不可再拖动。

        源代码如下:

 


  1. Rec rect = new Rec(); 
  2.            rect.HorizontalAlignment = HorizontalAlignment.Left
  3.            rect.VerticalAlignment = VerticalAlignment.Top
  4.            rect.IsDrag = true
  5.            this.LayoutRoot.Children.Add(rect); 

        本实例使用VS2010+Silverlight 4.0开发。源码请点击SLMoveRecAndToolTip.rar下载


本文转自程兴亮 51CTO博客,原文链接:http://blog.51cto.com/chengxingliang/821455


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

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
8470 0
PolarDB-X 1.0-用户指南-自定义控制指令-回收站管理
PolarDB-X支持表回收站功能,详情情参见表回收站,本文档将介绍如何通过命令行管理表回收站。
21 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10272 0
PolarDB-X 1.0-用户指南-自定义控制指令-查看规则和节点拓扑类语句
本文汇总了PolarDB-X支持的查看规则和节点拓扑类的语句。
24 0
PolarDB-X 1.0-用户指南-自定义控制指令-SQL 调优类语句
本文汇总了PolarDB-X支持的SQL调优类语句。
22 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
11387 0
3.3 自定义控件基础 之 View的绘制
当测量好了一个View之后,我们就可以简单地重写onDraw()方法,并在Canvas对象上来绘制所需要的图形。首先我们来了解一下利用系统2D绘图API所必须要使用到的Canvas对象。
554 0
C#Button+Label自定义控件制作
1、创建窗体控件类工程   图 创建资源文件   2、设计器拖拉基本控件和设置属性 图 添加layout     ...
783 0
23706
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载