Robust, Reusable Drag-and-Drop Behavior in Silverlight

s the richness of Internet applications continues to grow through technologies such as Silverlight, AJAX, and Flash, the adoption of common desktop user interface (UI) paradigms within these applications continues to increase. The most obvious paradigm perhaps is drag-and-drop behavior.

Although simple drag-and-drop behavior is available through some Silverlight controls, Silverlight's overall implementation lacks some of the finer points of the behavior available in WPF. However, by manipulating an element's RenderTransform with attached behaviors, you can greatly increase the overall robustness and reusability of any drag-and-drop implementation.

Novel Implementations

Silverlight by default facilitates drag-and-drop support through the Thumb control in System.Windows.Controls.Primitives. The simplest approach for implementing drag-and-drop is to use the Thumb control and apply the appropriate ControlTemplate for your application's look and feel.

In many cases, though, using a Thumb is not practical. Constantly "templating" a Thumb control is often cumbersome in XAML, and you must repeat the application logic for this behavior in every single area in which you use it. As an application grows, this requirement makes the application nearly impossible to maintain.

However, two novel implementations allow you to enable drag-and-drop behavior on any UIElement in a generic way. Here is the first implementation:

<Ellipse Height="67" HorizontalAlignment="Left"
MouseMove="DragDelta" MouseLeftButtonDown="DragStart" MouseLeftButtonUp="DragComplete" 
VerticalAlignment="Top" Fill="#FFC20707" Stroke="#FF000000"/>

The most important aspects of this implementation are the specific events (present on any UIElement) that enable a drag-and-drop implementation: MouseLeftButtonDown, MouseMove, and MouseLeftButtonUp. By adding handlers to these events on any UIElement, you can perform a simple drag-and-drop.

The second implementation looks like this:

private bool isDragging = false;
private void DragStart(object sender, MouseButtonEventArgs args)
{
   Shape draggable = sender as Shape;
   if (draggable != null)
   {
      isDragging = true;
      draggable.CaptureMouse();
   }
}
private void DragDelta(object sender, MouseEventArgs args)
{
   Shape draggable = sender as Shape;
   if (draggable != null && isDragging)
   {
      Point currentPosition = args.GetPosition(null);
      TranslateTransform transform = draggable.RenderTransform 
         as TranslateTransform;
      if (transform == null)
      {
         transform = new TranslateTransform();
         draggable.RenderTransform = transform;
      }

      transform.X = (currentPosition.X - draggable.Width / 2);
      transform.Y = (currentPosition.Y - draggable.Height / 2);
   }
}

private void DragComplete(object sender, MouseButtonEventArgs args)
{
   Shape draggable = sender as Shape;
   if (draggable != null)
   { 
      isDragging = false;
      draggable.ReleaseMouseCapture();
   }
}

As you can see, by affecting the control RenderTransform as opposed to Panel-specific layout parameters such as the Canvas.Top and Canvas.Left attached properties or Grid margins, you can move an element around in any container. While this approach is reusable for any UIElement, it does not allow you to reuse the application logic across different controls. For that, you need an implementation that uses attached behaviors.