【李会军】一步一步学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">ITPUB个人空间i,R`$z&}3Qz
r
<EllipseWidth="120"Height="120"Fill="Orange"
h.d!u
Bkn/J$o!a^"Y-I0Canvas.Top="60"Canvas.Left="80"
Krq;{2I2^/}8A~0MouseEnter="OnMouseEnter"
8`2d1~8vZ`}0MouseLeave="OnMouseLeave"/>
(jhddP0ITPUB个人空间\*WP ^
A*X&^
<EllipseWidth="120"Height="120"Fill="Orange"ITPUB个人空间(h$u(R)P0n^;r)t
Canvas.Top="60"Canvas.Left="280"
,\"_5`nZYd0]7e6`0MouseEnter="OnMouseEnter"
)CG5m}tE$FG:E&i0MouseLeave="OnMouseLeave"/>ITPUB个人空间7^RNjK1r
</Canvas>

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

voidOnMouseEnter(objectsender,MouseEventArgse)ITPUB个人空间4\["gg3{Ow
{
"qBA.O"Hc2`z^eV0Ellipseell = senderasEllipse;
'l8~~6_
eg2QG#B0ell.Fill =newSolidColorBrush(Colors.Yellow);
CZS@7s0}ITPUB个人空间
j
q	H2AN$K;ar
voidOnMouseLeave(objectsender,MouseEventArgse)ITPUB个人空间:P!]gB4~`:bM
{
:Ou}0I{i3?XZ0Ellipseell = senderasEllipse;
+Xf\@8gX!\"z$A0ell.Fill =newSolidColorBrush(Colors.Green);ITPUB个人空间
a%jcT$hN	@Lh9{
}

运行后效果如下：
ea}0a&k D0ITPUB个人空间2Bhm+VU+xT
分别在两个圆形上放上鼠标并移开后如下所示：ITPUB个人空间(d x.V9p3oU
ITPUB个人空间_;nQ a7h
{ `'f,@

使用代码管理事件

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

<CanvasBackground="#46461F">
,_ iy R9^(`0<Ellipsex:Name="ellipse1"Width="120"Height="120"Fill="Orange"ITPUB个人空间R8N#j)xv?
Canvas.Top="60"Canvas.Left="80"/>
ms2q.D7{\
x	jA0ITPUB个人空间X'KSfQ2mV] {
<Ellipsex:Name="ellipse2"Width="120"Height="120"Fill="Orange"
!hJG7{z-{$J0Canvas.Top="60"Canvas.Left="280"/>

M'B:bEaI#q4p)Hv0</Canvas>

在代码中进行事件注册：

public partial classPage:UserControl

a;@E%NH8K0{
'd{(e
M5fj0publicPage()ITPUB个人空间xhZ
p%l4p!a	e
{ITPUB个人空间	R7V*X%I4q'P+x,_2Y
InitializeComponent();ITPUB个人空间&z }N6E1l*i4Q
ellipse1.MouseEnter +=newMouseEventHandler(OnMouseEnter);
ruo2n
KW0ellipse1.MouseLeave +=newMouseEventHandler(OnMouseLeave);
-X/r)^f,[(e0ellipse2.MouseEnter +=newMouseEventHandler(OnMouseEnter);ITPUB个人空间h$GZwS3PKR$D
ellipse2.MouseLeave +=newMouseEventHandler(OnMouseLeave);
h5V$jdv4`5E;n0}ITPUB个人空间3B&B9n[A?
ITPUB个人空间8X:]d)w;f
voidOnMouseEnter(objectsender,MouseEventArgse)
"j)Gt~
uF
r0{ITPUB个人空间6o{$Yk.lq3@k*x
Ellipseell = senderasEllipse;
8mD;_R5F#R]#[0ell.Fill =newSolidColorBrush(Colors.Yellow);
x-IoN'e1A)I0}ITPUB个人空间g3q
n!K+B3p
voidOnMouseLeave(objectsender,MouseEventArgse)
U/Y@8D#X-\/`rg0{
KD:n'U5kY6~0Ellipseell = senderasEllipse;ITPUB个人空间vy(x7Z+^+Y
K|a
ell.Fill =newSolidColorBrush(Colors.Green);
i6|#jf_x"\0}
+}9W$vr}^0}

运行后可以看到跟上面一样的效果：
p2g,o-[{+T0
#|Vkb#PLR0
'kV
kakJ {Ch|0

事件数据

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

<CanvasBackground="#46461F">ITPUB个人空间f0A)k
m.G9\k
<RectangleFill="Orange"Stroke="White"StrokeThickness="2"ITPUB个人空间8bZ;q-Gi2m#Q-s
Canvas.Top="40"Canvas.Left="130"ITPUB个人空间c5E)ybi7f6}\
Width="240"Height="120"ITPUB个人空间
\lO
uUl
MouseMove="Rectangle_MouseMove"/>ITPUB个人空间)l&L+{z
@K*l
<TextBlockx:Name="Status"Foreground="White"Text="Status"ITPUB个人空间(`fr)S,v4syXts
Canvas.Left="100"Canvas.Top="200"/>
	?7|#JA-l_Z	^l
J0</Canvas>

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

private voidRectangle_MouseMove(objectsender,MouseEventArgse)
n^5aUe8WY#zq*F0{
*tg.^6s5\-P0Pointp = e.GetPosition(e.SourceasFrameworkElement);ITPUB个人空间(p:c7y2l`&U~C
Status.Text =String.Format("坐标位置（{0}:{1}）",p.X,p.Y);ITPUB个人空间*zm/Cp1w5GGtn
}

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

%p"WP8yJ[4fR4@0

路由事件

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

<Canvasx:Name="ParentCanvas"Background="#46461F"
C
ZmE$]s|I0MouseLeftButtonDown="ParentCanvas_MouseLeftButtonDown">
/G!N5^/aK|$r!j
J0<Rectanglex:Name="RecA"Fill="Orange"Stroke="White"StrokeThickness="2"
't4g(E-hm'O2j0Canvas.Top="40"Canvas.Left="60"
dQ'm#{S0Width="160"Height="100"/>

?
O&W[,^Q3q9g0<Rectanglex:Name="RecB"Fill="LightBlue"Stroke="White"StrokeThickness="2"
6r5[;`a N7u0Canvas.Top="40"Canvas.Left="240"ITPUB个人空间3u0v(M6[^){5z.Q4\\
Width="160"Height="100"/>ITPUB个人空间 d&y)B7\1wj+@
rW.M
<TextBlockx:Name="Status"Foreground="White"Text="Status"
a8IK'z!QW*AS+I0Canvas.Left="100"Canvas.Top="200"/>
 ~C!si$XRch_l0</Canvas>

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

private voidParentCanvas_MouseLeftButtonDown(objectsender,MouseButtonEventArgse)
R
\1S]*OqT0{

l
w({{,F4_t0Stringmsg ="x:y = "+ e.GetPosition(senderasFrameworkElement).ToString();ITPUB个人空间5C0Yz	L(sh6Gs	c;E%S
msg +=" from "+ (e.SourceasFrameworkElement).Name;
T2i+G#}ivGt4N0Status.Text = msg;ITPUB个人空间 l?_CFOR'T+v_
}

运行后在RecA上按下鼠标：
)eS5uM!g(~x0ITPUB个人空间7g5~*p A:{F
在Canvas上按下鼠标：ITPUB个人空间9?UWJO4w

f!dt-Z%q-t7k0

结束语

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

+U*UY9Rwk/f6D0