Share via

  • Article

How to: Drag and Drop Objects in UI Layout

Microsoft Silverlight will reach end of support after October 2021. Learn more.

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