(4): Silverlight 2 mouse event processing

Summary 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. The Declaration event can be appended to any Silverlight object for the mouse event. 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 shown in the following figure: using code management 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, we can see the same effect as above: All mouse events of event data use mousebuttoneventargs and mouseeventargs as event data. These two parameters can be used to obtain relevant event data, 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 result is as follows: routing events in Silverlight provide Event Routing so that we can receive and process events from child nodes 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 the RecA: click the mouse on the canvas: Conclusion This article briefly introduces some knowledge about mouse event processing in Silverlight 2, this includes 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.

This article is from the "terrylee technology column" blog, please be sure to keep this source http://terrylee.blog.51cto.com/342737/67220

This article is from 51cto. com technical blog