Sharker Khaleed Mahmud Silverlight Tips & Tricks

August 22, 2010

84. Create custom draggable Cursor like Acrobat in Silverlight

Filed under: Silverlight — Tags: , — Sharker Khaleed Mahmud | shamrat231 @ 7:30 AM

[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

Advertisements

5 Comments »

  1. […] NOTE: An updated post is available here   […]

    Pingback by 26. Custom Cursor in Silverlight Toolkit Theme « Sharker Khaleed Mahmud Silverlight Tips & Tricks — August 22, 2010 @ 9:40 AM

  2. […] Create Custom Draggable Cursor like Acrobat in Silverlight (Sharker Khaleed Mahmud) […]

    Pingback by Windows Client Developer Roundup 038 for 8/23/2010 - Pete Brown's 10rem.net — August 23, 2010 @ 9:28 PM

  3. Hello,

    I am a designer, not a developer. But I’d like to ask you a couple questions about this demo on themes: http://usfromdhaka.com/shamrat231/

    The 4th example (white background with colorful drop banners for menu items – is this a completely different page or did you swap out the xaml/styles (css – for lack of a better word) to accommodate such a radical change from the other examples? I want to know if you kept the content, but switched the styles at run time.

    we are trying to think of how to change themes at run time without refresh of content that will follow typographic hierarchy….so header, subheader, copytext, footertext etc for different templates. Your example is the closest I found to do that type of functionality.

    Anything insight would be helpful.

    Thanks,
    Haunani Pao

    Comment by Haunani Pao — August 24, 2010 @ 3:23 AM

  4. Can you update the source file as Megaupload is no longer available?

    Comment by Murray Eaton — January 23, 2012 @ 1:18 PM


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

%d bloggers like this: