Drag and drop Silverlight example

This is a quick and simple example of how to create a draggable object in Silverlight 2.

  1. Create a Rectangle and set the RenderTransform to a TranslateTransform.
  2. <Rectangle x:Name="rect" Width="50" Height="50" Fill="Blue" HorizontalAlignment="Left" VerticalAlignment="Top">
    <Rectangle.RenderTransform>
    <TranslateTransform x:Name="rectTranslateTransform" X="0" Y="0" />
    </Rectangle.RenderTransform>
    </Rectangle>

  3. Register the MouseLeftButtonDown, MouseLeftButtonUp, and the MoseMove events for the rectangle.
  4. this.rect.MouseLeftButtonDown += new MouseButtonEventHandler(rect_MouseLeftButtonDown);
    this.rect.MouseLeftButtonUp += new MouseButtonEventHandler(rect_MouseLeftButtonUp);
    this.rect.MouseMove += new MouseEventHandler(rect_MouseMove);
  5. In the MouseLeftButtonDown and MouseLeftButtonUp event you will capture and release the capture of the mouse, respectively.  Also, you will need to store if the mouse is captured.

  6. // Stores if the mouse is captured
    private Boolean isRectMouseCapture = false;
    
    void rect_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        this.rect.ReleaseMouseCapture();
        isRectMouseCapture = false;
    }
    
    void rect_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        this.rect.CaptureMouse();
        isRectMouseCapture = true;
    }
  7. Finally, update the position if the mouse is captured and the mouse is moving.

  8. void rect_MouseMove(object sender, MouseEventArgs e)
    {
        if (isRectMouseCapture)
        {
            this.rectTranslateTransform.X = e.GetPosition(this).X;
            this.rectTranslateTransform.Y = e.GetPosition(this).Y;
        }
    }

Final product:

image

Maintain mouse position on object while dragging

The above example snaps the pointer to the top left of the object.  Face it, it’s annoying, what you really want is the mouse to maintain the position on the element while dragging. To solve this problem is simple.

  1. Add a variable to save the position when the user clicks the object.
  2. private Point clickPosition;
  3. Save the position of where the mouse is located on the MouseLeftButtonDown event.  The updated MouseLeftButtonDown event looks like:
  4. void rect_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        clickPosition = e.GetPosition(sender as UIElement);
        this.rect.CaptureMouse();
        isRectMouseCapture = true;
    }
  5. Finally, in MouseMove event subtract the clickPosition from the mouse position.
  6. this.rectTranslateTransform.X = e.GetPosition(this).X - clickPosition.X;
    this.rectTranslateTransform.Y = e.GetPosition(this).Y - clickPosition.Y;

Update

Drag and drop with physics (friction)

After playing around, I have updated this example to incorporate physics.  Take a look:

http://www.coreyschuman.com/Silverlight/Prototypes/DragDropPhysics/Proto1TestPage.aspx

    9 comments so far

    1. […] Drag and Drop Silverlight Example (Corey Schuman) […]

    2. Anna on

      It really is made simple! Thanks a lot for this tutorial.

    3. koenvosters on

      Nice work mate, makes it simple, gonna make sure it now snaps itself into a grid and then we got something that is really useful in applications.

    4. cschuman on

      Thanks for the suggestion. I have just completed adding friction to this example. Snapping to a grid will be my next example. I’ll post when I am finished.

    5. pierre on

      you are wrong :
      this.rect.MouseMove += new MouseEventHandler(rect_MouseMove);
      you must attach the page mousemove event… if you don’t do that, when you move your cursor quickly your drag stop.

    6. cschuman on

      pierre, I haven’t experienced this problem. Registering MouseMove for only the rectangle takes care of business.

    7. simon on

      Thanks for the example!
      I found that with this code you need to place your dragable object in the exact top left corner (0,0) for the mouse offset to work properly (try starting the box off in the middle of the screen, it jumps around just like when there was no offset!).
      If you want the box to start in the middle, place it in the top corner and then also give it an initial translation as to appear in the middle.

    8. Sundeep on

      Hi,

      Awesome Job! Great thanks for the example. Can you please let us know how did you manage to create such drag and drop effect in physics example.

      Thanks,
      Sundeep.

    9. […] 2.) Click the Move button to enable the move tool.  Once you have clicked this the cursor becomes an Hand indicating you can click and drag on the screen to move the objects around.  The technique I’m using for this is similar to a previous post – Drag and drop Silverlight example. […]


    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

    %d bloggers like this: