Click here to Skip to main content
15,867,453 members
Articles / Desktop Programming / XAML

Professional Drag and Drop Manager Control for Silverlight 2

Rate me:
Please Sign up or sign in to vote.
4.93/5 (17 votes)
12 Feb 2009CPOL8 min read 80.4K   1.7K   51   21
An article on a flexible Silverlight 2 Drag and Drop Manager and TemplateControl
Image 1

Introduction

Silverlight 2 ships with a lot of controls. Unfortunately, none of them supports drag and drop functionality needed by a lot of business applications. This article comes along with an implementation of a Drag and Drop Manager, which should be sufficient enough for most business application needs.

Features:

  • Support for different drag-drop modes
    • Moving mode
    • Cloning mode
    • Cloning-Once mode
  • Full zooming/scaling support via a separate interface, or embedded scale transformations
  • Visual feedback during dragging operation (including zooming/scaling support)
  • Support of any Panel as a potential drop target
  • Support of drag and drop for any type derived from FrameworkElement
  • Style support via a template control
  • Support of composition and inheritance of drag and drop behavior
  • Integrated z-index and focus (only for Control derived elements) handling
  • Event handling for drag and drop elements and drop targets
  • Full Expression Blend support (dependency properties/animations states)
  • Keyboard support (Escape key for cancelling)

Background

Silverlight 2 offers a very nice development environment for .NET developers. Unfortunately, some controls/features are missing which are required in most Enterprise applications. One of these missing features is drag and drop handling.

The way drag and drop is implemented in most Silverlight applications today, is quite a direct approach, handling the necessary mouse events like MouseMove and MouseLeftButtonUp directly. Unfortunately, a lot of handy work needs to be done in order to get it setup in most scenarios.

Therefore, this article will introduce a Drag and Drop Manager, which can be used in various solutions, that handles most of the uncomfortable tasks like z-index mapping or panel-to-panel movements. Furthermore, the Drag and Drop Manager supports refactoring scenarios through the composition of classes (Decorator Pattern) and the creation of new drag and drop enabled styled template controls.

Before I explain the usage of this control, I'd like to summarize the main naming conventions of the objects in this component:

  • Surface describes the drop target. This can be any object derived from Panel. The two interfaces IDropSurface and IZoomAbleSurface can be implemented by any surface.
  • DragAndDropElement describes the dragging element in a drag and drop operation.
  • The enumeration DragAndDropMode represents what is happening with a DragAndDropElement when it is dragged.

Class Diagram of the DragDropManager Component

Image 2

Creation of the Drag and Drop Manager

The demonstration program is divided in to two different sections. The upper half creates the Drag and Drop Manager through composition. The other half uses the DragAndDropControl which forms a template control with style and animation support.

Creation of Drag and Drop Manager via composition

In a lot of scenarios, the refactoring of already created control elements might be required. In these cases, the usage of the embedded DragAndDropBuilder might be the most convenient way to accomplish this. This builder will create the DragAndDropManager object and hook into the appropriate events. The enumerable of Panel objects (allowedDropSurfaces) represent the Panel objects where the DragAndDropElement can be dropped on. If startDraggingOnMouseClick is true, it will bind additionally the MouseLeftButtonDown event of the DragAndDropElement with the dragging start.

Please note that the builder does not support the usage of the DragAndDropMode CloningOnce setting in conjunction with startDraggingOnMouseClick. If you need to compose a DragAndDropElement with the DragAndDropMode CloningOnce, set startDraggingOnMouseClick to false and write the necessary code in your application. As an example, please see the implementation of DragAndDropControl.

