【李会军】一步一步学Silverlight 2系列（5）：实现简单的拖放功能

概述

Silverlight 2 Beta 1版本发布了，无论从Runtime还是Tools都给我们带来了很多的惊喜，如支持框架语言Visual Basic, Visual C#, IronRuby, Ironpython，对JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步学Silverlight 2系列》文章带您快速进入Silverlight 2开发。

本文为系列文章第五篇，利用前面讲过的鼠标事件处理实现简单的拖放功能。

准备XAML

在实现拖放功能中，分为三个步骤：

1.按下鼠标，触发MouseLeftButtonDown事件，选择要拖动的对象。

2.移动鼠标，触发MouseMove事件，移动选择的对象。

3.放开鼠标，触发MouseLeftButtonUp事件，停止捕捉事件。

做一个简单的界面，用一个按钮来显示拖放，如下XAML声明：

<CanvasBackground="#46461F">ITPUB个人空间F	IVm$H6C
<Button
l8M+E`	lNc:U0MouseLeftButtonDown="OnMouseDown"
yp/D:Z8H6j-u5R_i1V0MouseMove="OnMouseMove"ITPUB个人空间 AYV\4Q;i
MouseLeftButtonUp="OnMouseUp"
X(D Keg/w{0Canvas.Left="50"Canvas.Top="50"Background="Red"ITPUB个人空间W&S&z,~FH
wM6J
FontSize="18"
!G2r8Pj*UC0Width="160"Height="80">ITPUB个人空间.];w M"Z0M(Ai'K
<Button.Content>ITPUB个人空间z
Vnc(m8_8SR6e
<StackPanelOrientation="Horizontal"HorizontalAlignment="Center"ITPUB个人空间g1k z+Mz3a
VerticalAlignment="Center">
4{0h(U1?v5S8UJ0<ImageSource="smile_6.png"></Image>

YJp'~/u+e$|n-d'}0<TextBlockText="拖动我"VerticalAlignment="Center"Margin="10"></TextBlock>
]0x*J][5{VZ^0</StackPanel>
8[{3u,aebZ0</Button.Content>ITPUB个人空间9T!w{'tQiq
</Button>
.F@9H3^DW)m0</Canvas>

这里为了界面显示效果，使用了控件模板，后续会专门讲到。

开始拖放操作

开始拖放操作，实现MouseLeftButtonDown事件处理程序，用两个全局变量来记录当前鼠标的位置和鼠标是否保持移动。

booltrackingMouseMove =false;
NG7RP5D
wO	s0PointmousePosition;ITPUB个人空间j4|	]FimiI
ITPUB个人空间F"Fs*C@Q(j
voidOnMouseDown(objectsender,MouseButtonEventArgse)ITPUB个人空间R-LD*k UD
\
{
pm6U
nAf*@%l0FrameworkElementelement = senderasFrameworkElement;
/q0y7Kp"HZ0Vz\0mousePosition = e.GetPosition(null);
.w4J*MrU0trackingMouseMove =true;
}$r6D2{:tq0if(null!= element)
,SfJB2PK1iQ4]0{ITPUB个人空间aA)yX3K
element.CaptureMouse();
@|&g-t+P
W7X]0element.Cursor =Cursors.Hand;
&['tI3k C!o/k;W0}
s*L:kxN7x]2k0}

移动对象

移动对象，实现MouseMove事件处理程序，计算元素的位置并更新，同时更新鼠标的位置。

voidOnMouseMove(objectsender,MouseEventArgse)ITPUB个人空间M,a
ZF8Z
{
a7Y!P0y\"B0FrameworkElementelement = senderasFrameworkElement;
{6cP5RSpN4o(c0if(trackingMouseMove)
7M*E"@WA*cV|8Z0{ITPUB个人空间EcI`Biy(b
doubledeltaV = e.GetPosition(null).Y - mousePosition.Y;
/e4h%kw$WWB0doubledeltaH = e.GetPosition(null).X - mousePosition.X;ITPUB个人空间'K8I,b2gzC.mU
doublenewTop = deltaV + (double)element.GetValue(Canvas.TopProperty);ITPUB个人空间6Aee'kI
doublenewLeft = deltaH + (double)element.GetValue(Canvas.LeftProperty);ITPUB个人空间O2V7M&Z/R
{m
ITPUB个人空间
E	d!uB8[3R;?!Aa"rs
element.SetValue(Canvas.TopProperty, newTop);
CME
@'}l0element.SetValue(Canvas.LeftProperty, newLeft);ITPUB个人空间6N4i1_
FHT Vr

5u5a
|Au%Oc@7]
|0mousePosition = e.GetPosition(null);
sk LlL0}ITPUB个人空间a
E?3F"q%sb
}

完成拖放操作

完成拖放操作，实现MouseLeftButtonUp事件处理程序。

voidOnMouseUp(objectsender,MouseButtonEventArgse)
&G2qH JLq3vP7T0{ITPUB个人空间@8x0SF,i
FrameworkElementelement = senderasFrameworkElement;
6`$UA@(Ve0trackingMouseMove =false;ITPUB个人空间~3gY@Z:] y
element.ReleaseMouseCapture();
qM.xkJI-fz0
S^.kD
BSA0mousePosition.X = mousePosition.Y = 0;ITPUB个人空间,pZ%o+rG1Ev}
element.Cursor =null;
8L3M6n3?8_fOtj0}

效果显示

最终，完成后的效果如下
3? Q4P5oy[0
\o$x`TrBK0拖动按钮
+I,tq$[0J)S0
l-r/}8u'm4g h0

结束语

本文实现了一个简单的拖放功能（示例来自于Silverlight 2 SDK），点击下载文本示例代码。

L)VVIH0