Silverlight实用窍门序列：制作可拖动的自定义控件，获取拖拽后控件坐标

在Silverlight中MouseDragElementBehavior拖动行为的对象添加了某一个元素之后，就可以让该元素可以被拖动。这个行为极大的方便了程序员的UI体验效果制作。但是在项目中，我们拖动了一个UI元素之后，我们往往还需要记录下这个UI元素的拖动后的元素坐标位置，以保存起来，让用户自定义的拖动元素下次打开的时候能够还原出来

 

在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开发。

 

本文来自程兴亮的博客，原文地址:http://www.cnblogs.com/chengxingliang/archive/2011/02/17/1956856.html