C#
static public class DragAndDropBuilder
{
    public static DragAndDropManager Create(
        FrameworkElement dragAndDropElement,
        IEnumerable<panel /> allowedDropSurfaces,
        DragAndDropMode mode,
        bool startDraggingOnMouseClick)
    {
        bool cloningEnabled = false;
        bool cloningOnlyOnce = false;
 
        switch (mode)
        {
            case DragAndDropMode.Moving:
                break;
            case DragAndDropMode.CloningOnce:
                cloningEnabled = true;
                cloningOnlyOnce = true;
                break;
            case DragAndDropMode.Cloning:
                cloningEnabled = true;
                break;
        }
 
        var dadm = new DragAndDropManager(
            dragAndDropElement,
            allowedDropSurfaces,
            cloningEnabled,
            cloningOnlyOnce);
 
        Debug.Assert(
            !(mode == DragAndDropMode.CloningOnce && startDraggingOnMouseClick),
            "Unfortunately there is no support " + 
            "of the CloningOnce mode in combination with an " +
            "automatical dragging handler. " + 
            "Set startDraggingOnMouseClick to false.");
 
        if (startDraggingOnMouseClick)
        {
            dragAndDropElement.MouseLeftButtonDown += 
                    new MouseButtonEventHandler(dadm.StartDragging);
            if (mode == DragAndDropMode.Cloning || mode == DragAndDropMode.CloningOnce)
                dadm.ClonedDragDropElement += new 
                EventHandler<clonedeventargs<frameworkelement>
			(dadm_ClonedDragDropElement);
        }
 
        return dadm;
    }
 
    static void dadm_ClonedDragDropElement(object sender, 
                ClonedEventArgs<frameworkelement /> e)
    {
        e.ClonedElement.MouseLeftButtonDown += 
            new MouseButtonEventHandler(((DragAndDropManager)sender).StartDragging);
    }
 
    ...
}

Usage in the main app (Page.xaml.cs):

C#
var allowedSurfaces_1 = new Panel[] { this.CanvasDandD_1 };
DragAndDropBuilder.Create(
    this.EllipseMoving,
    allowedSurfaces_1,
    DragAndDropMode.Moving,
    true);

Creation of the Drag and Drop Manager through DragAndDropControl

When using the DragAndDropControl, the creation of the DragAndDropManager occurs completely behind the scenes. Therefore, this control will be most likely used when building a drag and drop supporting application from scratch, or when implementing additional drag and drop enabled controls. DragAndDropControl is built as a template control, and supports various visual states (used by animations) and dependency properties. Therefore, it supports full customization in Expression Blend.

Control template (XAML code):

XML
<Style TargetType="local:DragAndDropControl">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:DragAndDropControl">
                <Grid Background="{TemplateBinding Background}" x:Name="LayoutRoot">
                    
                    <!-- State manager -->
                    <vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="CommonStates">
                            <vsm:VisualStateGroup.Transitions>
                            </vsm:VisualStateGroup.Transitions>
                            <vsm:VisualState x:Name="Normal">
                                <Storyboard />
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="MouseOver">
                                <Storyboard />
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="Disabled">
                                <Storyboard />
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="DraggingStates">
                            <vsm:VisualStateGroup.Transitions>
                            </vsm:VisualStateGroup.Transitions>
                            <vsm:VisualState x:Name="DragStarted">
                                <Storyboard />
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="Dropped">
                                <Storyboard />
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="SurfaceStates">
                            <vsm:VisualState x:Name="SurfaceEnter">
                                <Storyboard />
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="SurfaceLeave">
                                <Storyboard />
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                    </vsm:VisualStateManager.VisualStateGroups>
                    
                    <!-- Content -->
                    <Border BorderThickness="{TemplateBinding BorderThickness}" 
                            BorderBrush="{TemplateBinding BorderBrush}">
                        <ContentPresenter
                            x:Name="contentPresenter" 
                            Content="{TemplateBinding Content}" 
                            ContentTemplate="{TemplateBinding ContentTemplate}"
                            VerticalAlignment="{TemplateBinding 
						VerticalContentAlignment}" 
                            HorizontalAlignment="{TemplateBinding 
						HorizontalContentAlignment}"
                            Margin="{TemplateBinding Padding}"/>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

