Last week, I started experimenting with Microsoft Silverlight. I've never worked with the technique before, but after using it, I was impressed. It works pretty good and the separation of the XAML and CS file is great.

Today, we're going to create a Smokey Mouse Follower in Silverlight. This was my first experiment too and pretty fun to see. I have to admit that the layout can be improved in loads of ways, but this tutorial is intended to be for beginner Silverlight users.

We'll be using Microsoft Expression Blend 3 in this tutorial. Visual Studio will probably give the same effect, but I haven't tested it. We're going to create the program using Visual C#. The images (cursors) I used are from IconFinder.

  

Make sure to check out the demo to see what we're going to create! As you can see, it's not really that useful, but pretty fun to see. Also, it's a great way to get in touch with Silverlight. Let's start!

Create the project

Create a new Silverlight project, by going to File > New Project (Ctrl+Shift+N). Select Silverlight 3 Application + Website and give the project a name. Make sure the language is set to Visual C#.

Press OK to create the project. Expression Blend now creates several files for you. In this tutorial, we'll only focus on the MainPage.xaml and MainPage.xaml.cs files. You can find these in the Project Explorer (right side of Expression Blend).

XAML (UI)

There are two views to the MainPage.xaml file: A design view, and a code (XAML) view. Since we don't do anything with design (drawing stuff etc.), we'll directly switch to XAML view.

ExpressionBlend already created the "Stage" for you, by defining a Usercontrol element, together with a Grid element. I changed the backgroundcolor from the Grid and added an image: This will be our mouse follower. This is the code I came up with:

 
<UserControl
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   x:Class="mouseFollower.MainPage"
   Width="640" Height="480">
 
   <Grid
      x:Name="LayoutRoot"
      Background="DarkGray"
      Cursor="None"
      MouseMove="LayoutRoot_MouseMove"
      
         <Image
            Source="http://demo.marcofolio.net/silverlight_mousefollower/images/cursor.png"
            x:Name="cursor"
            Width="16"
            Height="16"
            HorizontalAlignment="Left"
            Margin="0,0,0,0"
            VerticalAlignment="Top" />
            
   </Grid>
</UserControl>

• Grid.x:name - The element name that we can reference in our Code Behind file.
• Grid.Cursor - The cursor is set to None so we can hide the real cursor.
• Grid.MouseMove - This is the function in our Code Behind that will be called once the Mouse moves on the Grid.
• Image.Source - The source where the image for the cursor is located.
• Image.x:name - Once again, the element name that we can reference in our Code Behind file.
• Image - All positioning values are needed to place the image (cursor) in the top-left of the Grid.

Now to get some code behind this page and create the actual mouse follower!

XAML Code Behind (CS)

In our previous step, we were trying to call a function in our code behind that didn't excist: LayoutRoot_MouseMove. So, let's create that function in our code behind file (MainPage.xaml.cs). We'll also create a Timer object and a function that will be called once the timer has been set off. I've added comments in the source code to make it clear.

 
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
 
// The following namespaces are added from the default
using System.Windows.Media.Effects;
using System.Windows.Media.Imaging;
using System.Windows.Threading;
using System.Collections.Generic;
 
namespace mouseFollower
{
   public partial class MainPage : UserControl
   {
      /// <summary>
      /// List that will contain references from the images in the mouse trail.
      /// </summary>
      private List<Image> trail = new List<Image>();
      
      public MainPage()
      {
         // Required to initialize variables
         InitializeComponent();
         StartTimer();
      }
      
      /// <summary>
      /// Event that gets called when the mouse is moved over the layout (root screen).
      /// </summary>
      /// <param name="sender">Sender</param>
      /// <param name="e">Mouse event</param>
      private void LayoutRoot_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
      {
         // Retrieve X and Y position of the mouse
         double xPos = e.GetPosition(null).X;
         double yPos = e.GetPosition(null).Y;
         
         // Create a new image - Copy of the cursor for the trail
         Image copyImg = new Image();
         copyImg.Source = cursor.Source;
         copyImg.Width = cursor.Width;
         copyImg.Height = cursor.Height;
         copyImg.Margin = new Thickness(xPos, yPos, 0, 0);
         copyImg.Effect = new BlurEffect { Radius = 5 };
         copyImg.Opacity = 1;
         copyImg.HorizontalAlignment = HorizontalAlignment.Left;
         copyImg.VerticalAlignment = VerticalAlignment.Top;
         
         // Add the newly created image to the trail list
         trail.Add(copyImg);
         
         // Add the newly created image to the layout
         LayoutRoot.Children.Add(copyImg);
         
         // Place the current cursor on the mouse position
         cursor.Margin = new Thickness(xPos, yPos, 0, 0);
      }
 
      
      /// <summary>
      /// Timer to added to the page to use a delegate.
      /// </summary>
      public void StartTimer()
      {
         DispatcherTimer myDispatcherTimer = new System.Windows.Threading.DispatcherTimer();
         myDispatcherTimer.Interval = new TimeSpan(0, 0, 0, 0, 100); // 100 Milliseconds
         myDispatcherTimer.Tick += new EventHandler(FadeTrail); // Every 'tick' (100 Milliseconds), the "FadeTrail" function is called
         myDispatcherTimer.Start();
      }
      
      /// <summary>
      /// Delegate to be called once the timer is called to fade out the cursor trail.
      /// </summary>
      /// <param name="o"></param>
      /// <param name="sender"></param>
      public void FadeTrail(object o, EventArgs sender)
      {
         // Loop through all images in the trail and change the dimensions + opacity
         foreach(Image trailimg in trail) {
            trailimg.Opacity -= 0.1;
            trailimg.Width += 2;
            trailimg.Height += 2;
         }
      }
      
   }
}

That's all we need! Try to build + run the application (F5) and let's see what we got so far.

Looks pretty nifty, doesn't it? We've got our mouse follower and the puffy smoke effect! By using the delegate FadeTrail we can slowly expand the copied image from the trail and fade it out.

Cursor changer

For a small extra effect, I wanted to make it possible for the user to "click" with the mouse and get another type of cursor. This is pretty easily achieved by doing the following:

First, open your XAML file (MainPage.xaml). In XAML view, add the following attribute to the Grid element:

 
MouseLeftButtonUp="LayoutRoot_MouseLeftButtonUp"

This means, that when a user clicks on the Grid element, the LayoutRoot_MouseLeftButton event is called. We'll define this later in the Code Behind file.

Go back to your code behind file (MainPage.xaml.cs) and add the following fields at the top of your script, right after private List<Image> trail = new List<Image>();:

 
/// <summary>
/// Variable to store which cursor is currently showed.
/// </summary>
private int currentcursor = 0;
 
/// <summary>
/// List that will contain the URL's to cursors that we can use (images).
/// </summary>
private List<String> cursors = new List<String>();

Inside the MainPage() function, we'll add the image URL's (pointing to the several cursors):

 
cursors.Add("http://demo.marcofolio.net/silverlight_mousefollower/images/arrow_circle_double.png");
cursors.Add("http://demo.marcofolio.net/silverlight_mousefollower/images/plus_circle_frame.png");
cursors.Add("http://demo.marcofolio.net/silverlight_mousefollower/images/multimedia-player-apple-ipod.png");
cursors.Add("http://demo.marcofolio.net/silverlight_mousefollower/images/apple.png");
cursors.Add("http://demo.marcofolio.net/silverlight_mousefollower/images/cursor.png");

Now, we'll define the function that is called when the user clicked on the Grid. This is the function we defined in the XAML file:

 
/// <summary>
/// Event to be called when the user clicked on the layout (root).
/// </summary>
/// <param name="sender">Sender</param>
/// <param name="e">Mouse event</param>
private void LayoutRoot_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
   // Change the cursor image
   Uri uri = new Uri(getNextCursor(), UriKind.Absolute);
   ImageSource imgSource = new BitmapImage(uri);
   cursor.Source = imgSource;
}

As you can see, the function called getNextCursor() is used, but we didn't create it (yet). Let's create that function to properly get the next cursor image:

 
/// <summary>
/// Retrieve the next cursor image url.
/// </summary>
/// <returns>The new image url.</returns>
private string getNextCursor() {
   currentcursor++;
   if(currentcursor >= cursors.Count) {
      currentcursor = 0;
   }
   return cursors[currentcursor];
}

That's it! We're not complete and done with the mouse following that changes when the user clicks on the Grid.

Conclusion and Download

Although this isn't a very useful effect, it's pretty fun to play around with and great if you never played with Silverlight before. This was my first experiment too!

  

Feel free to leave a comment, sharing your thoughts!

Interested in this topic? You might enjoy another article I've written called

• jQuery quickie: Unlimited Scroll using the Twitter API
• The Mac Skype App menu with CSS3 and jQuery
• Showing links while hovering using CSS
• Flash Web Roundup - Great tutorials and experiments
• Create a summertime compilation poster

Did you like this article? Subscribe to my feed or email to keep updated on new articles.

Spread the word and submit to: