Silverlight 3 provides us some mouse events, containing MouseEnter, MouseLeave,

MouseLeftButtonDown, MouseLeftButtonUp, MouseMove, and MouseWheel. These mouse events use MouseButtonEventArgs and MouseEventArgs as parameters to catch events then active related behaviour. Through the passage we’ll learn to manage five of these events above. Please prepare some nice pictures and then let’s start to practise three samples with VWD or Visual Studio 2008.

clip_image002

MouseEnter & MouseLeave

Here we’ll realize such an effect: when the cursor move onto the original image, it turns into another image; when the cursor leave the image field, the second image changes into a third pic. Therefore the MouseEnter & MouseLeave events are needed.

Let’s first put an image into the page, with two mouse events "Image_MouseEnter" and "Image_MouseLeave".

  1. <canvas>
  2.  
  3. <image Source="roseheart.jpg" Canvas.Left="60" Canvas.Top="70"
  4. MouseEnter="Image_MouseEnter"
  5. MouseLeave="Image_MouseLeave">
  6.  
  7. </image>
  8. </canvas>

Then complete the two functions in MainPage.xaml.cs.

  1. private void Image_MouseEnter(object sender, MouseEventArgs e)
  2. {
  3. Image img = sender as Image;
  4. img.Source = new BitmapImage(new Uri("fourleaf.jpg",UriKind.RelativeOrAbsolute));
  5. }
  6.  
  7. private void Image_MouseLeave(object sender, MouseEventArgs e)
  8. {
  9. Image img = sender as Image;
  10. img.Source = new BitmapImage(new Uri("rose.jpg", UriKind.RelativeOrAbsolute));
  11. }

Read the code above, the function Image_MouseEnter defines that when the mouse move onto roseheart.jpg, the pic will change into fourleaf.jpg. For that the picture format supported by Silverlight 3 is limited, we use BitmapImage to load a new pic of JPEG format, that’s alright too. To load files, like images, we use Uri Class, its constructor is (String, UriKind). For more information you can refer to MSDN. Remember to add a line "using System.Windows.Media.Imaging;" to the head of MainPage.xaml.cs.

So does the function Image_MouseLeave mean and you can get it.

MouseLeftButtonUp & MouseLeftButtonDown

In this sample, we create an image field and a text block. When mouse is left-clicked onto the image, the text change. When the left mouse button is released, the text changes again.

Insert the code below to MainPage.xaml:

  1. <image Source="leaf.jpg" Canvas.Left="450" Canvas.Top="150"
  2. MouseLeftButtonDown="Image_MouseLeftButtonDown"
  3. MouseLeftButtonUp="Image_MouseLeftButtonUp">
  4. </image>
  5.  
  6. <border BorderBrush="Gold" BorderThickness="4" Canvas.Left="120" Canvas.Top="20">
  7. <textblock x:Name="textBlock" Text="Please click the green leaf!"
  8. Width="500" Height="40"
  9. FontSize="25" Foreground="Blue"/>
  10.  
  11. </border>

Next add code to MainPage.xaml.cs:

  1. private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
  2. {
  3. textBlock.Foreground = new SolidColorBrush(Colors.Orange);
  4. textBlock.Text = "Welcome to Silverlight 3 World!";
  5. }
  6.  
  7. private void Image_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
  8. {
  9. textBlock.Foreground = new SolidColorBrush(Colors.Purple);
  10. textBlock.FontSize = 25;
  11. textBlock.Text = "Wish you a wonderful Silverlight trip!";
  12. }

MouseMove

We use MouseMove event to show the cursor’s current position. To do this, just add one row into Canvas Control markup:

  1. <canvas MouseMove="Canvas_MouseMove">
  2. </canvas>

To show the position in text, add the code:

  1. <textblock x:Name="Position" Text="Position" Foreground="Salmon"
  2. FontSize="20" Canvas.Left="500" Canvas.Top="350">
  3. </textblock>

The related function is like this:

  1. private void Canvas_MouseMove(object sender, MouseEventArgs e)
  2. {
  3. Point p = e.GetPosition(this);
  4. Position.FontSize = 15;
  5. Position.Text = string.Format("Position({0}:{1})", p.X, p.Y);
  6. }

Run the project, the page shows like the following pic:

clip_image004

Move mouse so that the cursor is on the left picture, the pic changes and the cursor position shows:

clip_image006

When the mouse leaves left pic, click the right one and keep left button not released, you can see both the left pic and the text block’s content change.

clip_image008

Release left mouse button, the text changes again:

clip_image010

By now you are able to manage the mouse event in Silverlight 3. The source code of the three sample has been attached and you can download it as a reference Downloadhere.

For help, advice, tips and tricks, challenges, feel free to visit ourDoNotYet forum or Submit your good resource to share.

Reminder: Unless stated otherwise, all resources published on this site are NOT for commercial use. To use any resource from this site for commercial purposes, please contact the author.

Related Posts