The demonstration program shows a very simple example of how to customize the style of the DragAndDropControl. Afterwards the style can be used and the content can be set as in the following code snippet.

XML
<DragDropManager:DragAndDropControl BorderBrush="#FF000000" 
			Foreground="#FF000000" Height="50" 
                            Margin="30,61,225,90" Width="100" BorderThickness="2,2,2,2" 
                            Style="{StaticResource DragAndDropControlStyle}" 
                            d:LayoutOverrides="HorizontalAlignment, VerticalAlignment" 
                            x:Name="ControlMoving" Padding="2,2,2,2"
                            Content="Moving">

The only part which will probably be done in code is the assignment of valid surfaces:

C#
var allowedSurfaces_2 = new Panel[] { this.GridDandD_2, this.StackPanelDandD_3 };
this.ControlMoving.AllowedDropSurfaces = allowedSurfaces_2;

DragAndDropMode

The enumeration DragAndDropMode is used to setup the different initial states of the DragAndDropManager object.

  • Moving: The DragAndDropElement gets moved from one place to another.
  • Cloning: The DragAndDropElement gets cloned before the element can be moved somewhere else. The clone inherits the cloning behavior.
  • CloningOnce: The DragAndDropElement gets cloned only the first time. Any cloned element can only be moved afterwards.

Surface Interfaces (Zooming Behavior and Notifications)

The component supports that any Panel object which is used as a potential target can inherit two related, optional interfaces. The first interface IZoomableSurface implements a member ZoomFactor, and represents the zooming factor of this object. This zooming factor is used when the control is hovered about the surface and scales the DragAndDropElement accordingly. Alternatively of using this interface, the surface can use any kind of scale transform. This scale transform will be recognized by the DragAndDropElement during its dragging operation as well. In most cases, the interface IZoomableSurface might be only used if the surface is transformed through a non-supported matrix transform, or if the scaling of the surface element needs to be different from the scaling of a DragAndDropElement.

The second interface enables surface elements to react to various drag and drop states (e.g., OnDropped, OnDragStart, etc.). Please see the following code as an easy example of how to use these interfaces.

C#
public class MyDropStackPanel : StackPanel, IDropSurface, IZoomAbleSurface
{
    public static TextBlock NotificationTextBlock { get; set; }

    public MyDropStackPanel()
    {
        this.ZoomFactor = 1.5d;
    }

    #region IDropSurface Members

    public void OnDropping(FrameworkElement droppingObject)
    {
        droppingObject.Margin = new Thickness(0.0d);
    }

    public void OnDropped(FrameworkElement droppedObject)
    {
        droppedObject.RenderTransform = null;
        droppedObject.VerticalAlignment = VerticalAlignment.Center;
    }

    public void OnDragStart(FrameworkElement draggedObject)
    {
        NotificationTextBlock.Text = "Dragging started";
    }

    public void OnDragMouseOver(FrameworkElement draggedObject)
    {
        NotificationTextBlock.Text = "Mouse moved while element is dragged. 
		Dragged element name: " + draggedObject.Name;
    }

    public void OnElementSurfaceEnter(FrameworkElement enterObject)
    {
        NotificationTextBlock.Text = "Mouse entered surface while element is dragged. 
		Dragged element name: " + enterObject.Name;
    }

    public void OnElementSurfaceLeave(FrameworkElement leaveObject)
    {
        NotificationTextBlock.Text = "Mouse left surface while element is dragged. 
		Dragged element name: " + leaveObject.Name;
    }

    #endregion

    #region IZoomAbleSurface Members

    public double ZoomFactor
    {
        get; set;
    }

    #endregion
}

DragDropManager and DragAndDropControl Events

Another way of how to react to certain states is via the DragAndDropManager events. Please note that the template control DragAndDropControl implements exactly the same events. These events and their usage should be quite self-explanatory. Therefore, I dispense from further comments. However, a working example is implemented inside the DragAndDropControl itself.

