【李会军】一步一步学Silverlight 2系列（4）：鼠标事件处理

概述

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

本文为系列文章第四篇，学习Silverlight 2中的鼠标事件处理，支持的鼠标事件包括MouseMove 、MouseEnter 、MouseLeave 、MouseLeftButtonDown、MouseLeftButtonUp。

声明事件

对于鼠标事件我们可以附加到任何Silverlight对象上面，如下面的XAML声明，为两个圆形添加上MouseEnter和MouseLeave事件：

<CanvasBackground="#46461F">
;pn;I~7BK0<EllipseWidth="120"Height="120"Fill="Orange"ITPUB个人空间yk(`+}8G	S
Canvas.Top="60"Canvas.Left="80"ITPUB个人空间Kb)I,a2W9t	D'd
MouseEnter="OnMouseEnter"
yM	l1S$c2I)x0MouseLeave="OnMouseLeave"/>ITPUB个人空间1}6q],@Q)~})t:i
ITPUB个人空间Ewt:T0K-j
<EllipseWidth="120"Height="120"Fill="Orange"
*jY"].J1Q&`	O0Canvas.Top="60"Canvas.Left="280"ITPUB个人空间%k}'_Q.?
MouseEnter="OnMouseEnter"ITPUB个人空间w%``UK]5]
MouseLeave="OnMouseLeave"/>ITPUB个人空间'ASZ,b
XO*t
</Canvas>

编写事件处理程序，鼠标放上去时和鼠标移开时分别改变圆形的填充色：

voidOnMouseEnter(objectsender,MouseEventArgse)ITPUB个人空间	O-u^3Yvm@6Pk:m Z
{ITPUB个人空间`w)PC1V
x|MM
Ellipseell = senderasEllipse;
7Gp
tER
y7M0ell.Fill =newSolidColorBrush(Colors.Yellow);ITPUB个人空间'IX/y'}St5C5O
}ITPUB个人空间Z/m3RY}
s	I
voidOnMouseLeave(objectsender,MouseEventArgse)ITPUB个人空间_`un)l%u+]!lv
{ITPUB个人空间 ElR
`v?
Ellipseell = senderasEllipse;
u.IpK3TkO`/O ]@3s0ell.Fill =newSolidColorBrush(Colors.Green);ITPUB个人空间a$Zwr;nIMK
}

运行后效果如下：ITPUB个人空间1S4v+M d:_eYIu

Ke xyj g!D2n0分别在两个圆形上放上鼠标并移开后如下所示：
0Sys3X:?0ITPUB个人空间HN"`)\Gp(E)u

使用代码管理事件

除了在XAML中声明事件外，也可以直接使用代码来注册事件，简单的修改一下上面的XAML文件，去掉事件的声明并为两个圆形分别加上Name：

<CanvasBackground="#46461F">ITPUB个人空间q3T5e*W#h,m
<Ellipsex:Name="ellipse1"Width="120"Height="120"Fill="Orange"
Hh!E2x/xbU0Canvas.Top="60"Canvas.Left="80"/>
1i:Kw
hB0ITPUB个人空间
W#f.y*C3~Z@
<Ellipsex:Name="ellipse2"Width="120"Height="120"Fill="Orange"ITPUB个人空间1D
g[m0D
M)t3A
Canvas.Top="60"Canvas.Left="280"/>ITPUB个人空间$YAfn\n0f
q
</Canvas>

在代码中进行事件注册：

