Click to Rate and Give Feedback
MSDN
MSDN Library
Web Development
Silverlight
Silverlight 3
Input
 How to: Drag and Drop Objects in UI...
Collapse All/Expand All Collapse All
Silverlight
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

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#
// 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;
}
Visual Basic
' 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
Tags What's this?: Add a tag
Community Content   What is Community Content?
Add new content RSS  Annotations
The example seems to show only a simplistic case      Go4Agile ... Wolf Schmidt - MSFT   |   Edit   |   Show History
Unfortunately this works for a canvas and only very few other elements. For example TreeView (from the Silverlight Toolkit), StackPanel, ComboBox, Grid, etc. don't fire MouseLeftButtonDown events which makes implementation of any drag and drop in Silverlight 2 close to impossible. Looks as if Silverlight 3 may solve this with the ability to register event handlers that are even called if a different event handler set the event to handled. WPF already has that ability. For now Silverlight, at least in version 2 and earlier - doesn't have a sufficient or straight forward solution for drag and drop. :-(

Cheers,
Manfred.
---
Visit my Dot Net blog at: http://manfredlange.blogspot.com

(Update: Silverlight 3 does have the ability to add handlers that respond to all MouseButton cases, so you can make this work for panels that do built-in event handling. See http://msdn.microsoft.com/en-us/library/ms598899(VS.95).aspx .)
Tags What's this?: Add a tag
Flag as ContentBug
Processing
© 2009 Microsoft Corporation. All rights reserved. Terms of Use | Trademarks | Privacy Statement | Site Feedback
Page view tracker