C#
public event EventHandler<ClonedEventArgs<FrameworkElement>> ClonedDragDropElement;
public event EventHandler<DroppedEventArgs> Dropped;
public event EventHandler<DragStartedEventArgs> DragStarted;
public event EventHandler<DraggingEventArgs> Dragging;
public event EventHandler<SurfaceEnterLeaveEventArgs<FrameworkElement>> SurfaceEnter;
public event EventHandler<SurfaceEnterLeaveEventArgs<FrameworkElement>> SurfaceLeave;

Behind the Scenes

In the following part, I discuss some of the internals of the DragAndDropManager object. When developing drag and drop capable applications in Silverlight, we first need to identify the best general way on how to move an object on the screen. In general, I believe there exist two different options for that. The first option is to set the Canvas.Left and Canvas.Top dependency properties. This solution has the negative impact that drag and drop only works on Canvas derived objects. The second option is to use a TranslateTransform. This option offers the advantage that it can be used for any kind of surface which derives from a Panel. Therefore, the second option was chosen for this component.

The following code is used inside the DragAndDropManager object, and starts the dragging behavior. I'd like to mention a specific point about the function SetDragDropElementLayoutToDefaultAndStore(), which sets the default layout behavior for the element DragAndDropManager. It ignores Canvas and Margin settings, and sets the default orientation to left and top. This allows on the one hand side, that interface designers can layout the initial positioning quite freely. On the other hand side, it forces a certain layout behavior in the target region. If there are some needs to customize this behavior, it should be implemented inside the appropriate DragAndDropManager event, or via implementing the interface IDropSurface in the drop targets.

C#
[SuppressMessageAttribute(
    "Microsoft.Security",
    "CA2109",
    Justification = "Can be used by external components " + 
                    "in order to start dragging on mouse clicks")]
public void StartDragging(object sender, MouseButtonEventArgs e)
{
    if (!this.StartDragging(e))
        throw new InvalidOperationException("Unfortunately " + 
                  "the dragging could not be initialized successfully.");
}

public bool StartDragging(MouseButtonEventArgs e)
{
    // Only initialize dragging mode if mouse was not captured
    if (this.mouseCaptured)
        return false;
    InitDraggingMode(e);
    return true;
}

private void InitDraggingMode(MouseButtonEventArgs e)
{
    CloneDragDropItem();
    SetDragDropElementLayoutToDefaultAndStore();
    CallIDropSurfaceEvent_OnDragStart();
    InitDragAndDropElementLayout(e);
    InitMouseForDragging();
    this.initialZIndex = 
      SilverlightExtensions.GetZIndexAndSetMaxZIndex(this.DragAndDropElement);
    Debug.Assert(
        this.initialZIndex < short.MaxValue - 1,
        "draggingInitialZIndex is supposed to have a smaller z value");
    FocusDragAndDropElement();
    // Send drag started event
    CallEvent_DragStarted();
}

private void CloneDragDropItem()
{
    if (this.CloningEnabled)
    {
        // --> Extension method: SilverlightExtensions.CloneObject(this);
        var dragClone = this.DragAndDropElement.Clone();
        CallEvent_Cloned(dragClone);
        ((Panel)this.DragAndDropElement.Parent).Children.Add(dragClone);
        // Disable cloning from future cloning?
        if (this.CloningOnlyOnce)
        {
            this.CloningEnabled = false;
            this.removeWhenDropCancelled = true;
        }
    }
}

