In my inaugural post of the “31 Days of Silverlight,” we’re going to focus on Mouse Event handlers. With an interactive application, you’re often going to want to know when your users are clicking on stuff. So, this is a tutorial on the different mouse events, and how to use them. So, let’s start with the beginning, and go forward from there. You can download ALL of the sample code from this post here.
MouseEnter
I am going to demonstrate this on two levels. The first will be a MouseEnter event on the Silverlight control as a whole. This event will fire when the user’s mouse enters the space that the Silverlight control takes up. We will be putting a second event on a circle that is in the Silverlight application. Here’s our starter XAML.
<UserControl x:Class="SilverlightMouseEvents.MouseEnterDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
<Ellipse x:Name="myEllipse" Fill="Blue" Width="150" Height="150" />
</Grid>
</UserControl>
I am going to add the event handlers to the XAML, but I will show you how to do it in code as well. Here’s our modified XAML, with the event handlers inline.
<UserControl x:Class="SilverlightMouseEvents.MouseEnterDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300" MouseEnter="UserControl_MouseEnter">
<Grid x:Name="LayoutRoot" Background="White">
<Ellipse x:Name="myEllipse" Fill="Blue" Width="150" Height="150" MouseEnter="myEllipse_MouseEnter" />
</Grid>
</UserControl>
Now we need to jump into the code-behind to write the event handler actions. As soon as I created the event handlers in the XAML, it automatically stubbed out the methods for me in code. Here’s how my initial C# code-behind looks.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace SilverlightMouseEvents
{
public partial class MouseEnterDemo : UserControl
{
public MouseEnterDemo()
{
InitializeComponent();
}
private void UserControl_MouseEnter(object sender, MouseEventArgs e)
{
}
private void myEllipse_MouseEnter(object sender, MouseEventArgs e)
{
}
}
}
In order to keep this post reasonable in length, I’m not going to do anything complicated in my event handling, but I will show you how to change the color of the Ellipse. I’ve added one line of code to each method, and each one changes the Ellipse to a different color. At this point, when we run our mouse into the Silverlight area of our web page, the circle will change to green, and when we mouse over the circle, it turns purple.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace SilverlightMouseEvents
{
public partial class MouseEnterDemo : UserControl
{
public MouseEnterDemo()
{
InitializeComponent();
}
private void UserControl_MouseEnter(object sender, MouseEventArgs e)
{
myEllipse.Fill = new SolidColorBrush(Colors.Green);
}
private void myEllipse_MouseEnter(object sender, MouseEventArgs e)
{
myEllipse.Fill = new SolidColorBrush(Colors.Purple);
}
}
}
MouseLeave
In this case, it’s pretty much exactly the same as MouseEnter, but when the mouse LEAVES something. Novel idea, huh? This time, however, I will not have any modifications to my XAML at all. So here’s the starter XAML again.
<UserControl x:Class="SilverlightMouseEvents.MouseLeaveDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
<Ellipse x:Name="myEllipse" Fill="Blue" Width="150" Height="150" />
</Grid>
</UserControl>
This time I am going to do this all in the code-behind. I will add the event handlers when the application initializes. Here’s my final C# for this example:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace SilverlightMouseEvents
{
public partial class MouseLeaveDemo : UserControl
{
public MouseLeaveDemo()
{
InitializeComponent();
this.MouseLeave += new MouseEventHandler(MouseLeaveDemo_MouseLeave);
myEllipse.MouseLeave += new MouseEventHandler(myEllipse_MouseLeave);
}
void myEllipse_MouseLeave(object sender, MouseEventArgs e)
{
myEllipse.Fill = new SolidColorBrush(Colors.Purple);
}
void MouseLeaveDemo_MouseLeave(object sender, MouseEventArgs e)
{
myEllipse.Fill = new SolidColorBrush(Colors.Green);
}
}
}
MouseLeftButtonDown
For this event, I am going to continue to use the same XAML over and over. The only thing that changes is the reference to the class our XAML user control is using. I’ve shown how to rig up event handlers both in the XAML as well as in code. So, you’ve seen the XAML, I’m going to just show the code-behind for the next example here.
MouseLeftButtonDown is exactly like it looks. It fires when the user’s left mouse button is pressed. Please note that I will be covering MouseLeftButtonUp next, and that there’s a significant distinction between them. It’s especially apparent when you start implementing Drag & Drop. Here’s an example of adding MouseLeftButtonDown to our code.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace SilverlightMouseEvents
{
public partial class MouseLeftButtonDownDemo : UserControl
{
public MouseLeftButtonDownDemo()
{
InitializeComponent();
this.MouseLeftButtonDown += new MouseButtonEventHandler(MouseLeftButtonDownDemo_MouseLeftButtonDown);
myEllipse.MouseLeftButtonDown += new MouseButtonEventHandler(myEllipse_MouseLeftButtonDown);
}
void myEllipse_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
myEllipse.Fill = new SolidColorBrush(Colors.Green);
}
void MouseLeftButtonDownDemo_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
LayoutRoot.Background = new SolidColorBrush(Colors.Purple);
}
}
}
MouseLeftButtonUp
So far, we’ve created an event handler method for each individual event. There are many cases, however, where you want multiple items to be able to call the same method, so you’re not writing the same code over and over. In this next example, I’m going to add a second circle, and have both of them change the background of the StackPanel they sit inside. Here’s our new XAML file.
<UserControl x:Class="SilverlightMouseEvents.MouseLeftButtonUpDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<StackPanel x:Name="LayoutRoot" Background="White" Orientation="Horizontal" HorizontalAlignment="Center" >
<Ellipse x:Name="myEllipse" Fill="Blue" Width="150" Height="150" />
<Ellipse x:Name="myEllipse" Fill="Red" Width="150" Height="150" />
</StackPanel>
</UserControl>
Now, we want each of the Ellipses, when the MouseLeftButtonUp event fires on them, to change the background of the ellipse that fired. Here’s what the code looks like to do that.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace SilverlightMouseEvents
{
public partial class MouseLeftButtonUpDemo : UserControl
{
public MouseLeftButtonUpDemo()
{
InitializeComponent();
myEllipse.MouseLeftButtonUp += new MouseButtonEventHandler(Ellipse_MouseLeftButtonUp);
myEllipse2.MouseLeftButtonUp += new MouseButtonEventHandler(Ellipse_MouseLeftButtonUp);
}
void Ellipse_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
Ellipse myCircle = sender as Ellipse;
myCircle.Fill = new SolidColorBrush(Colors.Orange);
}
}
}
You’ll notice with this example that there’s a second line of code in our event handler method. We have to grab a reference to the Ellipse that actually called the method. The “sender” parameter contains this information, so we have to grab that reference before assigning our new color.
MouseMove
In this final example, we are going to use the MouseMove event. Each time the mouse moves from its previous location, this event will fire. You can assign this to the entire control, or just a specific element of the application. In either case, you can do quite a few things with this, including drag and drop. We will cover that in a future post.
My XAML this time has two TextBoxes on the page. One named (cleverly) Xbox, and the other Ybox. We’re going to insert the mouse’s X and Y coordinates in these boxes as the user moves their mouse.
<UserControl x:Class="SilverlightMouseEvents.MouseMoveDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300" VerticalAlignment="Center">
<StackPanel x:Name="LayoutRoot" Background="White">
<TextBox x:Name="Xbox" Width="200" Height="35" Text="X" />
<TextBox x:Name="Ybox" Width="200" Height="35" Text="Y"/>
</StackPanel>
</UserControl>
The code behind this probably doesn’t look too complicated now, if you’ve followed this entire post, but we’re using the MouseEventArgs this time, to determine where the mouse’s current position is. We then simply assign those values to the text boxes.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace SilverlightMouseEvents
{
public partial class MouseMoveDemo : UserControl
{
public MouseMoveDemo()
{
InitializeComponent();
this.MouseMove += new MouseEventHandler(MouseMoveDemo_MouseMove);
}
void MouseMoveDemo_MouseMove(object sender, MouseEventArgs e)
{
Xbox.Text = e.GetPosition(null).X.ToString();
Ybox.Text = e.GetPosition(null).Y.ToString();
}
}
}
Summary
This was a quick overview of the Mouse events that are available to you in Silverlight. Used together, you can create a pretty interactive environment for your user to use. In tomorrow’s post, we are going to be covering screen transitions. Not only the ability to jump from one XAML file to the next, but also how to incorporate some Powerpoint-like transitions from one screen to the next.
JEFF BLANKENBURG 
Leave a Reply