一步一步学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事件:

<Canvas Background="#46461F">
    <Ellipse Width="120" Height="120" Fill="Orange"
             Canvas.Top="60" Canvas.Left="80"
             MouseEnter="OnMouseEnter"
             MouseLeave="OnMouseLeave"/>
    
    <Ellipse Width="120" Height="120" Fill="Orange"
             Canvas.Top="60" Canvas.Left="280"
             MouseEnter="OnMouseEnter"
             MouseLeave="OnMouseLeave"/>
</Canvas>

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

void OnMouseEnter(object sender, MouseEventArgs e)
{
    Ellipse ell = sender as Ellipse;
    ell.Fill = new SolidColorBrush(Colors.Yellow);
}
void OnMouseLeave(object sender, MouseEventArgs e)
{
    Ellipse ell = sender as Ellipse;
    ell.Fill = new SolidColorBrush(Colors.Green);
}

运行后效果如下:

TerryLee_Silverlight2_0030

分别在两个圆形上放上鼠标并移开后如下所示:

TerryLee_Silverlight2_0031

使用代码管理事件

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

<Canvas Background="#46461F">
    <Ellipse x:Name="ellipse1" Width="120" Height="120" Fill="Orange"
             Canvas.Top="60" Canvas.Left="80"/>
    
    <Ellipse x:Name="ellipse2" Width="120" Height="120" Fill="Orange"
             Canvas.Top="60" Canvas.Left="280"/>
</Canvas>

在代码中进行事件注册:

public partial class Page : UserControl
{
    public Page()
    {
        InitializeComponent();
        ellipse1.MouseEnter += new MouseEventHandler(OnMouseEnter);
        ellipse1.MouseLeave += new MouseEventHandler(OnMouseLeave);
        ellipse2.MouseEnter += new MouseEventHandler(OnMouseEnter);
        ellipse2.MouseLeave += new MouseEventHandler(OnMouseLeave);
    }

    void OnMouseEnter(object sender, MouseEventArgs e)
    {
        Ellipse ell = sender as Ellipse;
        ell.Fill = new SolidColorBrush(Colors.Yellow);
    }
    void OnMouseLeave(object sender, MouseEventArgs e)
    {
        Ellipse ell = sender as Ellipse;
        ell.Fill = new SolidColorBrush(Colors.Green);
    }
}

运行后可以看到跟上面一样的效果:

TerryLee_Silverlight2_0031

事件数据

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

<Canvas Background="#46461F">
    <Rectangle Fill="Orange" Stroke="White" StrokeThickness="2"
               Canvas.Top="40" Canvas.Left="130"
               Width="240" Height="120"
               MouseMove="Rectangle_MouseMove"/>
    <TextBlock x:Name="Status" Foreground="White" Text="Status" 
               Canvas.Left="100" Canvas.Top="200"/>
</Canvas>

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

private void Rectangle_MouseMove(object sender, MouseEventArgs e)
{
    Point p = e.GetPosition(e.Source as FrameworkElement);
    Status.Text = String.Format("坐标位置({0}:{1})",p.X,p.Y);
}

运行后在矩形中移动鼠标,效果如下:

TerryLee_Silverlight2_0032

路由事件

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

<Canvas x:Name="ParentCanvas" Background="#46461F" 
        MouseLeftButtonDown="ParentCanvas_MouseLeftButtonDown">
    <Rectangle x:Name="RecA" Fill="Orange" Stroke="White" StrokeThickness="2"
               Canvas.Top="40" Canvas.Left="60"
               Width="160" Height="100"/>
    <Rectangle x:Name="RecB" Fill="LightBlue" Stroke="White" StrokeThickness="2"
               Canvas.Top="40" Canvas.Left="240"
               Width="160" Height="100"/>
    <TextBlock x:Name="Status" Foreground="White" Text="Status" 
               Canvas.Left="100" Canvas.Top="200"/>
</Canvas>

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

private void ParentCanvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    String msg = "x:y = " + e.GetPosition(sender as FrameworkElement).ToString();
    msg += " from " + (e.Source as FrameworkElement).Name;
    Status.Text = msg;
}

运行后在RecA上按下鼠标:

TerryLee_Silverlight2_0033

在Canvas上按下鼠标:

TerryLee_Silverlight2_0034

结束语

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

下一篇:一步一步学Silverlight 2系列(5):实现简单的拖放功能

作者:TerryLee
出处:http://terrylee.cnblogs.com
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
标签: Silverlight, XAML
posted @ 2008-03-07 23:46 TerryLee 阅读(29606) 评论(47) 编辑 收藏

 回复 引用   
#1楼 2008-03-08 14:27 hlink[未注册用户]
MouseMove 、MouseEnter 、MouseLeave 、MouseLeftButtonDown、MouseLeftButtonUp在操作storyboard时出现bug,没有错误提示
 回复 引用 查看   
#2楼[楼主] 2008-03-08 14:51 TerryLee      
@hlink
现在Beta1对于错误处理确实做的不好,很多错误都不容易查找

 回复 引用 查看   