private void SetDragDropElementLayoutToDefaultAndStore()
{
    // Store any kind of settings which might change during a drag drop operation
    this.dragInitPos = new Point(
        Canvas.GetLeft(this.DragAndDropElement),
        Canvas.GetTop(this.DragAndDropElement));
    this.dragInitMargin = this.DragAndDropElement.Margin;
    this.dragInitHorizontalAlignment = this.DragAndDropElement.HorizontalAlignment;
    this.dragInitVerticalAlignment = this.DragAndDropElement.VerticalAlignment;
    this.dragInitRenderTransform = this.DragAndDropElement.RenderTransform;
    this.dragInitRenderTransformOrigin = this.DragAndDropElement.RenderTransformOrigin;
    // Ignore any kind of canvas settings, margins and alignment
    Canvas.SetLeft(this.DragAndDropElement, 0.0);
    Canvas.SetTop(this.DragAndDropElement, 0.0);
    this.DragAndDropElement.Margin = new Thickness(0.0);
    this.DragAndDropElement.HorizontalAlignment = HorizontalAlignment.Left;
    this.DragAndDropElement.VerticalAlignment = VerticalAlignment.Top;
    this.DragAndDropElement.RenderTransformOrigin = new Point(0.5, 0.5);
    this.dragStartPanel = (Panel)this.DragAndDropElement.Parent;
    // Get object transform except translating
    this.dragInitTransformExcludeTranslate = 
        this.DragAndDropElement.RenderTransform.ExcludeTransform(
            typeof(TranslateTransform));
}

private void InitDragAndDropElementLayout(MouseButtonEventArgs e)
{
    // Get highest parent panel
    Panel highestPanel = 
      SilverlightExtensions.GetFirstParentPanel(this.DragAndDropElement);
    // Move this object to highest panel in order to be moved anywhere
    MoveDragDropElementToPanel(highestPanel);
    // Set correct X and Y position
    var transform =
        this.CombineTransformations(
            e.GetPosition(highestPanel), 
            null,
            1.0, 
            1.0); 
    this.DragAndDropElement.RenderTransform = transform;
}

private void MoveDragDropElementToPanel(Panel highestPanel)
{
    SilverlightExtensions.RemoveElementFromParentPanel(this.DragAndDropElement);
    if (highestPanel != null)
        highestPanel.Children.Add(this.DragAndDropElement);
}

private void InitMouseForDragging()
{
    this.mouseCaptured = true;
    if (!this.DragAndDropElement.CaptureMouse())
        throw new InvalidOperationException("Mouse could not be captured");
    this.DragAndDropElement.Cursor = Cursors.Hand;
}

private void FocusDragAndDropElement()
{
    // DragAndDrop manager should not require a Control derived type 
    // but supports Focusing
    if (this.DragAndDropElement.GetType().GetAllBaseTypes().Contains(typeof(Control)))
        ((Control)this.DragAndDropElement).Focus();
}

The other code inside DragAndDropManager deals with different kind of transformations (scaling, positioning, and combinations), the support of the mentioned interfaces (via Reflection), cancelling of drag and drop operations, and event notifications. I'd be very keen on getting some feedback for these implementations. However, I think it's getting long-winded explaining all these small features yet. Therefore, I'd like to refer to the DragAndDropManager class itself at this point.

Known Limitations / Potential Issues

Although I tried to minimize most shortcomings, I'd like to explain known potential conformities.

  • The exception with the message: "Value does not fall within the expected range" is thrown, if names of the objects are not unique. When two objects have the same name (if they have a name) inside the same Panel, Silverlight throws this very self-explanatory exception. This can happen very easily in drag and drop scenarios.
  • Bindings need to be valid in all potential surfaces. If you create e.g. a user control for one special surface and set the DataContext property of this user control in order to bind the dependency properties of a DragAndDropElement, this binding won't be valid in the dragging mode or after dropping the element to another surface. Therefore, your binding strategy for a DragAndDropElement should incorporate different potential parents.
  • Surfaces need a background color. Otherwise, they are not exposed for hit-testing (https://silverlight.net/forums/p/34201/104012.aspx).
  • A DragAndDropElement should have a fixed width and height at the moment dragging starts.
  • The DragAndDropBuilder does not support the full creation of a CloningOnce enabled DragAndDropElement.
  • A Panel derived object should be the "main" parent. Out of the box, this is usually a Grid called "LayoutRoot".
  • Matrix transformations are not supported yet in the DragAndDropElement.

Conclusion

I have used this component for now in two Silverlight projects. One of them is some kind of graphical template editor with drag and drop support. It worked quite nicely inside these projects.

Because I have no further conclusions at this time, I'd like to mention that I appreciate any kind of comments, ideas, and criticisms about this control and/or this article.

References

History

  • 12.2.2009 - Just published version 1.0

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior) ASPIRE
Germany Germany
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralMy vote of 5 Pin
Paul McKillop5-Feb-11 23:35
professionalPaul McKillop5-Feb-11 23:35 
GeneralConnector to connect between elements dynamically in silverlight Pin
Pari Margu17-Jan-11 17:18
Pari Margu17-Jan-11 17:18 
Hi Thilo,

