New with the Silverlight Toolkit: Drag and Drop Support for all your Favorite Controls! (Part 1)

One of the highest voted requests on the Silverlight Toolkit CodePlex page is drag and drop support for the TreeView control.  The good news is the Toolkit team listened and has not only delivered Drag and Drop for the TreeView, but they’ve added support for all the major Silverlight controls!  In the October Toolkit refresh you’ll find controls which add Drag and Drop support to all of your favorite controls – no code required!

 

Introducing The Drag/Drop Target Controls

A DragDropTarget is a Content Control that adds default drag and drop actions to the control nested inside of it.  DragDropTarget’s provide the following functionality:

1.  Initiates a drag operation when an item container is dragged.

2.  Displays a snapshot of the the item container by the mouse while it is being dragged.

3.  Handles drag target events and specifies which drag operations are possible by examining the item source bound to the nested control.

4.  If an item is dropped onto the drag drop target, it is added to the nested control if the nested control is bound to an ObservableCollection (or any collection that implements INotifyCollectionChanged and contains the same type of items as the item that was dropped).

5.  Where possible, scrolls vertically and horizontally when an item is dragged near the edge of the control.

This release of the toolkit introduces the following implementations:

• ListBoxDragDropTarget
• TreeViewDragDropTarget
• DataGridDragDropTarget
• DataPointSeriesDragDropTarget

ListBoxDragDropTarget

In this example we have a ListBox created in XAML and bound to an observable collection.

<ListBox x:Name=”myListBox />

To add drag and drop functionality to our ListBox we nest it inside of the ListBoxDragDropTarget control…

<toolkit:ListBoxDragDropTarget
  xmlns:toolkit="System.Windows.Controls.Toolkit"
  xmlns:mswindows="Microsoft.Windows"
  mswindows:DragDrop.AllowDrop=”True”>
     <ListBox x:Name="myListBox">
         <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
     </ListBox>
</toolkit:ListBoxDragDropTarget>

…and that’s it!  Now we can drag items to and from our ListBox.

If the SelectionMode of the ListBox is set to Multiple or Extended it is also possible to drag and drop several items at once.

“Why did you need to specify the ItemPanelTemplate?”

The ListBoxDragDropTarget cannot reorder items in a ListBox when it is virtualized because it cannot conclusively determine the index of each item.  Therefore we replace the default Panel (VirtualizedStackPanel) with a normal StackPanel.  If you don’t need to enable the reordering items within the ListBox then it isn’t necessary to specify the ItemPanelTemplate.

TreeViewDragDropTarget

The TreeViewDragDropTarget is used the same way as the ListBoxDragDropTarget.

<controlsToolkit:TreeViewDragDropTarget msWindows:DragDrop.AllowDrop="true"  HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
    <controlsToolkit:TreeViewDragDropTarget.Resources>
        <win:HierarchicalDataTemplate x:Key="hierarchicalTemplate" ItemsSource="{Binding Reports}">
            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding Image}" Width="16" Height="16" />
                <TextBlock Text="{Binding Name}" VerticalAlignment="Center" Margin="4,0,0,0" />
            </StackPanel>
        </win:HierarchicalDataTemplate>
    </controlsToolkit:TreeViewDragDropTarget.Resources>
    <controls:TreeView ItemTemplate="{StaticResource hierarchicalTemplate}" Height="300" >
    </controls:TreeView>
</controlsToolkit:TreeViewDragDropTarget>

Note that there is no need to specify the ItemPanelTemplate because in Silverlight the TreeView is not virtualized.

The TreeViewDragDropTarget provides all the functionality you’ve come to expect from Windows Explorer (and more). 

• During a drag operation parent’s expand when hovered over after a short delay
• Dragging a parent into itself is forbidden
• The ability to drag above, below, and into a node is supported

All of these actions can be overridden or cancelled using the events.

DataGridDragDropTarget

Using the DataGridDragDropTarget is straightforward:

<dataToolkit:DataGridDragDropTarget msWindows:DragDrop.AllowDrop="true"  HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
    <data:DataGrid x:Name="dataGrid" AutoGenerateColumns="False"  Height="300" >
        <data:DataGrid.Columns>
            <data:DataGridTextColumn Binding="{Binding Name}" Header="Name" />
            <data:DataGridTextColumn Binding="{Binding Reputation}" Header="Reputation"  />
            <data:DataGridTextColumn Binding="{Binding GamerScore}" Header="GamerScore" />
        </data:DataGrid.Columns>
    </data:DataGrid>
</dataToolkit:DataGridDragDropTarget>

Like the ListBoxDragDropTarget, multiple selection is supported.  However the DataGridDragDropTarget has some limitations due to the fact that it is not an ItemsControl and it is virtualized, specifically that reordering items within a DataGrid is not supported.

DataPointSeriesDragDropTarget

The DataPointSeriesDragDropTarget supports all of the series that ship with Silverlight Charts.  However it is used slightly differently than other DragDropTargets.  Instead of wrapping the individual series it is necessary to put the entire Chart in the DragDropTarget.

<chartingToolkit:DataPointSeriesDragDropTarget msWindows:DragDrop.AllowDrop="true" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
    <chartingToolkit:Chart x:Name="chart" Background="White">
        <chartingToolkit:ColumnSeries IndependentValueBinding="{Binding Name}" DependentValueBinding="{Binding Reputation}" Title="Reputation" />
        <chartingToolkit:PieSeries IndependentValueBinding="{Binding Name}" DependentValueBinding="{Binding GamerScore}" Title="Gamer Score" />
    </chartingToolkit:Chart>
</chartingToolkit:DataPointSeriesDragDropTarget>

“What if a Chart contains multiple series?”

The DataPointSeriesDragDropTargets allows diambiguation between the series by detecting drop operations on the legend.  In other words, items can be dropped both onto the surface of a series or its legend items.  In the example below the Chart contains two series: a Pie series and a column series.  Items can be dragged from a list box into the column series by dropping the items on the column series’  legend item.

It’s also easy to drag items between series, either by dropping data directly onto a series data point or onto their legend item entries.

A Labour of Love

Silverlight Drag and Drop support is a personal, off-hours project that I’ve been working on sporadically for the last few months.  I thought it would be a productive way of learning Rx, the new reactive programming framework for .NET.  When I approached the Toolkit team and asked if they would ship it they agreed.  Of course, having formerly worked for the Toolkit team creating the Silverlight Chart control, ISM, and the Rating control I had some pretty good contacts ;-).

Next time: Overriding the Default Actions of DragDropTargets