How to: Drag and Drop Objects in UI Layout

The following example below shows how to drag and drop objects in a Silverlight-based application. For security reasons, you cannot drag and drop objects between applications. Therefore, it is more accurate to say that you "slide" objects within the Silverlight plug-in area. However, the term "drag and drop" is better known and therefore used here.

Run this sample

<UserControl x:Class="DragAndDropSimple.Page"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
  <Canvas x:Name="rootCanvas"
  Width="640"
  Height="480"
  Background="Gray"
  >
    <!-- You can drag this rectangle around the canvas. -->
    <Rectangle
    MouseLeftButtonDown="Handle_MouseDown"
    MouseMove="Handle_MouseMove"
    MouseLeftButtonUp="Handle_MouseUp"
    Canvas.Left="30" Canvas.Top="30" Fill="Red"
    Width="50" Height="50" />
  </Canvas>

</UserControl>

// Global variables used to keep track of the 
// mouse position and whether the object is captured
// by the mouse.
bool isMouseCaptured;
double mouseVerticalPosition;
double mouseHorizontalPosition;

public void Handle_MouseDown (object sender, MouseEventArgs args) 
{
    Rectangle item = sender as Rectangle;
    mouseVerticalPosition = args.GetPosition(null).Y;
    mouseHorizontalPosition = args.GetPosition(null).X;
    isMouseCaptured = true;
    item.CaptureMouse();
}

public void Handle_MouseMove(object sender, MouseEventArgs args) 
{
    Rectangle item = sender as Rectangle;
    if (isMouseCaptured) 
    {

        // Calculate the current position of the object.
        double deltaV = args.GetPosition(null).Y - mouseVerticalPosition;
        double deltaH = args.GetPosition(null).X - mouseHorizontalPosition;
        double newTop = deltaV + (double)item.GetValue(Canvas.TopProperty);
        double newLeft = deltaH + (double)item.GetValue(Canvas.LeftProperty);

        // Set new position of object.
        item.SetValue(Canvas.TopProperty, newTop);
        item.SetValue(Canvas.LeftProperty, newLeft);

        // Update position global variables.
        mouseVerticalPosition = args.GetPosition(null).Y;
        mouseHorizontalPosition = args.GetPosition(null).X;
    }
}

public void Handle_MouseUp(object sender, MouseEventArgs args) 
{
    Rectangle item = sender as Rectangle;
    isMouseCaptured = false;
    item.ReleaseMouseCapture();
    mouseVerticalPosition = -1;
    mouseHorizontalPosition = -1;
}

' Global variables used to keep track of the 
' mouse position and whether the object is captured
' by the mouse.
Dim isMouseCaptured As Boolean
Dim mouseVerticalPosition As Double
Dim mouseHorizontalPosition As Double

Private Sub Handle_MouseDown(ByVal sender As Object, ByVal e As MouseButtonEventArgs)
    Dim item As Rectangle = sender
    mouseVerticalPosition = e.GetPosition(Nothing).Y
    mouseHorizontalPosition = e.GetPosition(Nothing).X
    isMouseCaptured = True
    item.CaptureMouse()
End Sub

Private Sub Handle_MouseMove(ByVal sender As Object, ByVal e As MouseEventArgs)
    Dim item As Rectangle = sender
    If (isMouseCaptured) Then
        ' Calculate the current position of the object.
        Dim deltaV As Double = e.GetPosition(Nothing).Y - mouseVerticalPosition
        Dim deltaH As Double = e.GetPosition(Nothing).X - mouseHorizontalPosition
        Dim newTop As Double = deltaV + item.GetValue(Canvas.TopProperty)
        Dim newLeft As Double = deltaH + item.GetValue(Canvas.LeftProperty)

        ' Set new position of object.
        item.SetValue(Canvas.TopProperty, newTop)
        item.SetValue(Canvas.LeftProperty, newLeft)

        ' Update position global variables.
        mouseVerticalPosition = e.GetPosition(Nothing).Y
        mouseHorizontalPosition = e.GetPosition(Nothing).X
    End If
End Sub

Private Sub Handle_MouseUp(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseButtonEventArgs)
    Dim item As Rectangle = sender
    isMouseCaptured = False
    item.ReleaseMouseCapture()
    mouseVerticalPosition = -1
    mouseHorizontalPosition = -1
End Sub
End Class