Based on this article I have created flow chart kind of application in Silverlight. Now I have to create Connector which will connect different elements on the panel dynamically.
Please help me, If you have any idea on this.

Thanks a lot..

Pari Smile | :)
GeneralResizing the dropped element on the canvas dynamically Pin
Pari Margu12-Jan-11 22:16
Pari Margu12-Jan-11 22:16 
GeneralGreat stuff!!!! Pin
rantinori3-Jan-11 17:36
rantinori3-Jan-11 17:36 
GeneralRe: Great stuff!!!! Pin
Member 59358603-Jan-11 20:56
Member 59358603-Jan-11 20:56 
GeneralMy vote of 5 Pin
VickyC#18-Aug-10 23:14
VickyC#18-Aug-10 23:14 
GeneralRe: My vote of 5 Pin
Member 59358603-Jan-11 21:03
Member 59358603-Jan-11 21:03 
GeneralVisual Studio 2010 SL 4 Pin
pcummings26-Jun-10 9:13
pcummings26-Jun-10 9:13 
GeneralRe: Visual Studio 2010 SL 4 Pin
Member 59358603-Jan-11 21:08
Member 59358603-Jan-11 21:08 
QuestionWhat are the prerequisite Pin
askhak18-Sep-09 2:56
askhak18-Sep-09 2:56 
QuestionAny Idea how to handle "snapping to grid" and deny drop if dropzone is occupied? Pin
AncientBeing17-Apr-09 2:06
AncientBeing17-Apr-09 2:06 
GeneralAdding Content Control Pin
kamran gill2-Apr-09 1:43
kamran gill2-Apr-09 1:43 
GeneralRe: Adding Content Control Pin
Thilo Ruppert3-Apr-09 8:24
Thilo Ruppert3-Apr-09 8:24 
GeneralEvent Handling Pin
kamran gill31-Mar-09 8:02
kamran gill31-Mar-09 8:02 
GeneralRe: Event Handling Pin
Thilo Ruppert31-Mar-09 18:43
Thilo Ruppert31-Mar-09 18:43 
QuestionDoes this Drag and Drop Manager works with wpf? Pin
Herbert Gois25-Mar-09 4:57
Herbert Gois25-Mar-09 4:57 
AnswerRe: Does this Drag and Drop Manager works with wpf? Pin
Thilo Ruppert26-Mar-09 3:18
Thilo Ruppert26-Mar-09 3:18 
QuestionExcellent stuff. One question Pin
Pete Sutcliffe2-Mar-09 3:37
Pete Sutcliffe2-Mar-09 3:37 
AnswerRe: Excellent stuff. One question Pin
Thilo Ruppert8-Mar-09 18:07
Thilo Ruppert8-Mar-09 18:07 
QuestionGood work, after the drop, can you save the position to a database table. Pin
alien700011-Feb-09 6:14
alien700011-Feb-09 6:14 
AnswerRe: Good work, after the drop, can you save the position to a database table. Pin
Thilo Ruppert11-Feb-09 6:34
Thilo Ruppert11-Feb-09 6:34 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.