How to: Drag and Drop Objects in UI Layout

How to: Drag and Drop Objects in UI Layout
Silverlight 3

Silverlight

[Note: This topic is pre-release documentation and is subject to change in future releases. Blank topics are included as placeholders.]

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

XAML

<UserControl x:Class="DragAndDropSimple.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://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>

C++

JScript

Copy to Clipboard Print

' 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

Concepts

Mouse Support

Other Resources

Drag and Drop - Copy Controls (Silverlight.net forum)