一步一步学Silverlight 2系列(4):鼠标事件处理-阿里云开发者社区

开发者社区> 技术小甜> 正文

一步一步学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);
}
运行后效果如下:
 
分别在两个圆形上放上鼠标并移开后如下所示:
 

使用代码管理事件

除了在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);
    }
}
运行后可以看到跟上面一样的效果:
 

事件数据

所有的鼠标事件都使用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);
}
运行后在矩形中移动鼠标,效果如下:
 

路由事件

在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上按下鼠标:
 
在Canvas上按下鼠标:
 

结束语

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















本文转自lihuijun51CTO博客,原文链接: http://blog.51cto.com/terrylee/67220,如需转载请自行联系原作者


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
仿酷狗音乐播放器开发日志二十五 duilib右键事件的不足的bug修复
转载请说明原出处,谢谢~~        虽然仿酷狗的各个菜单早就写好了,但是一直没有附加到程序里。今天把菜单和播放列表控件关联时发现了问题。        和播放列表相关的菜单有三个,分别是每个音乐项目控件相关的菜单、分组的菜单、音乐电台的菜单。
872 0
jquery之鼠标滑过图片mousemove事件
需要解决的问题:鼠标停在图片上面的时候的 现在这个张图片的相关信息,  我的第一个感觉是使用鼠标事件:mousemove 当他/她停留在图片上面都 时候就可以触发相应显示的事件, mouseout离开的时候触发隐藏事件 但是在实际的完成中发现:鼠标停留在图片上 信息会不停的抖动,查阅相关资料发现,手册对mouseover事件的解释是: 注意:用户把鼠标移动一个像素,就会发生一次 mousemove 事件。
765 0
C#引用CefSharp并屏蔽鼠标右键和禁止拖动放置事件
原文:C#引用CefSharp并屏蔽鼠标右键和禁止拖动放置事件 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u013564470/article/details/78339957 ...
3008 0
怎么设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程
6916 0
ArcGIS API for Silverlight 鼠标移入移出地图要素弹出窗口(优化处理)
     在之前博客里的ArcGIS API for Silverlight 弹出框实例中,是通过点击地图要素,弹出框,但是由于没有控制元素个数,只是通过显示隐藏来进行的话,在鼠标移入和移出操作中,会出现鼠标移入的时候,总不能立刻弹出框,而是需要多次才行,用户体验较差,现在通过控制加入一个弹出框,移出时去除刚加入的弹出框,严格控制弹出框个数来实现。
776 0
Silverlight 2.5D RPG游戏技“.NET技术”巧与特效处理:(九)粒子系统
  粒子系统通常用于三维场景中进行真实环境模拟,比如第四节的天气系统。天气的实现是粒子系统最重要的应用领域之一,所有的一切无论是云、雨、雾,还是落叶、陨石及闪电,都可视作基础粒子;除此之外,游戏中常常还会用到粒子系统来渲染像发光、轨迹等抽象效果。
860 0
一起谈.NET技术,Silverlight 2.5D RPG游戏技巧与特效处理:(九)粒子系统
  粒子系统通常用于三维场景中进行真实环境模拟,比如第四节的天气系统。天气的实现是粒子系统最重要的应用领域之一,所有的一切无论是云、雨、雾,还是落叶、陨石及闪电,都可视作基础粒子;除此之外,游戏中常常还会用到粒子系统来渲染像发光、轨迹等抽象效果。
718 0
+关注
6323
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载