One-step learning of Silverlight 2 series (4): mouse event processing

Overview

The release of Silverlight 2 Beta 1 brings us a lot of surprises from Runtime and Tools, such as supporting the framework languages Visual Basic, Visual C #, IronRuby, Ironpython, A series of new features such as JSON, Web Service, WCF, and Sockets support. The one-step learning Silverlight 2 series article takes you to Silverlight 2 development quickly.

This is the fourth article in the series. Learn how to handle mouse events in Silverlight 2. Supported mouse events include MouseMove, MouseEnter, MouseLeave, MouseLeftButtonDown, and MouseLeftButtonUp.

Declare events

You can attach a mouse event to any Silverlight object. The following XAML declaration adds the MouseEnter and MouseLeave events to the two circles:

<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>

Write an event handler. When you move the cursor up and move the cursor away, the fill color of the circle is changed:

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);}

The effect after running is as follows:

Place the mouse over the two circles and move the mouse away as follows:

Use code to manage events

In addition to declaring events in XAML, you can also directly use code to register events. simply modify the above XAML file, remove the event declaration, and add Name to the two circles respectively:

<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>

Register an event in the Code:

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);    }}

After running, you can see the same effect as above:

Event Data

All mouse events use MouseButtonEventArgs and MouseEventArgs as event data. These two parameters can be used to obtain event data and use the GetPosition method or the Source and Handled attributes. The following XAML declaration:

<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>

Add a MouseMove event for the rectangle. When the mouse moves, we obtain the current Coordinate Position and display it:

Private void Rectangle_MouseMove (object sender, MouseEventArgs e) {Point p = e. getPosition (e. source as FrameworkElement); Status. text = String. format ("Coordinate Position ({0 }:{ 1})", p. x, p. Y );}

Move the mouse in the rectangle after running. The effect is as follows:

Routing event

In Silverlight, Event Routing is provided so that we can receive and process events from subnodes on the parent node. routing events in Silverlight adopt a bubble routing policy. In mouse events, the MouseLeftButtonDown, MouseLeftButtonUp, and MouseMove events Support routing events, but the MouseEnter and MouseLeave events do not. In the following XAML, we declare a MouseLeftButtonDown event for the Canvas object:

<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>

Add the MouseLeftButtonDown event handler to display the coordinates when the current mouse is pressed and the source control Name:

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;}

After running, press the mouse on RecA:

Press the mouse on the Canvas:

Conclusion

This article briefly introduces some knowledge about mouse event processing in Silverlight 2, including event registration, event data retrieval, and routing events. In the next article, we will use these mouse events to implement a simple drag-and-drop function.

Next article: Learn Silverlight 2 series (5) step by step: implement simple drag and drop Functions