Silverlight实用窍门系列:7.制作可拖动的自定义控件,获取拖拽后控件坐标【实例源码下载】

简介:

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

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

 
 
< Grid x:Name = " LayoutRoot " Background = " White " >
< Rectangle x:Name = " ti " Width = " 140 " Height = " 140 " RadiusX = " 5 " RadiusY = " 5 " Fill = " Blue " ></ Rectangle >
< sdk:Label Height = " 28 " HorizontalAlignment = " Left " Name = " label1 " VerticalAlignment = " Top " Width = " 120 " />
</ 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的代码如下:

复制代码
 
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Interactivity;
using Microsoft.Expression.Interactivity;
using Microsoft.Expression.Interactivity.Layout;

namespace SLMoveRecAndToolTip
{
public partial class Rec : UserControl
{
public Rec()
{
InitializeComponent();
}

MouseDragElementBehavior dragBehavior
= new MouseDragElementBehavior();
private bool isDrag;
/// <summary>
/// 是否允许被拖拽和鼠标右键
/// </summary>
public bool IsDrag
{
get { return isDrag; }
set
{
isDrag
= value;
if (isDrag == true )
{
dragBehavior.Attach(
this ); // 将本对象加入到可以鼠标拖动的行为对象中去
dragBehavior.DragFinished += new MouseEventHandler(dragBehavior_DragFinished);
// 在对象移动成功之后加载一个处理事件。
}
else if (isDrag == false )
{
try
{
// 设置本控件移动行为取消,并且取消DragFinished处理事件
dragBehavior.Detach();
dragBehavior.DragFinished
-= new MouseEventHandler(dragBehavior_DragFinished);
}
catch
{

}
}

}
}
/// <summary>
/// 被拖动完成之后触发的事件
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
void dragBehavior_DragFinished( object sender, MouseEventArgs e)
{
MouseDragElementBehavior dragBehavior
= sender as MouseDragElementBehavior;
this .Tag = dragBehavior.X + " | " + dragBehavior.Y; // this.Tag设置为相应的值
this .label1.Content = " X: " + dragBehavior.X + " ---Y: " + dragBehavior.Y;
// 设置鼠标拖动本控件之后,在label1中显示当前控件的坐标位置
}
}
}
复制代码

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

        源代码如下:

 
 
Rec rect = new Rec();
rect.HorizontalAlignment
= HorizontalAlignment.Left;
rect.VerticalAlignment
= VerticalAlignment.Top;
rect.IsDrag
= true ;
this .LayoutRoot.Children.Add(rect);

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



    本文转自程兴亮博客园博客,原文链接:http://www.cnblogs.com/chengxingliang/archive/2011/02/17/1956856.html,如需转载请自行联系原作者

相关文章

热门文章

最新文章