#3楼 2008-03-20 00:15 Cat Chen      
“在Silverlight中,提供了事件路由,使得我们可以在父节点上接收和处理来自于子节点的事件,Silverlight中的路由事件采用了冒泡路由策略。”

──我想第一个“Silverlight”你其实想说“WPF”吧?

 回复 引用 查看   
#4楼[楼主] 2008-03-20 09:05 TerryLee      
@Cat Chen
嗯,其实它们两者在这方面是一致的,呵呵:)

 回复 引用   
#5楼 2008-03-26 21:22 332[未注册用户]
x:Name 可以指定某个控件,那x:Uid是什么意思,不象我们平时用的ID!
谢谢!

 回复 引用   
#6楼 2008-03-31 16:14 jazz[未注册用户]
楼主你好,我有一个问题想请教你一下。就是我只能在这个文件下Page.xaml进行编辑吗?
如果我想自己添加一个类似的文件,应该怎么去设置呢。比如用不用去修改SilverlightApplication1TestPage.aspx这个文件里的<asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/SilverlightApplication1.xap" Version="2.0" Width="100%" Height="100%" />呢?
还请楼主帮忙解答一下。

 回复 引用   
#7楼 2008-04-01 10:37 壮壮[未注册用户]
--引用--------------------------------------------------
jazz: 楼主你好,我有一个问题想请教你一下。就是我只能在这个文件下Page.xaml进行编辑吗?
如果我想自己添加一个类似的文件,应该怎么去设置呢。比如用不用去修改SilverlightApplication1TestPage.aspx这个文件里的&lt;asp:Silverlight ID=&quot;Xaml1&quot; runat=&quot;server&quot; Source=&quot;~/ClientBin/SilverlightApplication1.xap&quot; Version=&quot;2.0&quot; Width=&quot;100%&quot; Height=&quot;100%&quot; /&gt;呢?
还请楼主帮忙解答一下。
--------------------------------------------------------
同问

 回复 引用   
#8楼 2008-04-16 11:39 lenco[未注册用户]
@壮壮
可以像flash那样 我需要什么文件 通过事件加载进来 不占页面初始加载的容量

 回复 引用 查看   
#9楼 2008-06-11 13:54 小牛大牛      
请问LZ:
我在一个工程下建立了两个.xaml文件(Page.xaml和example.xaml),但是运行时只运行Page.xaml的内容,example.xaml的内容不显示,我应该怎么解决啊?

 回复 引用   
#10楼 2008-07-07 17:50 Mirage[未注册用户]
第一次看Silverlight的东西
文章很欢快,佩服楼主 三言两语就把一个貌似很复杂的东西叙述的有条有理 所有的作者都像你就好了
期待....

 回复 引用 查看   
#11楼[楼主] 2008-07-08 16:13 TerryLee      
@Mirage
:)

 回复 引用   
#12楼 2008-08-22 21:14 eddieccq[未注册用户]
@jazz
在App.xaml.cs里修改Application_Startup事件。。。。

 回复 引用 查看   
#13楼[楼主] 2008-08-25 11:31 TerryLee      
@小牛大牛
刚看到,晕倒

设置一下RootVisual属性即可,我专门写过一篇文章:
http://www.cnblogs.com/Terrylee/archive/2008/07/02/tip-switch-usercontrol-in-silverlight-2-application.html

 回复 引用   
#14楼 2008-10-22 11:03 straybird[未注册用户]
private void ParentCanvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
String msg = "x:y = " + e.GetPosition(sender as FrameworkElement).ToString();
msg += " from " + (e.Source as FrameworkElement).Name;
Status.Text = msg;
}

我的silverlight 2为正式版,发现楼主的好多类属性我都没有,比如上面代码中鼠标按钮事件的e.Source 属性就没有

 回复 引用 查看   
#15楼[楼主] 2008-10-24 10:12 TerryLee      
@straybird
正式版好多API都发生了变化。

 回复 引用 查看   
#16楼 2008-11-01 00:04 Jasondong      
@straybird

正式版里对应的应该是e.OriginalSource

 回复 引用 查看   
#17楼 2008-11-03 14:11 zhaoliang      
你好,能帮我解释一下
Ellipse ell = sender as Ellipse
这句话的意思么

 回复 引用 查看   
#18楼[楼主] 2008-11-05 09:39 TerryLee      
@zhaoliang
简单的说,就是把sender转换为Ellipse对象,呵呵

 回复 引用   
#19楼 2008-12-10 16:00 gga[未注册用户]
Status.Text = msg;
这一句提示 “Status”不存在是怎么回事?

 回复 引用 查看   
#20楼[楼主] 2008-12-15 10:19 TerryLee      
@gga
Status是在XAML中定义的一个TextBlock,看看这个名称是否正确,如果正确,就再保存一下对应页面的XAML文件,重新尝试,这是VS对于Silverlight在智能提示方面的支持问题。

 回复 引用 查看   
#21楼 2009-01-06 15:26 Ivan-Yan      
现在在用sl 2.0正式版本,发现好多东西跟terry讲的已经发生了变化,但还是可以找到对应的东西~~ :)
 回复 引用 查看   
