Silverlight 拖动复制控件,就是将控件从一个容器中向另一个容器中拖动时,不是移动控件而把该控件到另一个容器中。这种情形在程序中经常遇到,下面是我做的一个拖动复制控件的示例,仅供有这种需求的朋友们参考。
Silverlight 拖动复制控件,就是将控件从一个容器中向另一个容器中拖动时,不是移动控件而把该控件到另一个容器中。这种情形在程序中经常遇到,下面是我做的一个拖动复制控件的示例,仅供有这种需求的朋友们参考。
新建一个 Silverlight 项目命名为 DragAndCopy ,在新建的项目中添加一个Silverlight 用户控件(Silverlight user control)命名为 DragObject。项目结构如下图所示:
其中 DragObject 就是要拖动的用户控件,DragObject 的 Xaml 代码如下:
这里只是演示拖动复制效果,只在 DragObject 中显示一个图标。DragObject 的后置代码如下:
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Imaging;
namespace DragAndCopy
{
public partial class DragObject : UserControl
{
public DragObject()
{
InitializeComponent();
this.Loaded += new RoutedEventHandler(DragObject_Loaded);
}
/// <summary>
/// 唯一标识一个控件
/// </summary>
public string UUID
{
get;
set;
}
/// <summary>
/// 鼠标点击的位置
/// </summary>
public Point ClickPos
{
get;
set;
}
/// <summary>
/// 图标地址(相对)
/// </summary>
public string ImageUri
{
get;
set;
}
void DragObject_Loaded(object sender, RoutedEventArgs e)
{
if (!string.IsNullOrEmpty(ImageUri))
{
BitmapImage bitmap = new BitmapImage(new Uri(ImageUri, UriKind.Relative));
icon.Source = bitmap;
}
}
}
}
DragObject 的 UUID 属性用来唯一标识一个 DragObject 实例,在鼠标点击 DragObject 时也是通过 UUID 来判断是进行移动还是复制。ClickPos 属性是鼠标点击 DragObject 的位置,ImageUri 属性是 DragObject 的图标的相对地址。
接下来在 MainPage 中添加几个 DragObject 的实例,并添加一 Canvas 容器。
接着实现将 DragObject 从 StackPanel 容器中拖动到 Canvas 容器中时,复制一个 DragObject 到 Canvas 容器。拖动复制这个动作是在 StackPanel 中的 DragObject 上按下鼠标左键,然后将鼠标指针拖动到 Canvas 中后弹起鼠标左键,由此可知 StackPanel 中的 DragObject 需要响应鼠标左键的按下事件,Canvas 需要响应鼠标左键的弹起事件。
先定义两个变量
1 |
private DragObject curDrag; |
2 |
private bool isMouseCaptured; |
curDrag 是用来保存要复制的控件的中间变量,isMouseCaptured 用来判断是否按鼠标左键。
事件处理代码如下:
01 |
void Handle_MouseLeftButtonDown( object sender, MouseButtonEventArgs e)� |
03 |
DragObject dragObj = sender as DragObject; |
06 |
if ( string .IsNullOrEmpty(dragObj.UUID)) |
09 |
curDrag = new DragObject(); |
10 |
curDrag.UUID = Guid.NewGuid().ToString( "N" ); |
11 |
curDrag.ImageUri = dragObj.ImageUri; |
12 |
curDrag.ClickPos = e.GetPosition(dragObj); |
14 |
isMouseCaptured = true ; |
01 |
void Handle_MouseLeftButtonUp( object sender, MouseButtonEventArgs e) |
03 |
DragObject dragObj = sender as DragObject; |
08 |
isMouseCaptured = false ; |
09 |
if (!rootCanvas.Children.Contains(curDrag)) |
11 |
double x = e.GetPosition(rootCanvas).X; |
12 |
double y = e.GetPosition(rootCanvas).Y; |
14 |
rootCanvas.Children.Add( new DragObject |
16 |
ImageUri = curDrag.ImageUri, |
18 |
ClickPos = curDrag.ClickPos |
22 |
DragObject obj = rootCanvas.Children.First(ue => (ue as DragObject).UUID == curDrag.UUID) as DragObject; |
24 |
obj.MouseLeftButtonDown += Handle_MouseLeftButtonDown; |
26 |
obj.SetValue(Canvas.TopProperty, y - obj.ClickPos.Y); |
27 |
obj.SetValue(Canvas.LeftProperty, x - obj.ClickPos.X); |
有了以上的代码就可以实现用户控件的复制了。接下实现 Canvas 容器中的控件的拖动事件,拖动控件的是在控件上按下鼠标左键,然后移动鼠标,因此控件需要处理鼠标左键按下和鼠标移动事件。处理代码如下:
01 |
void Handle_MouseLeftButtonDown( object sender, MouseButtonEventArgs e) |
03 |
DragObject dragObj = sender as DragObject; |
06 |
dragObj.MouseMove -= Handle_MouseMove; |
07 |
dragObj.MouseMove += Handle_MouseMove; |
09 |
mouseVerticalPosition = e.GetPosition( null ).Y; |
10 |
mouseHorizontalPosition = e.GetPosition( null ).X; |
11 |
dragObj.CaptureMouse(); |
12 |
isMouseCaptured = true ; |
鼠标移动事件处理代码如下:
01 |
void Handle_MouseMove( object sender, MouseEventArgs e) |
03 |
DragObject item = sender as DragObject; |
05 |
if (item != null && isMouseCaptured) |
07 |
double deltaV = e.GetPosition( null ).Y - mouseVerticalPosition; |
08 |
double deltaH = e.GetPosition( null ).X - mouseHorizontalPosition; |
09 |
double newTop = deltaV + ( double )item.GetValue(Canvas.TopProperty); |
10 |
double newLeft = deltaH + ( double )item.GetValue(Canvas.LeftProperty); |
13 |
item.SetValue(Canvas.TopProperty, newTop); |
14 |
item.SetValue(Canvas.LeftProperty, newLeft); |
17 |
mouseVerticalPosition = e.GetPosition( null ).Y; |
18 |
mouseHorizontalPosition = e.GetPosition( null ).X; |
通过以上代码我们实现的拖动复制及移动控件,但是上面的代码还有一些小 Bug, 完整的示例代码请到http://zdd.me/myfiles下载。
下面是演示: