Silverlight Custom Cursor

by Bobbi Perreault 10. May 2008 23:48
Share on FacebookThe Infloor-Heating Diagram Maker is an eCommerce web site enhancement tool -  meant to provide a useful service for customers.  This particular site offers for sale heating and plumbing supplies to owners of outdoor stoves.  I'm still working on this control, but wanted to respond to some inquiries I've seen concerning custom cursors. Since the Diagram Maker is at it's base a drawing program, it will need to have custom cursors to designate when a tool is selected for drawing.  The first custom cursor is one the will represent the Pencil tool (Pen/Pencil)

Here are the steps to add a custom cursor to your Silverlight application:o    Acquire an image that will be the Cursor.

  •   Add the image to your project.
  •  Create a control that consists of this image

	<UserControl x:Class="WidgetCreator.pencil"
    xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="16" Height="16">
    <Grid x:Name="pencilroot">
            <Image Source="pencil.png" Stretch="Fill"/>
 
    </Grid>
</UserControl>
  •   Add the control to your Canvas XAML.   (don't forget the namespace declaration at the top)

Namespace:  xmlns:WidgetCreator="clr-namespace:WidgetCreator"
XAML:   <WidgetCreator:pencil Canvas.Left="340" Canvas.Top="127" x:Name="pencil"/>

  •  Set it's Visibility to Collapsed.
  •  pencil.Visibility = Visibility.Collapsed;
  •  Add to the event handler where the cursor will become active code that hides the current cursor and shows your custom image.
// Capture mouse and update stat
           CaptureMouse();
           if (pencil != null)
           {
               pencil.Visibility = Visibility.Visible;
               movePencilToCurrentPosition((Point)_positionLast);
           }
                
private void movePencilToCurrentPosition( Point pt)
        {
               
            // Set the coordinates of customPointer to the mouse pointer coordinates
            pencil.SetValue(Canvas.LeftProperty, pt.X);
            pencil.SetValue(Canvas.TopProperty, pt.Y);
        }

 Add an event handler for the Mouse Move event - and use that to send the image where ever the mouse goes

private void HandleMouseMove(object sender, MouseEventArgs e)
            {
                
                //follow the cursor
                Point position = e.GetPosition(LayoutRoot);
                if (_bIn) //set the cursor if we're tracking a polygon creation.
                {
                   //ChangeParentKeepPosition(pencil, LayoutRoot, e);
                    movePencilToCurrentPosition(position);                    
    
                }
                
            }

Comments are closed

 

RSS Feed FriendFeed