public partial classPage:UserControlITPUB个人空间 zpQf:s]^[5c2E
{
#KUC7L	a&Yu6?0publicPage()
:Nv"a[2^:Z4@AfuM0{ITPUB个人空间4q&s
m5yx0k.y"o
InitializeComponent();ITPUB个人空间Y8G:V1}^
ellipse1.MouseEnter +=newMouseEventHandler(OnMouseEnter);
a6{j
W8W.R0ellipse1.MouseLeave +=newMouseEventHandler(OnMouseLeave);ITPUB个人空间D9n5H\	vb	u}
ellipse2.MouseEnter +=newMouseEventHandler(OnMouseEnter);ITPUB个人空间uiC$J2MQ\a"B
ellipse2.MouseLeave +=newMouseEventHandler(OnMouseLeave);ITPUB个人空间
q*s;Z\(J? {
}ITPUB个人空间"k
{
O r4l/y

^c4P&{(U'Y0voidOnMouseEnter(objectsender,MouseEventArgse)ITPUB个人空间F,J|$Yk+\A
{ITPUB个人空间Q0@c0@;X
Ellipseell = senderasEllipse;
bB_
_?S]0ell.Fill =newSolidColorBrush(Colors.Yellow);ITPUB个人空间3}#}
gHS(F2V
}ITPUB个人空间HuD.yh$I
voidOnMouseLeave(objectsender,MouseEventArgse)
1VNxP	X0{
 A~!aR7}0Ellipseell = senderasEllipse;
9T'f nxU^;@.S
P0ell.Fill =newSolidColorBrush(Colors.Green);ITPUB个人空间
A(AQ.k2_wZ_e
}

O+u6LBDJj0}

运行后可以看到跟上面一样的效果：ITPUB个人空间ky4lZ:Ix(X
z\I)~

0Q9K,^-q2~j4Tp0
Q.O^7GM'EX@,B0

事件数据

所有的鼠标事件都使用MouseButtonEventArgs和MouseEventArgs作为事件数据，通过这两个参数可以获取相关事件数据，使用GetPosition方法或者Source、Handled属性。如下面的XAML声明：

<CanvasBackground="#46461F">
u4R+^v*W{H
|Q0<RectangleFill="Orange"Stroke="White"StrokeThickness="2"
C	o#V"t*e|r!}2^0b0Canvas.Top="40"Canvas.Left="130"
H
yff%Y,E4W-j0Width="240"Height="120"ITPUB个人空间:Q2D&C4R8J
p'l
MouseMove="Rectangle_MouseMove"/>ITPUB个人空间]]6H(C.Q$Vr:Z.g
dL
<TextBlockx:Name="Status"Foreground="White"Text="Status"
q#K'\6d]j"[0Canvas.Left="100"Canvas.Top="200"/>
\6G(n
EZ6Y0</Canvas>

为矩形添加MouseMove事件处理，在鼠标移动时我们获取当前坐标位置，并显示出来：

private voidRectangle_MouseMove(objectsender,MouseEventArgse)ITPUB个人空间*a\4WW
o.KTY
{
9be]+]6[
D)K/e
f0Pointp = e.GetPosition(e.SourceasFrameworkElement);
z:o i;Q7j"MiZQ0Status.Text =String.Format("坐标位置（{0}:{1}）",p.X,p.Y);
ri"r$~P/Rg0}

运行后在矩形中移动鼠标，效果如下：

:w"W['GEG0

路由事件

在Silverlight中，提供了事件路由，使得我们可以在父节点上接收和处理来自于子节点的事件，Silverlight中的路由事件采用了冒 泡路由策略。在鼠标事件中MouseLeftButtonDown 、MouseLeftButtonUp 、MouseMove三个事件都支持路由事件，而MouseEnter、MouseLeave两个事件不支持。下面的XAML中我们为Canvas对象声 明了一个MouseLeftButtonDown事件：

<Canvasx:Name="ParentCanvas"Background="#46461F"
	ldX m/a8?!`!J0MouseLeftButtonDown="ParentCanvas_MouseLeftButtonDown">ITPUB个人空间;k|L7{4w!JU
<Rectanglex:Name="RecA"Fill="Orange"Stroke="White"StrokeThickness="2"
;QB)HHNCP"R6T7k,W_0Canvas.Top="40"Canvas.Left="60"
C:U*o\R7[&v%]
R"}0Width="160"Height="100"/>ITPUB个人空间-K&S&K6WN;}^{
H
<Rectanglex:Name="RecB"Fill="LightBlue"Stroke="White"StrokeThickness="2"ITPUB个人空间*t2I(}uf\3H
Canvas.Top="40"Canvas.Left="240"
TO%iw9J(xn$t0Width="160"Height="100"/>ITPUB个人空间3D8G)V*y_:G0E!D
<TextBlockx:Name="Status"Foreground="White"Text="Status"ITPUB个人空间%T;C-Y%oy@LW3A.C
Canvas.Left="100"Canvas.Top="200"/>ITPUB个人空间s3cE0KP7AG
</Canvas>

添加MouseLeftButtonDown事件处理程序，显示当前鼠标按下时的坐标，并显示源控件名称：

private voidParentCanvas_MouseLeftButtonDown(objectsender,MouseButtonEventArgse)
y [\,bA#v0D0{ITPUB个人空间y2g%o-dc.nV${
Stringmsg ="x:y = "+ e.GetPosition(senderasFrameworkElement).ToString();ITPUB个人空间.S+E;t,gWl#K&w4{
msg +=" from "+ (e.SourceasFrameworkElement).Name;ITPUB个人空间@4x.C3u+c#m2B#_
Status.Text = msg;
,nS7o Gc:b+j0}

运行后在RecA上按下鼠标：
wJ9S$kkJ/P\D0
lA'}Ip2Ct0在Canvas上按下鼠标：ITPUB个人空间9[I~u d

F?6}:G6V1K0

结束语

本文简单介绍了Silverlight 2中关于鼠标事件处理的一些知识，包括事件注册、获取事件数据、路由事件等。在下一篇中，我们将使用这些鼠标事件来实现一个简单的拖放功能。

ITPUB个人空间,h8f^F9|Qxt