Silverlight 拖動複制控件,就是将控件從一個容器中向另一個容器中拖動時,不是移動控件而把該控件到另一個容器中。這種情形在程式中經常遇到,下面是我做的一個拖動複制控件的示例,僅供有這種需求的朋友們參考。
其中 DragObject 就是要拖動的使用者控件,DragObject 的 Xaml 代碼如下:
<UserControl x:Class="DragAndCopy.DragObject"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Image x:Name="icon" Width="128" Height="128" Stretch="Fill" />
</UserControl>
這裡隻是示範拖動複制效果,隻在 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;
/// 滑鼠點選的位置
public Point ClickPos
/// 圖示位址(相對)
public string ImageUri
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 容器。
<UserControl x:Class="DragAndCopy.MainPage"
xmlns:local="clr-namespace:DragAndCopy"
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="160" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border Grid.Row="0" CornerRadius="5,5,5,5" BorderBrush="Green" BorderThickness="1,1,1,1">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="5,10,5,10">
<local:DragObject ImageUri="icons/chrome.png"
Margin="5,5,5,5"
MouseLeftButtonDown="Handle_MouseLeftButtonDown"
MouseLeftButtonUp="Handle_MouseLeftButtonUp" />
<local:DragObject ImageUri="icons/flock.png"
<local:DragObject ImageUri="icons/galeon.png"
<local:DragObject ImageUri="icons/ie7.png"
<local:DragObject ImageUri="icons/konqueror.png"
<local:DragObject ImageUri="icons/mfirefox.png"
</StackPanel>
</Border>
<Canvas x:Name="rootCanvas" Grid.Row="1" Background="White">
</Canvas>
</Grid>
接着實作将 DragObject 從 StackPanel 容器中拖動到 Canvas 容器中時,複制一個 DragObject 到 Canvas 容器。拖動複制這個動作是在 StackPanel 中的 DragObject 上按下滑鼠左鍵,然後将滑鼠指針拖動到 Canvas 中後彈起滑鼠左鍵,由此可知 StackPanel 中的 DragObject 需要響應滑鼠左鍵的按下事件,Canvas 需要響應滑鼠左鍵的彈起事件。
先定義兩個變:
private DragObject curDrag;
private bool isMouseCaptured;
curDrag 是用來儲存要複制的控件的中間變量,isMouseCaptured 用來判斷是否按滑鼠左鍵。
事件處理代碼如下:
void Handle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)?
DragObject dragObj = sender as DragObject;
if (dragObj != null) // 滑鼠左鍵在 DragObject 上按下
if (string.IsNullOrEmpty(dragObj.UUID)) // 在控件欄中的 DragObject 上按下
// 複制要拖動的控件
curDrag = new DragObject();
curDrag.UUID = Guid.NewGuid().ToString("N"); // 使用 Guid 辨別複制的每個控件
curDrag.ImageUri = dragObj.ImageUri;
curDrag.ClickPos = e.GetPosition(dragObj);
isMouseCaptured = true;
void Handle_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
if (sender is Canvas) // 滑鼠左鍵在容器上彈起
if (isMouseCaptured)
isMouseCaptured = false;
if (!rootCanvas.Children.Contains(curDrag)) // 複制控件
double x = e.GetPosition(rootCanvas).X;
double y = e.GetPosition(rootCanvas).Y;
rootCanvas.Children.Add(new DragObject
ImageUri = curDrag.ImageUri,
UUID = curDrag.UUID,
ClickPos = curDrag.ClickPos
});
// 添加控件的滑鼠左鍵按下、彈起事件、設定控件的位置
DragObject obj = rootCanvas.Children.First(ue => (ue as DragObject).UUID == curDrag.UUID) as DragObject;
//obj.MouseMove += Handle_MouseMove;
obj.MouseLeftButtonDown += Handle_MouseLeftButtonDown;
obj.SetValue(Canvas.TopProperty, y - obj.ClickPos.Y);
obj.SetValue(Canvas.LeftProperty, x - obj.ClickPos.X);
有了以上的代碼就可以實作使用者控件的複制了。接下實作 Canvas 容器中的控件的拖動事件,拖動控件的是在控件上按下滑鼠左鍵,然後移動滑鼠,是以控件需要處理滑鼠左鍵按下和滑鼠移動事件。處理代碼如下:
void Handle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
dragObj.MouseMove -= Handle_MouseMove;
dragObj.MouseMove += Handle_MouseMove;
mouseVerticalPosition = e.GetPosition(null).Y;
mouseHorizontalPosition = e.GetPosition(null).X;
dragObj.CaptureMouse();
滑鼠移動事件處理代碼如下:
void Handle_MouseMove(object sender, MouseEventArgs e)
DragObject item = sender as DragObject;
if (item != null && isMouseCaptured)
double deltaV = e.GetPosition(null).Y - mouseVerticalPosition;
double deltaH = e.GetPosition(null).X - mouseHorizontalPosition;
double newTop = deltaV + (double)item.GetValue(Canvas.TopProperty);
double newLeft = deltaH + (double)item.GetValue(Canvas.LeftProperty);
// 設定新位置
item.SetValue(Canvas.TopProperty, newTop);
item.SetValue(Canvas.LeftProperty, newLeft);
// 更新全局變量