【李会军】一步一步学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">
Yp4bC7`2d3p,V2FAR0<EllipseWidth="120"Height="120"Fill="Orange"ITPUB个人空间&l	`gPmk\,~
Canvas.Top="60"Canvas.Left="80"ITPUB个人空间	Y-f0fg7w$J+x|[
MouseEnter="OnMouseEnter"
A
f
q)N5nV0MouseLeave="OnMouseLeave"/>ITPUB个人空间e"C(E.tgA
ITPUB个人空间$j|D;M?
<EllipseWidth="120"Height="120"Fill="Orange"
4X
YO*nO6VKm0Canvas.Top="60"Canvas.Left="280"
a
y&q5Chr0MouseEnter="OnMouseEnter"ITPUB个人空间9WW"m!XWs$hq!U(aF#{+n
MouseLeave="OnMouseLeave"/>ITPUB个人空间
sqT
sW4_!N7w
</Canvas>

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

voidOnMouseEnter(objectsender,MouseEventArgse)
0@
_$Q)~-^ m,H3]0{
y0K`YG	A Hr'H0Ellipseell = senderasEllipse;
|ulcusm.UM0ell.Fill =newSolidColorBrush(Colors.Yellow);
*Kj[
xka*p
v0}
&c,f6O*[Yt(r0voidOnMouseLeave(objectsender,MouseEventArgse)ITPUB个人空间0rLSpH-]q q
{
D|+[3W3D/SRHw1{)e0Ellipseell = senderasEllipse;ITPUB个人空间
G%}a!mX
ell.Fill =newSolidColorBrush(Colors.Green);ITPUB个人空间4fT)Jh"Ay$T4]
}

运行后效果如下：ITPUB个人空间 ] n vEp0s7Y~U \1s
ITPUB个人空间5}^)S1O$})M7IE N
分别在两个圆形上放上鼠标并移开后如下所示：
.r sz,d|IS0
u)S#PX"C9j
s s0

使用代码管理事件

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

<CanvasBackground="#46461F">ITPUB个人空间
x
nI9_Z*|{?/cN p
<Ellipsex:Name="ellipse1"Width="120"Height="120"Fill="Orange"ITPUB个人空间
vAJ:Q-C ^AYzl8i
Canvas.Top="60"Canvas.Left="80"/>ITPUB个人空间3F3F!E4g'A1_

xE%tb9s	ZBVN0<Ellipsex:Name="ellipse2"Width="120"Height="120"Fill="Orange"ITPUB个人空间
T!lUUSz&Y
u-n
Canvas.Top="60"Canvas.Left="280"/>
j.[*d-ka K+LSo,y0</Canvas>

在代码中进行事件注册：

public partial classPage:UserControlITPUB个人空间ZQ~7`4D
{
e4dC&p
O{OC0publicPage()
.AD	Vu1Z0w;Wl:r@0{
c0Sl5e8tE^I	t0InitializeComponent();
CY%rq"_bt8AwD0x0ellipse1.MouseEnter +=newMouseEventHandler(OnMouseEnter);ITPUB个人空间4`3B9?Y
G(i9U
ellipse1.MouseLeave +=newMouseEventHandler(OnMouseLeave);ITPUB个人空间	k"Vg&KeIV
ellipse2.MouseEnter +=newMouseEventHandler(OnMouseEnter);
n*D
b6DH1j j0ellipse2.MouseLeave +=newMouseEventHandler(OnMouseLeave);ITPUB个人空间!t7q
T5y/WD
}
X
eP#G2V~R
`E6JYm0
:AiV3Tc-p~.u8o`0voidOnMouseEnter(objectsender,MouseEventArgse)
 Ef3tZ[y0{
l7`y!p&U0V7r0Ellipseell = senderasEllipse;ITPUB个人空间oG0f8\j]
ell.Fill =newSolidColorBrush(Colors.Yellow);ITPUB个人空间,~7]i6z9~Lt0F
u
}
NM^`?#W.@
H
rH0voidOnMouseLeave(objectsender,MouseEventArgse)
8}@6yCQ\^r"I0{
;}!`ku4s&l0Ellipseell = senderasEllipse;
?Si3M8wd
I5SJ X0ell.Fill =newSolidColorBrush(Colors.Green);
:W\vms#^3^0}ITPUB个人空间OziZ
x5U
}

运行后可以看到跟上面一样的效果：ITPUB个人空间1q}+`^R*wA
ITPUB个人空间P(m3WM&t/vcM+|

6E4R eTyTa a0

事件数据

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

<CanvasBackground="#46461F">
"]mL4bA.du
_0<RectangleFill="Orange"Stroke="White"StrokeThickness="2"ITPUB个人空间"~ZUL
hF9E%HmA
Canvas.Top="40"Canvas.Left="130"
8EADM	?t0Width="240"Height="120"ITPUB个人空间#Ty~(fZ,`
MouseMove="Rectangle_MouseMove"/>
6b&DLL0UaQiMT)[0<TextBlockx:Name="Status"Foreground="White"Text="Status"ITPUB个人空间%k5Lf&Qj/}8E]+f^8P3m
Canvas.Left="100"Canvas.Top="200"/>
0`*TF,~:UC;Be0</Canvas>

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

private voidRectangle_MouseMove(objectsender,MouseEventArgse)ITPUB个人空间R8uAj5}4gX0I
{ITPUB个人空间*|,swpw;~5aG
Pointp = e.GetPosition(e.SourceasFrameworkElement);ITPUB个人空间(N Xqm2\B$l
{;ym
Status.Text =String.Format("坐标位置（{0}:{1}）",p.X,p.Y);ITPUB个人空间F+Oe)Z${
}

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

~WR.l/Jx0

路由事件

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

<Canvasx:Name="ParentCanvas"Background="#46461F"ITPUB个人空间\]q`n
`o&V
MouseLeftButtonDown="ParentCanvas_MouseLeftButtonDown">
-`$|&La4AK&A
q0<Rectanglex:Name="RecA"Fill="Orange"Stroke="White"StrokeThickness="2"
}?0}1h%F3S!u~1t0Canvas.Top="40"Canvas.Left="60"ITPUB个人空间;V|+\e~
UV
Width="160"Height="100"/>
Z
El!VO"j7C {0<Rectanglex:Name="RecB"Fill="LightBlue"Stroke="White"StrokeThickness="2"
xMY-m'Q0Canvas.Top="40"Canvas.Left="240"

X
|0q0OD1VWz6S0Width="160"Height="100"/>
V[:hi1_.v
o0<TextBlockx:Name="Status"Foreground="White"Text="Status"ITPUB个人空间!t4XT]EUa!fF
Canvas.Left="100"Canvas.Top="200"/>
YKgW4?(YBX
C0</Canvas>

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

private voidParentCanvas_MouseLeftButtonDown(objectsender,MouseButtonEventArgse)ITPUB个人空间*qI.t7M&v7{m6|
{ITPUB个人空间\NR-qAV
Stringmsg ="x:y = "+ e.GetPosition(senderasFrameworkElement).ToString();
fs1AK`u0msg +=" from "+ (e.SourceasFrameworkElement).Name;ITPUB个人空间2J]Q;l0Z}
Status.Text = msg;ITPUB个人空间Z8d%SS T"ZN
z
}

运行后在RecA上按下鼠标：
1j.NJn$`a#S(u$X0
_+Pf:y r(D&`S,p0在Canvas上按下鼠标：
{e\Y.E6}Q#^0S0ITPUB个人空间#@*m6T:t5\.N

结束语

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

ITPUB个人空间-b[7~+\)BJN(|e:K_