鼠標事件處理 路由事件

一步一步學Silverlight 2系列（4）：鼠標事件處理

---

2008-03-07 23:46:00

　標籤：一步一步學Silverlight2系列 鼠標 處理 Silverlight　　　[推送到技術圈]

版權聲明：原創作品，允許轉載，轉載時請務必以超鏈接形式標明文章 原始出處 、作者信息和本聲明。否則將追究法律責任。http://terrylee.blog.51cto.com/342737/67220

概述

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中關於鼠標事件處理的一些知識，包括事件註冊、獲取事件數據、路由事件等。在下一篇中，我們將使用這些鼠標事件來實現一個簡單的拖放功能。

本文出自 “TerryLee技術專欄” 博客，請務必保留此出處http://terrylee.blog.51cto.com/342737/67220

本文出自 51CTO.COM技術博客