84. Create custom draggable Cursor like Acrobat in Silverlight

[tweetmeme source=”shamrat231” only_single=false]

I recently had fun with xaml cursor in blend. Anyway in this entry, I will try to show you how you can apply your own set of image cursor to your Silverlight project. For demonstration purpose, I will use the drag/hold icon of acrobat reader to make this entry a bit exciting. In acrobat, it shows two icons. One would be “Hand” and the other would be when you press (hold) the page.

You can see the live example here [live demo]   

The SOURCE CODE(.zip) is at the end of the page for download.

Well, I am going to create exactly something like that. So lets start, first going to blend and create a draggable surface. This can be done now very easily using behavior. Lets look at our initial code.

<Grid x:Name=”LayoutRoot” Background=”Gray”>
        <Border x:Name=”PageLayout” Width=”700″ CornerRadius=”2″ >
            <Canvas  x:Name=”myPage”  Margin=”10″>
                <Border Width=”700″ CornerRadius=”2″ Background=”White”>
                    <TextBlock TextWrapping=”Wrap” Margin=”50″ >
                    amet, consectetur ais….continues”/>
                </Border>
            </Canvas>
        </Border>
</Grid>

The above code generates the below output. Ok, now go to behaviour section in blend and add a drag behaviour to your canvas. We are finished making our whole object draggable.

 

Now come the actual part, creating cursor. For now, I will use some picture instead of blend cursor to save time :). The idea at the moment is very simple. I will drag a picture at the same place where my cursor is. To do this, we can use the mouse move event to our advantage as shown below.

            InitializeComponent();
            myPage.MouseMove += (s, e) => {
           
                Point pt = e.GetPosition(null);
                customIcon.SetValue(Canvas.LeftProperty, pt.X);
                customIcon.SetValue(Canvas.TopProperty, pt.Y);
            };   

Now, the only thing left is to set the image. When the mouse enter, we want to show the “hand” icon and when the drag starts we want to show the hold icon as shown below.

This can be easily be achieved by adding a mouse enter and press event.

            myPage.MouseEnter += (s, e) => {
                ShowCursor(“cursor_hand.png”);
            };
            myPage.MouseLeave += (s, e) => {
                ShowCursor(string.Empty);
            };
        public void ShowCursor(string imageName)
        {
            customIcon.Source = new BitmapImage(
                new Uri(“Images/Cusors/” + imageName,
                    UriKind.Relative)
                );
        }

So in the above code, the moment I am moving my cursor enter on the canvas. I am setting it default hand image and when the mouse leave the canvas remove the image. Theoretically, this should work. Now to switch between drag icon and hold icon. This could easily be done here by making changes on mouse left press event as shown below.

            myPage.MouseLeftButtonDown += (s, e) => {
           
                isPressed = true;
                ShowCursor(“cursor_drag_hand.png”);
            };

            PageLayout.MouseLeftButtonUp += (s, e) => {

                isPressed = false;
                ShowCursor(“cursor_hand.png”);
            };

Now the last criteria is this, the user will be moving the whole object while pressing the canvas. So we have to show the drag mouse icon as long as it is being dragged.

            myPage.MouseMove += (s, e) => {
           
                Point pt = e.GetPosition(null);
                customIcon.SetValue(Canvas.LeftProperty, pt.X);
                customIcon.SetValue(Canvas.TopProperty, pt.Y);

                if (isPressed)
                    ShowCursor(“cursor_drag_hand.png”);
                else
                    ShowCursor(“cursor_hand.png”);
            };

Now, once I run the page two bugs happens. One there is the default cursor and my custom cursor appears not in the correct position. The first can be fixed very easily. Set the grid and canvas cursor to none.

 and the last part is that we want to move the cursor relative to the canvas not to the Grid layout..duh!!. So make modification here

As always, you can download the source code from here [download link]   

Sharker Khaleed Mahmud
Web Developer