WPF: DragDrop Decorator for ItemsControl


Drag and Drop functionality in WPF is pretty similar to how you do it in Winforms, using DataObject, DragEffects, etc in the System.Windows namespace. In Winforms, there’s a DoDragDrop method in the Control class, but in WPF, it’s been extracted out into a DragDrop static helper class. Writing drag and drop code can be quite repetitive and boring, and can be abstracted out to handle most scenarios. In this post, I have done so using the Decorator pattern.

In WPF, there’s a Decorator class. Border inherits from that, and we can draw a border around any WPF control by decorating it with a Border element in Xaml. Along the same line, we can decorate an ItemsControl using a Decorator to add Drag/Drop functionality. In this sample application, you can drag and drop items from a ListBox to a TabControl, and vice versa.

DragDrop_Decorator

I’m not going to dwell into the Drag Drop code, it’s pretty straightforward and you will find heaps of examples doing a Google Search. The important thing here is that we can abstract out this code and easily implement this functionality onto any ItemsControl in Xaml. If you wish, you can create other decorators for different kind of WPF controls to get similar results.

Features of ItemsControl Drag Drop Decorator:

  • Drag and Drop copies the item from source to destination. Holding Control key moves it.
  • Pressing Escape key during Drag and Drop cancels it.
  • There’s a ItemType Dependency Property on the decorator that lets you specify the Type of items in your decorated ItemsControl. This is used for sanity check to ensure you can accepting the specified Type during a drop, be it a primitive type or a business object. This property is mandatory.
  • There’s an AllowDrop DependencyProperty on the decorator that defines if your decorated ItemsControl accepts items being dropped. Default is true.

Here’s the Xaml.

<itemscontroldragdropdecorator Grid.Column="0" Grid.Row="1" ItemType="{x:Type this:Product}" AllowDrop="True" >
	<listbox x:Name="listbox" Margin="10" ItemTemplate="{StaticResource listBoxDataTemplate}" />
</itemscontroldragdropdecorator>

<itemscontroldragdropdecorator Grid.Column="1" Grid.Row="1" ItemType="{x:Type this:Product}" AllowDrop="True">
    <tabcontrol x:Name="tabcontrol" Margin="10" ItemContainerStyle="{StaticResource tabControlItemStyle}" />
</itemscontroldragdropdecorator>

With the Decorator pattern, you can wrap a UIElement with any number of decorators to add additional behaviors. I find this mechanism to be very useful, and provides an ideal way to encapsulate and add functionality whether it be visual or non-visual.

Download the sample code here.

**For the fully evolved version of this, please see this post.

Share this post:
Advertisements

One Response to “WPF: DragDrop Decorator for ItemsControl”

  1. WPF: Drag Drop Adorner « Code Blitz Says:

    […] WPF: DragDrop Decorator for ItemsControl […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: