Silverlight Tip of the Day #28: How to Implement a Custom Mouse Cursor - Windows Phone Developer Tips - Site Home

In Tip of the Day #27 we talked about how to change the mouse cursor. But what if you want to have a cursor icon that is not supported by Silverlight? This tutorial will show you how to do it.

For a complete demo of this tip visit: http://silverlight.services.live.com/invoke/66033/Custom%20Cursor%20Demo/iframe.html

The first thing you will want to do is to hide the mouse cursor at the root level of your Silverlight application. In our Page.xaml, we set the Canvas Mouse to “None”:

Next, we implement a custom Silverlight control called CustomCursor. The implementation of this class is fairly straight forward. The constructor takes a string which points to the image resource that will represent the cursor (a JPG or PNG file). The template for this custom control is simply a Image. The cursor can be moved by calling MoveTo() with a given point on the screen.

     using System;

    using System.Net;

    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;

    using System.Windows.Markup;

    namespace CustomCursor

    {

        public class CustomCursor : Control

        {

            private const string cursorTemplate =

                 "<ControlTemplate xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\" " +

                          "xmlns:x=\"http://schemas.microsoft.com/winfx/2006/xaml\">" +                    

                          "<Image x:Name=\"MyCursor\">" +

                          "</Image>"+

                 "</ControlTemplate>";

            Image _cursor;

            string _cursorResource;

            public CustomCursor(string resource)

            {

                _cursorResource = resource;

                Template = (ControlTemplate)XamlReader.Load(cursorTemplate);

                ApplyTemplate();

            }

            public override void OnApplyTemplate()

            {

                _cursor = (Image) GetTemplateChild("MyCursor");

                Uri uri = new Uri(_cursorResource, UriKind.Relative);

                ImageSource imgSrc = new System.Windows.Media.Imaging.BitmapImage(uri);

                _cursor.Source = imgSrc;

            }

            public void MoveTo(Point pt)

            {

                this.SetValue(Canvas.LeftProperty, pt.X);

                this.SetValue(Canvas.TopProperty, pt.Y);

            }

        }

    }

In our Page.xaml.cs we declare our CustomCursor and add it to the canvas. We also add an event handler to monitor for MouseMove events. When the mouse moves, we move the cursor to its new location.

    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 CustomCursor

    {

        public partial class Page : UserControl

        {

            CustomCursor _cc = new CustomCursor("MyCursor.jpg");

            public Page()

            {

                InitializeComponent();

                LayoutRoot.Children.Add(_cc);

                this.MouseMove += new MouseEventHandler(Page_MouseMove);

            }

            void Page_MouseMove(object sender, MouseEventArgs e)

            {

                _cc.MoveTo(e.GetPosition(null));

            }

        }

    }

Thank you,
--Mike Snow

Subscribe in a reader