Silverlight 拖动复制控件&＃xff0c;就是将控件从一个容器中向另一个容器中拖动时&＃xff0c;不是移动控件而把该控件到另一个容器中。这种情形在程序中经常遇到&＃xff0c;下面是我做的一个拖动复制控件的示例&＃xff0c;仅供有这种需求的朋友们参考。
新建一个 Silverlight 项目命名为 DragAndCopy &＃xff0c;在新建的项目中添加一个Silverlight 用户控件&＃xff08;Silverlight user control&＃xff09;命名为 DragObject。项目结构如下图所示&＃xff1a;
其中 DragObject 就是要拖动的用户控件&＃xff0c;DragObject 的 Xaml 代码如下&＃xff1a;
<UserControl x:Class&＃61;"DragAndCopy.DragObject"
xmlns&＃61;"http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x&＃61;"http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d&＃61;"http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc&＃61;"http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable&＃61;"d"
d:DesignHeight&＃61;"300" d:DesignWidth&＃61;"400">
<Image x:Name&＃61;"icon" Width&＃61;"128" Height&＃61;"128" Stretch&＃61;"Fill" />
UserControl>
xmlns&＃61;"http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x&＃61;"http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d&＃61;"http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc&＃61;"http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable&＃61;"d"
d:DesignHeight&＃61;"300" d:DesignWidth&＃61;"400">
<Image x:Name&＃61;"icon" Width&＃61;"128" Height&＃61;"128" Stretch&＃61;"Fill" />
UserControl>
这里只是演示拖动复制效果&＃xff0c;只在 DragObject 中显示一个图标。DragObject 的后置代码如下&＃xff1a;
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 &＃43;&＃61; new RoutedEventHandler(DragObject_Loaded);
}
///
/// 唯一标识一个控件
///
public string UUID
{
get;
set;
}
///
/// 鼠标点击的位置
///
public Point ClickPos
{
get;
set;
}
///
/// 图标地址&＃xff08;相对&＃xff09;
///
public string ImageUri
{
get;
set;
}
void DragObject_Loaded(object sender, RoutedEventArgs e)
{
if (!string.IsNullOrEmpty(ImageUri))
{
BitmapImage bitmap &＃61; new BitmapImage(new Uri(ImageUri, UriKind.Relative));
icon.Source &＃61; bitmap;
}
}
}
}
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Imaging;
namespace DragAndCopy
{
public partial class DragObject : UserControl
{
public DragObject()
{
InitializeComponent();
this.Loaded &＃43;&＃61; new RoutedEventHandler(DragObject_Loaded);
}
///
/// 唯一标识一个控件
///
public string UUID
{
get;
set;
}
///
/// 鼠标点击的位置
///
public Point ClickPos
{
get;
set;
}
///
/// 图标地址&＃xff08;相对&＃xff09;
///
public string ImageUri
{
get;
set;
}
void DragObject_Loaded(object sender, RoutedEventArgs e)
{
if (!string.IsNullOrEmpty(ImageUri))
{
BitmapImage bitmap &＃61; new BitmapImage(new Uri(ImageUri, UriKind.Relative));
icon.Source &＃61; bitmap;
}
}
}
}
DragObject 的 UUID 属性用来唯一标识一个 DragObject 实例&＃xff0c;在鼠标点击 DragObject 时也是通过 UUID 来判断是进行移动还是复制。ClickPos 属性是鼠标点击 DragObject 的位置&＃xff0c;ImageUri 属性是 DragObject 的图标的相对地址。
接下来在 MainPage 中添加几个 DragObject 的实例&＃xff0c;并添加一 Canvas 容器。
<UserControl x:Class&＃61;"DragAndCopy.MainPage"
xmlns&＃61;"http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x&＃61;"http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d&＃61;"http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc&＃61;"http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local&＃61;"clr-namespace:DragAndCopy"
mc:Ignorable&＃61;"d"
d:DesignHeight&＃61;"300" d:DesignWidth&＃61;"400">
<Grid x:Name&＃61;"LayoutRoot" Background&＃61;"White">
<Grid.RowDefinitions>
<RowDefinition Height&＃61;"160" />
<RowDefinition Height&＃61;"*" />
Grid.RowDefinitions>
<Border Grid.Row&＃61;"0" CornerRadius&＃61;"5,5,5,5" BorderBrush&＃61;"Green" BorderThickness&＃61;"1,1,1,1">
<StackPanel Orientation&＃61;"Horizontal" HorizontalAlignment&＃61;"Center" Margin&＃61;"5,10,5,10">
<local:DragObject ImageUri&＃61;"icons/chrome.png"
Margin&＃61;"5,5,5,5"
MouseLeftButtonDown&＃61;"Handle_MouseLeftButtonDown"
MouseLeftButtonUp&＃61;"Handle_MouseLeftButtonUp" />
<local:DragObject ImageUri&＃61;"icons/flock.png"
Margin&＃61;"5,5,5,5"
MouseLeftButtonDown&＃61;"Handle_MouseLeftButtonDown"
MouseLeftButtonUp&＃61;"Handle_MouseLeftButtonUp" />
<local:DragObject ImageUri&＃61;"icons/galeon.png"
Margin&＃61;"5,5,5,5"
MouseLeftButtonDown&＃61;"Handle_MouseLeftButtonDown"
MouseLeftButtonUp&＃61;"Handle_MouseLeftButtonUp" />
<local:DragObject ImageUri&＃61;"icons/ie7.png"
Margin&＃61;"5,5,5,5"
MouseLeftButtonDown&＃61;"Handle_MouseLeftButtonDown"
MouseLeftButtonUp&＃61;"Handle_MouseLeftButtonUp" />
<local:DragObject ImageUri&＃61;"icons/konqueror.png"
Margin&＃61;"5,5,5,5"
MouseLeftButtonDown&＃61;"Handle_MouseLeftButtonDown"
MouseLeftButtonUp&＃61;"Handle_MouseLeftButtonUp" />
<local:DragObject ImageUri&＃61;"icons/mfirefox.png"
Margin&＃61;"5,5,5,5"
MouseLeftButtonDown&＃61;"Handle_MouseLeftButtonDown"
MouseLeftButtonUp&＃61;"Handle_MouseLeftButtonUp" />
StackPanel>
Border>
<Canvas x:Name&＃61;"rootCanvas" Grid.Row&＃61;"1" Background&＃61;"White">
Canvas>
Grid>
UserControl>
xmlns&＃61;"http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x&＃61;"http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d&＃61;"http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc&＃61;"http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local&＃61;"clr-namespace:DragAndCopy"
mc:Ignorable&＃61;"d"
d:DesignHeight&＃61;"300" d:DesignWidth&＃61;"400">
<Grid x:Name&＃61;"LayoutRoot" Background&＃61;"White">
<Grid.RowDefinitions>
<RowDefinition Height&＃61;"160" />
<RowDefinition Height&＃61;"*" />
Grid.RowDefinitions>
<Border Grid.Row&＃61;"0" CornerRadius&＃61;"5,5,5,5" BorderBrush&＃61;"Green" BorderThickness&＃61;"1,1,1,1">
<StackPanel Orientation&＃61;"Horizontal" HorizontalAlignment&＃61;"Center" Margin&＃61;"5,10,5,10">
<local:DragObject ImageUri&＃61;"icons/chrome.png"
Margin&＃61;"5,5,5,5"
MouseLeftButtonDown&＃61;"Handle_MouseLeftButtonDown"
MouseLeftButtonUp&＃61;"Handle_MouseLeftButtonUp" />
<local:DragObject ImageUri&＃61;"icons/flock.png"
Margin&＃61;"5,5,5,5"
MouseLeftButtonDown&＃61;"Handle_MouseLeftButtonDown"
MouseLeftButtonUp&＃61;"Handle_MouseLeftButtonUp" />
<local:DragObject ImageUri&＃61;"icons/galeon.png"
Margin&＃61;"5,5,5,5"
MouseLeftButtonDown&＃61;"Handle_MouseLeftButtonDown"
MouseLeftButtonUp&＃61;"Handle_MouseLeftButtonUp" />
<local:DragObject ImageUri&＃61;"icons/ie7.png"
Margin&＃61;"5,5,5,5"
MouseLeftButtonDown&＃61;"Handle_MouseLeftButtonDown"
MouseLeftButtonUp&＃61;"Handle_MouseLeftButtonUp" />
<local:DragObject ImageUri&＃61;"icons/konqueror.png"
Margin&＃61;"5,5,5,5"
MouseLeftButtonDown&＃61;"Handle_MouseLeftButtonDown"
MouseLeftButtonUp&＃61;"Handle_MouseLeftButtonUp" />
<local:DragObject ImageUri&＃61;"icons/mfirefox.png"
Margin&＃61;"5,5,5,5"
MouseLeftButtonDown&＃61;"Handle_MouseLeftButtonDown"
MouseLeftButtonUp&＃61;"Handle_MouseLeftButtonUp" />
StackPanel>
Border>
<Canvas x:Name&＃61;"rootCanvas" Grid.Row&＃61;"1" Background&＃61;"White">
Canvas>
Grid>
UserControl>
接着实现将 DragObject 从 StackPanel 容器中拖动到 Canvas 容器中时&＃xff0c;复制一个 DragObject 到 Canvas 容器。拖动复制这个动作是在 StackPanel 中的 DragObject 上按下鼠标左键&＃xff0c;然后将鼠标指针拖动到 Canvas 中后弹起鼠标左键&＃xff0c;由此可知 StackPanel 中的 DragObject 需要响应鼠标左键的按下事件&＃xff0c;Canvas 需要响应鼠标左键的弹起事件。
先定义两个变&＃xff1a;
private DragObject curDrag;
private bool isMouseCaptured;
private bool isMouseCaptured;
curDrag 是用来保存要复制的控件的中间变量&＃xff0c;isMouseCaptured 用来判断是否按鼠标左键。
事件处理代码如下&＃xff1a;
void Handle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)?
{
DragObject dragObj &＃61; sender as DragObject;
if (dragObj !&＃61; null) // 鼠标左键在 DragObject 上按下
{
if (string.IsNullOrEmpty(dragObj.UUID)) // 在控件栏中的 DragObject 上按下
{
// 复制要拖动的控件
curDrag &＃61; new DragObject();
curDrag.UUID &＃61; Guid.NewGuid().ToString("N"); // 使用 Guid 标识复制的每个控件
curDrag.ImageUri &＃61; dragObj.ImageUri;
curDrag.ClickPos &＃61; e.GetPosition(dragObj);
}
isMouseCaptured &＃61; true;
}
}
void Handle_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
DragObject dragObj &＃61; sender as DragObject;
if (sender is Canvas) // 鼠标左键在容器上弹起
{
if (isMouseCaptured)
{
isMouseCaptured &＃61; false;
if (!rootCanvas.Children.Contains(curDrag)) // 复制控件
{
double x &＃61; e.GetPosition(rootCanvas).X;
double y &＃61; e.GetPosition(rootCanvas).Y;
rootCanvas.Children.Add(new DragObject
{
ImageUri &＃61; curDrag.ImageUri,
UUID &＃61; curDrag.UUID,
ClickPos &＃61; curDrag.ClickPos
});
// 添加控件的鼠标左键按下、弹起事件、设置控件的位置
DragObject obj &＃61; rootCanvas.Children.First(ue &＃61;> (ue as DragObject).UUID &＃61;&＃61; curDrag.UUID) as DragObject;
//obj.MouseMove &＃43;&＃61; Handle_MouseMove;
obj.MouseLeftButtonDown &＃43;&＃61; Handle_MouseLeftButtonDown;
obj.SetValue(Canvas.TopProperty, y - obj.ClickPos.Y);
obj.SetValue(Canvas.LeftProperty, x - obj.ClickPos.X);
}
}
}
}
{
DragObject dragObj &＃61; sender as DragObject;
if (dragObj !&＃61; null) // 鼠标左键在 DragObject 上按下
{
if (string.IsNullOrEmpty(dragObj.UUID)) // 在控件栏中的 DragObject 上按下
{
// 复制要拖动的控件
curDrag &＃61; new DragObject();
curDrag.UUID &＃61; Guid.NewGuid().ToString("N"); // 使用 Guid 标识复制的每个控件
curDrag.ImageUri &＃61; dragObj.ImageUri;
curDrag.ClickPos &＃61; e.GetPosition(dragObj);
}
isMouseCaptured &＃61; true;
}
}
void Handle_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
DragObject dragObj &＃61; sender as DragObject;
if (sender is Canvas) // 鼠标左键在容器上弹起
{
if (isMouseCaptured)
{
isMouseCaptured &＃61; false;
if (!rootCanvas.Children.Contains(curDrag)) // 复制控件
{
double x &＃61; e.GetPosition(rootCanvas).X;
double y &＃61; e.GetPosition(rootCanvas).Y;
rootCanvas.Children.Add(new DragObject
{
ImageUri &＃61; curDrag.ImageUri,
UUID &＃61; curDrag.UUID,
ClickPos &＃61; curDrag.ClickPos
});
// 添加控件的鼠标左键按下、弹起事件、设置控件的位置
DragObject obj &＃61; rootCanvas.Children.First(ue &＃61;> (ue as DragObject).UUID &＃61;&＃61; curDrag.UUID) as DragObject;
//obj.MouseMove &＃43;&＃61; Handle_MouseMove;
obj.MouseLeftButtonDown &＃43;&＃61; Handle_MouseLeftButtonDown;
obj.SetValue(Canvas.TopProperty, y - obj.ClickPos.Y);
obj.SetValue(Canvas.LeftProperty, x - obj.ClickPos.X);
}
}
}
}
有了以上的代码就可以实现用户控件的复制了。接下实现 Canvas 容器中的控件的拖动事件&＃xff0c;拖动控件的是在控件上按下鼠标左键&＃xff0c;然后移动鼠标&＃xff0c;因此控件需要处理鼠标左键按下和鼠标移动事件。处理代码如下&＃xff1a;
void Handle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
DragObject dragObj &＃61; sender as DragObject;
if (dragObj !&＃61; null) // 鼠标左键在 DragObject 上按下
{
dragObj.MouseMove -&＃61; Handle_MouseMove;
dragObj.MouseMove &＃43;&＃61; Handle_MouseMove;
mouseVerticalPosition &＃61; e.GetPosition(null).Y;
mouseHorizontalPosition &＃61; e.GetPosition(null).X;
dragObj.CaptureMouse();
isMouseCaptured &＃61; true;
}
}
{
DragObject dragObj &＃61; sender as DragObject;
if (dragObj !&＃61; null) // 鼠标左键在 DragObject 上按下
{
dragObj.MouseMove -&＃61; Handle_MouseMove;
dragObj.MouseMove &＃43;&＃61; Handle_MouseMove;
mouseVerticalPosition &＃61; e.GetPosition(null).Y;
mouseHorizontalPosition &＃61; e.GetPosition(null).X;
dragObj.CaptureMouse();
isMouseCaptured &＃61; true;
}
}
鼠标移动事件处理代码如下&＃xff1a;
void Handle_MouseMove(object sender, MouseEventArgs e)
{
DragObject item &＃61; sender as DragObject;
if (item !&＃61; null && isMouseCaptured)
{
double deltaV &＃61; e.GetPosition(null).Y - mouseVerticalPosition;
double deltaH &＃61; e.GetPosition(null).X - mouseHorizontalPosition;
double newTop &＃61; deltaV &＃43; (double)item.GetValue(Canvas.TopProperty);
double newLeft &＃61; deltaH &＃43; (double)item.GetValue(Canvas.LeftProperty);
// 设置新位置
item.SetValue(Canvas.TopProperty, newTop);
item.SetValue(Canvas.LeftProperty, newLeft);
// 更新全局变量
mouseVerticalPosition &＃61; e.GetPosition(null).Y;
mouseHorizontalPosition &＃61; e.GetPosition(null).X;
}
}
{
DragObject item &＃61; sender as DragObject;
if (item !&＃61; null && isMouseCaptured)
{
double deltaV &＃61; e.GetPosition(null).Y - mouseVerticalPosition;
double deltaH &＃61; e.GetPosition(null).X - mouseHorizontalPosition;
double newTop &＃61; deltaV &＃43; (double)item.GetValue(Canvas.TopProperty);
double newLeft &＃61; deltaH &＃43; (double)item.GetValue(Canvas.LeftProperty);
// 设置新位置
item.SetValue(Canvas.TopProperty, newTop);
item.SetValue(Canvas.LeftProperty, newLeft);
// 更新全局变量
mouseVerticalPosition &＃61; e.GetPosition(null).Y;
mouseHorizontalPosition &＃61; e.GetPosition(null).X;
}
}
通过以上代码我们实现的拖动复制及移动控件&＃xff0c;但是上面的代码还有一些小 Bug&＃xff0c; 完整的示例代码请到http://zdd.me/myfiles下载。
京公网安备 11010802041100号