【李会军】一步一步学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">
<EllipseWidth="120"Height="120"Fill="Orange"
Canvas.Top="60"Canvas.Left="80"
MouseEnter="OnMouseEnter"
MouseLeave="OnMouseLeave"/>
<EllipseWidth="120"Height="120"Fill="Orange"
Canvas.Top="60"Canvas.Left="280"
MouseEnter="OnMouseEnter"
MouseLeave="OnMouseLeave"/>
</Canvas>
编写事件处理程序，鼠标放上去时和鼠标移开时分别改变圆形的填充色：
voidOnMouseEnter(objectsender,MouseEventArgse)
{
Ellipseell = senderasEllipse;
ell.Fill =newSolidColorBrush(Colors.Yellow);
}
voidOnMouseLeave(objectsender,MouseEventArgse)
{
Ellipseell = senderasEllipse;
ell.Fill =newSolidColorBrush(Colors.Green);
}
运行后效果如下：
分别在两个圆形上放上鼠标并移开后如下所示：
使用代码管理事件
除了在XAML中声明事件外，也可以直接使用代码来注册事件，简单的修改一下上面的XAML文件，去掉事件的声明并为两个圆形分别加上Name：
<CanvasBackground="#46461F">
<Ellipsex:Name="ellipse1"Width="120"Height="120"Fill="Orange"
Canvas.Top="60"Canvas.Left="80"/>
<Ellipsex:Name="ellipse2"Width="120"Height="120"Fill="Orange"
Canvas.Top="60"Canvas.Left="280"/>
</Canvas>
在代码中进行事件注册：
public partial classPage:UserControl
{
publicPage()
{
InitializeComponent();
ellipse1.MouseEnter +=newMouseEventHandler(OnMouseEnter);
ellipse1.MouseLeave +=newMouseEventHandler(OnMouseLeave);
ellipse2.MouseEnter +=newMouseEventHandler(OnMouseEnter);
ellipse2.MouseLeave +=newMouseEventHandler(OnMouseLeave);
}
voidOnMouseEnter(objectsender,MouseEventArgse)
{
Ellipseell = senderasEllipse;
ell.Fill =newSolidColorBrush(Colors.Yellow);
}
voidOnMouseLeave(objectsender,MouseEventArgse)
{
Ellipseell = senderasEllipse;
ell.Fill =newSolidColorBrush(Colors.Green);
}
}
事件数据
所有的鼠标事件都使用MouseButtonEventArgs和MouseEventArgs作为事件数据，通过这两个参数可以获取相关事件数据，使用GetPosition方法或者Source、Handled属性。如下面的XAML声明：
<CanvasBackground="#46461F">
<RectangleFill="Orange"Stroke="White"StrokeThickness="2"
Canvas.Top="40"Canvas.Left="130"
Width="240"Height="120"
MouseMove="Rectangle_MouseMove"/>
<TextBlockx:Name="Status"Foreground="White"Text="Status"
Canvas.Left="100"Canvas.Top="200"/>
</Canvas>
为矩形添加MouseMove事件处理，在鼠标移动时我们获取当前坐标位置，并显示出来：
private voidRectangle_MouseMove(objectsender,MouseEventArgse)
{
Pointp = e.GetPosition(e.SourceasFrameworkElement);
Status.Text =String.Format("坐标位置（{0}:{1}）",p.X,p.Y);
}
运行后在矩形中移动鼠标，效果如下：
路由事件
在Silverlight中，提供了事件路由，使得我们可以在父节点上接收和处理来自于子节点的事件，Silverlight中的路由事件采用了冒 泡路由策略。在鼠标事件中MouseLeftButtonDown 、MouseLeftButtonUp 、MouseMove三个事件都支持路由事件，而MouseEnter、MouseLeave两个事件不支持。下面的XAML中我们为Canvas对象声 明了一个MouseLeftButtonDown事件：
<Canvasx:Name="ParentCanvas"Background="#46461F"
MouseLeftButtonDown="ParentCanvas_MouseLeftButtonDown">
<Rectanglex:Name="RecA"Fill="Orange"Stroke="White"StrokeThickness="2"
Canvas.Top="40"Canvas.Left="60"
Width="160"Height="100"/>
<Rectanglex:Name="RecB"Fill="LightBlue"Stroke="White"StrokeThickness="2"
Canvas.Top="40"Canvas.Left="240"
Width="160"Height="100"/>
<TextBlockx:Name="Status"Foreground="White"Text="Status"
Canvas.Left="100"Canvas.Top="200"/>
</Canvas>
添加MouseLeftButtonDown事件处理程序，显示当前鼠标按下时的坐标，并显示源控件名称：
private voidParentCanvas_MouseLeftButtonDown(objectsender,MouseButtonEventArgse)
{
Stringmsg ="x:y = "+ e.GetPosition(senderasFrameworkElement).ToString();
msg +=" from "+ (e.SourceasFrameworkElement).Name;
Status.Text = msg;
}
结束语
本文简单介绍了Silverlight 2中关于鼠标事件处理的一些知识，包括事件注册、获取事件数据、路由事件等。在下一篇中，我们将使用这些鼠标事件来实现一个简单的拖放功能。
导入论坛 引用链接 收藏 分享给好友 推荐到圈子 管理 举报
TAG:
标题搜索
我的存档
数据统计
- 访问量: 314758
- 日志数: 3284
- 影音数: 7
- 文件数: 1
- 建立时间: 2008-01-04
- 更新时间: 2010-03-05
