.NEt专家博客!

【李会军】一步一步学Silverlight 2系列(5):实现简单的拖放功能

上一篇 / 下一篇  2008-04-11 19:21:14

概述

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">
~/o;C.T2nnJI0<
Button
'U9C%q/o!D!K'C0
MouseLeftButtonDown="OnMouseDown"
4A+H8T.](z} LIM(W0
MouseMove="OnMouseMove"
^['u2vw8rtU8c0
MouseLeftButtonUp="OnMouseUp"
6Z U S K#Q%Wh0
Canvas.Left="50"Canvas.Top="50"Background="Red"
f{+j-[a+rH_0
FontSize="18"
:lKep G/d-S3]0
Width="160"Height="80">ITPUB个人空间M,`n7t"M(g L,HG
<
Button.Content>ITPUB个人空间)| g P"~X$o?6jUR
<
StackPanelOrientation="Horizontal"HorizontalAlignment="Center"ITPUB个人空间M4^us:n'd
VerticalAlignment="Center">ITPUB个人空间b'kxlB C$u(K
<
ImageSource="smile_6.png"></Image>
&V:w Bz%qr0<
TextBlockText="拖动我"VerticalAlignment="Center"Margin="10"></TextBlock>
6D0f^3v7z3j0</
StackPanel>ITPUB个人空间8E8^3Q Q1P6iK0I u
</
Button.Content>
k ` ~ y9q.BH%b0</
Button>ITPUB个人空间1H"?y`)]"pG:l
</
Canvas>

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

开始拖放操作

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

booltrackingMouseMove =false;ITPUB个人空间B*log&sP.ST0Y0t
PointmousePosition;
a|.C| E8KE'Z o8W0ITPUB个人空间H-fAF+^
voidOnMouseDown(objectsender,MouseButtonEventArgse)
V/MD$mM6\[l8n0{
X&{ bDZ+E"[nyi0FrameworkElementelement = senderasFrameworkElement;ITPUB个人空间h)@}y#zi8]'lX
mousePosition = e.GetPosition(null);ITPUB个人空间kO [Bd%b^&i(y"a
trackingMouseMove =true;
5ztx8AC3y j+a0if(null!= element)
,awA3^4~S!Gl{yZ*@"V0{
8`S h!B9_8@%I7iL0element.CaptureMouse();ITPUB个人空间Oh*h$eJMEy
element.Cursor =Cursors.Hand;
(c'D7|,pu~)n|Z0}
Ju pI7ZeL%p Cw0}

移动对象

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

voidOnMouseMove(objectsender,MouseEventArgse)ITPUB个人空间W#Ya)Bf
m
{
3[9xN%|9K7S;HS0FrameworkElementelement = senderasFrameworkElement;
6p[$o&~/[.I)Y8W0if(trackingMouseMove)ITPUB个人空间yfnR(h,|
{ITPUB个人空间#B `$VHuwA'fm D
doubledeltaV = e.GetPosition(null).Y - mousePosition.Y;ITPUB个人空间u8^k8u E@0FB
doubledeltaH = e.GetPosition(null).X - mousePosition.X;ITPUB个人空间:J RhuZ DsM
doublenewTop = deltaV + (double)element.GetValue(Canvas.TopProperty);ITPUB个人空间4rAzIn6M
doublenewLeft = deltaH + (double)element.GetValue(Canvas.LeftProperty);
(Y[mI c4dJ2a y\ J!_S0ITPUB个人空间u%EX`T0P:}
element.SetValue(Canvas.TopProperty, newTop);ITPUB个人空间|U J1h;@G4q0qC
element.SetValue(Canvas.LeftProperty, newLeft);ITPUB个人空间(Fp sN9p+[
ITPUB个人空间"op2A ycpp)K
mousePosition = e.GetPosition(null);
1~5@'en"t0}ITPUB个人空间(i V JJ!i*_f*i
}

完成拖放操作

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

voidOnMouseUp(objectsender,MouseButtonEventArgse)
$^ `OLSX~{,V0{
;T`L]#WP7n(Mo&Q[0FrameworkElementelement = senderasFrameworkElement;ITPUB个人空间ni3J+L jf!I
trackingMouseMove =false;
x\,t_[ F1v8y+ER0element.ReleaseMouseCapture();ITPUB个人空间,Gn}p l&niR{h
ITPUB个人空间2wd;Vs"q2JT@Y*w/X
mousePosition.X = mousePosition.Y = 0;ITPUB个人空间/z&RZi(G\K
element.Cursor =null;
@%k#ibm7pud-@0}

效果显示

最终,完成后的效果如下
O%}4Y0jE(x1X|0ITPUB个人空间2BmZI9~ k
拖动按钮ITPUB个人空间*j} ^%c*\;c q

0T rgmY.r E$o0

结束语

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

作者:TerryLee
y~/n(j?@n:M0出处:http://terrylee.cnblogs.com

ITPUB个人空间6l#rG ^?


TAG:

引用 删除 Guest   /   2012-02-01 17:25:33
-5
引用 删除 Guest   /   2009-12-09 17:56:14
5
引用 删除 Guest   /   2009-04-25 22:05:01
3
引用 删除 Guest   /   2008-12-23 19:07:41
-5
anniexing的个人空间 引用 删除 anniexing   /   2008-11-04 19:10:27
3
引用 删除 Guest   /   2008-06-19 11:03:23
 

评分:0

我来说两句

显示全部

:loveliness: :handshake :victory: :funk: :time: :kiss: :call: :hug: :lol :'( :Q :L ;P :$ :P :o :@ :D :( :)

日历

« 2012-02-10  
   1234
567891011
12131415161718
19202122232425
26272829   

数据统计

  • 访问量: 665817
  • 日志数: 3733
  • 影音数: 7
  • 文件数: 1
  • 建立时间: 2008-01-04
  • 更新时间: 2010-12-31

RSS订阅

Open Toolbar