#22楼[楼主] 2009-01-06 18:35 TerryLee      
@Ivan-Yan
是的,到了RTW中有了很多的变化。

 回复 引用 查看   
#23楼 2009-02-19 16:21 深山老林      
@gga
你的控件的名字不叫Status或者你根本就没给控件起名字。

 回复 引用   
#24楼 2009-04-13 10:28 afaand20[未注册用户]
我也出现了这种情况,
Status.Text = msg;
这一句提示 “Status”不存在是怎么回事?
在XAML中定义的名称是正确的,我又保存一下对应页面的XAML文件,重新尝试。还是不行。请问是不是Status名称发生了变化呀?那又是什么呢?

 回复 引用 查看   
#25楼 2009-05-18 08:41 徐培华      
"sender as FrameworkElement" 这个语法很像VB了?
为什么这里要用这种语法呢?

 回复 引用 查看   
#26楼[楼主] 2009-05-18 11:10 TerryLee      
@徐培华
可以看一下.NET中as关键字的用法。

 回复 引用   
#27楼 2009-05-19 10:57 yecao198418[未注册用户]
MouseEventArgs e 不包含source 属性 啊!怎么办啊
 回复 引用 查看   
#28楼[楼主] 2009-05-19 16:38 TerryLee      
@yecao198418
在RTW中属性的名字已经修改OriginalSource,这个其实查一下文档就可以发现的。

 回复 引用   
#29楼 2009-06-01 10:11 Longleg's Blog
不明白大家怎么都不看文档啊,有些问题很简单自己就能解决,还来问博主。养成这种习惯可不好啊。
 回复 引用 查看   
#30楼 2009-06-08 15:01 大力      
--引用--------------------------------------------------
afaand20: 我也出现了这种情况,
Status.Text = msg;
这一句提示 “Status”不存在是怎么回事?
在XAML中定义的名称是正确的,我又保存一下对应页面的XAML文件,重新尝试。还是不行。请问是不是Status名称发生了变化呀?那又是什么呢?

--------------------------------------------------------
我也碰到了这个问题,重新生成下项目就不会了

 回复 引用 查看   
#31楼 2009-07-15 16:35 晴天1848      
@straybird
private void Rectangle_MouseMove(object sender, MouseEventArgs e)
{
Point p = e.GetPosition(e.Source as FrameworkElement);
Status.Text = String.Format("坐标位置({0}:{1})",p.X,p.Y);
}
这代码中 e.Source改为e.OriginalSource
即:
Point P = e.GetPosition(e.OriginalSource as FrameworkElement);

 回复 引用   
#32楼 2009-07-16 10:18 anu[未注册用户]
获益匪浅,说声谢谢!

虽然正式版跟beta版本有区别,但是出现差错的地方留言中有解答,这点最赞了

 回复 引用 查看   
#33楼 2009-07-16 20:11 Arthraim      
我使用的silverlight 3 sdk是09年6月的版本,试了一下,MouseMove已经有路由事件了,写法当然一样
博主,我怎么获得鼠标在地图上的经度和纬度呢?你上面的例子是实现平面坐标,我想要地图坐标,请指教
 回复 引用 查看   
#35楼 2010-04-06 14:51 丫头骗子      
private void Rectangle_MouseMove(object sender, MouseEventArgs e)
{
Point p = e.GetPosition(e.Source as FrameworkElement);
Status.Text = String.Format("坐标位置({0}:{1})",p.X,p.Y);
}
这代码中 e.Source改为e.OriginalSource
即:
Point P = e.GetPosition(e.OriginalSource as FrameworkElement);

是需要将e.Source改为e.OriginalSource

 回复 引用 查看   
#36楼 2011-06-15 23:33 番茄大人      
@丫头骗子
引用丫头骗子:
private void Rectangle_MouseMove(object sender, MouseEventArgs e)
{
Point p = e.GetPosition(e.Source as FrameworkElement);
Status.Text = String.Format("坐标位置({0}:{1})",p.X,p.Y);
}
这代码中 e.Source改为e.OriginalSource
即:
Point P = e.GetPosition(e.OriginalSource as FrameworkElement);

是需要将e.Source改为e...

我也发现了e.Source没有这个属性呀。ps:e.Source是干嘛的,直接sender as FrameworkElement不行么

 回复 引用 查看   
#37楼 2011-08-01 10:05 甜甜的      
@落叶归根@じょさん
这个你可以去看Google map api二次开发吧,纯js技术!

 回复 引用 查看   
#38楼 2011-08-24 15:32 KingCobra      
35楼和36楼都提出了一个问题
Point p = e.GetPosition(e.Source as FrameworkElement);
需要将e.Source改为e.OriginalSource ,这是正确的,不过我在实践中,将e.Source改为sender也是可以的,效果是一样的,即
Point p = e.GetPosition(sender as FrameworkElement);//取得鼠标点下的位置,楼主的方法有点问题,希望对大家有所帮助。