Friday, October 23, 2009

In part 1 you were introduced to the new Silverlight DragDropTarget controls. In addition to being powerful these controls are very flexible, allowing developers to customize almost every single aspect of their behavior. In order to understand how to customize these controls you must first understand how they communicate. The good news is that DDT’s communicate via a WPF-compatible implementation of the drag/drop events!

A WPF-Compatible (mostly) Implementation of Drag and Drop

The Silverlight Toolkit Drag and Drop Framework is a compatible subset of WPF’s drag and drop methods and events – with a few small exceptions. The diagram below demonstrates how DDTs are layered on top of this WPF-compat framework. DDTs use these events and methods to communicate with each other.

The fact that the Silverlight Toolkit contains a full implementation of WPF’s drag and drop stack gives the developer tremendous flexibility. They can…

Use DDTs.

Communicate with and customize DDTs by handling the drag and drop events.

Choose not to use DDTs and use the WPF-compat API’s to initiate and manage their own drag operations.

Add native drag and drop support to their custom controls by implementing the IAcceptDrop interface.

Create new DDTs for existing controls by creating a class that inherits from DragDropTarget.

Differences between Silverlight Toolkit and WPF Drag and Drop API’s

Different Namespaces

The most obvious difference between the Silverlight implementation of drag and drop and that of WPF is that the Silverlight drag and drop objects are located in the Microsoft.Windows namespace rather than in the System.Windows namespace. When writing drag and drop code it’sgood practice to insert the following code in your source file:

Using an alias for the namespace with the drag/drop objects ensures that you can writecode that can be easily ported to WPF or a future version of Silverlight with core-level drag/drop support. All of the code samples in this series of blog posts assume that you’ve defined the alias “SW” as Microsoft.Windows in Silverlight and System.Windows in WPF.

Starting a Drag Operation

Keep in mind that if you intend to use a DDT you don’t need to know how to do this because DDT’s automatically initiate drag operations when an item is dragged. However if you want to initiate a drag operation yourself you’ll need to know about some subtle (but necessary) differences between the Silverlight’s and WPF’s DoDragDrop methods.

In WPF the DoDragDrop method blocks until the drag operation completes. In Silverlight there are no blocking UI methods so it is necessary to listen for a DragDropCompleted event if you want to perform an operation when a drag completes.

It is still possible to write cross-platform code if you use the following pattern:

In Silverlight (unlike WPF) it is not possible to sample the mouse state. Therefore the developer must track the state of the mouse keys and pass it to DoDragDrop. This is straightforward if, as is commonly the case, the drag operation begins with a mouse click.

Although the DragDropKeyStates enumeration is a flags enum which includes members that track keyboard states there is no need to include these. The DoDragDrop method will sample the keyboard and update the value when invoked.

Listening to Drag Source and Drag Target Events

In WPF there are two ways to attach a handler to an event. The first is to attach a handler to the event on the UIElement and the second is to attach a handler to the attached event object:

Silverlight Toolkit’s Drag and Drop Framework supports the latter approach for all drag target and source events. By using AttachEvent and RemoveEvent you can write code that will work on WPF and Silverlight. For more information on attached events see the Attached Events Overview on MSDN.

Note: DDTs implement the familiar WPF events so you don’t need to use the more verbose attached event approach when you’re working with them.

In WPF all UIElements have an AllowDrop property which determines whether they will receive drag/drop events. As it isn’t possible to add properties to existing types the Silverlight Tookit implementation of drag and drop uses an AllowDrop attached property on the static DragDrop object:

Customizing DragDropTarget Behavior

DDT’s do their best to determine the allowed effects of a drag operation by examining the bound collection and the items inside of them. For example if a DDT’s control is bound to a ReadOnlyCollection or an array then the allowed effects of a drag will not include DragDropEffects.Move and the allowed effects of a drop will be DragDropEffects.None. By default a DDT never sets the allowed effects of a drag to DragDropEffects.Copy because there is no generic way of cloning an item in Silverlight (ICloneable does not exist). But what if we wanted the effect of a drop to be a Copy operation?

Let’s say we have two DDT’s, one containing a ListBox and the other containing a DataGrid.

When the user drags Gamers from the ListBox to the DataGrid we’d like to add a copy of the Gamer object to the DataGrid rather than add a reference to the object in the ListBox to the DataGrid’s bound collection (the default action). In order to ensure that when an item is dragged from a ListBox the allowed effect is DragDropEffects.Copy rather than DragDropEffects.Link we set the ListBoxDragDropTarget’s AllowedSourceEffects property.

listBoxDragDropTarget.AllowedSourceEffects = SW.DragDropEffects.Copy;

Since the DataGridDragDropTarget doesn’t know how to handle a Copy operation we need to handle its Drop event.

using System.Collections.ObjectModel;
// snip...dataGridDragDropTarget.Drop +=
(sender, args) =>
{
// Only handle this event if it's a copy. If the event is not handled
// the DDTs base implementation of Drop will execute.if ((args.AllowedEffects & SW.DragDropEffects.Copy) == SW.DragDropEffects.Copy)
{
IList<Person> dataSource = dataGrid.ItemsSource as IList<Person>;
// Retrieve the dropped data in the first available format.object data = args.Data.GetData(args.Data.GetFormats()[0]);
// The data is the ItemDragEventArgs that was created by the DDT when
// the drag started. It contains a SelectionCollection.
// SelectionCollection's are used by DDTs because they can transfer
// multiple objects. The fact that they store the indexes of the
// objects within the source collection also makes reordering items
// within a source possible. ItemDragEventArgs dragEventArgs = data as ItemDragEventArgs;
SelectionCollection selectionCollection = dragEventArgs.Data as SelectionCollection;
if (selectionCollection !=null)
{
IEnumerable<Gamer> gamers = selectionCollection.Select(selection => selection.Item).OfType<Gamer>();
if (gamers.Any())
{
foreach(Gamer gamer in gamers)
{
// Invoke our custom Clone method to make a copy. dataSource.Add(gamer.Clone());
}
args.Effects = SW.DragDropEffects.Copy;
args.Handled =true;
}
}
}
};

Now when we drag items from our ListBox to our DataGrid we will get copies of the Gamer objects and the ListBox’s contents will be unchanged.

There are many more extensibility points in DDT’s. I encourage you to take a close look at the events and properties. I think you’ll be impressed by how flexible these controls are.

Powerful and Flexible

By now it should be clear that the Silverlight Toolkit Drag and Drop Framework is more than a few DDTs that add drag and drop behavior to a certain Silverlight controls. It is also a rich set of WPF-compatible events and methods that can be used with any Silverlight control - including your own!

It sounds like what you really want here is a DDT for a Canvas. Ideally this canvas would place elements wherever they were dropped. You could place your image inside this DDT.

The good news is that I'm actually working on a PanelDragDropTarget for the next blog post. I will extend this at some point and create a CanvasDragDropTarget.

Unfortunately a CanvasDragDropTarget cannot be perfect because the drop event provides no information about the mouse offset from the top-left of the item being dragged. As a result the item will jump slightly when its dropped and its top left will be at the mouse position.

I'm actually going to make a change so this information is preserved for the next release (which will be very soon).

Great articles. I'm using the Silverlight Toolkit's listbox drag/drop target controls for an app I'm working on.

I have a question though - I have one listbox populated by Blend's sample data (temporarily)... so when I drop this listboxitem in another droptarget, I'd like to check the selected item's data properties to see if it's equal to true. If true, then I want another control to turn a different color. I just don't know how to access the dropped item's data properties so I can add this logic...

I might not be making much sense...so if you could email me back that would be great... There doesn't seem to be much documentation online on this yet.

212fire: If you need to look at the dropped object's properties then listen for the Drop event on your target DDT. There's an example of this in the blog post. Inside the drop event you can examine the objects in the SelectionCollection. The key trick here is to make sure NOT to set the Handled property of the event args to true. That way the default implementation of DDT will take over and cause the items to be added, BUT you'll get an opportunity to put some logic in beforehand (like changing color).

I'm going to release it with the next Silverlight Toolkit release - either in the Toolkit or on my blog. The reason I'm waiting is that I've made some important changes in the API to make the PanelDDT work as smoothly as possible. Don't worry, the next release will be out _very_ soon.

Hello Jafar, very nice posts. I'm trying to do the same with the TreeViewDragDropTarget, the problem is that i don't know where the drop was done, finally i can get the treeviewitem where the drop operation was made by using VisualTreeHelper.FindElementsInHostCoordinates and the DragEventArgs.GetPosition, but i also need to check if the drop operation was made above, over or below the treeviewitem. Can you give me some advise on this.

Thanks for this and getting it in the toolkit. I'd appreciate some more info, or places to look. I have a text box that I want to be my drag source, and a list box as the destination. The list box data is not just text strings - but the data is create based on what I'm dragging...

Basically, I need to know where to read a tutorial on implementing basic D&D here. I've seen other postings around, but it isn't clear to me if I should be trying to fit into this framework you've got in the toolkit or rolling my own from scratch.

I'm trying to do a custom drap & drop. I need more control of the data that I'm sending on the args.The SelectionCollection doesn't make a lot of sense in our case since we want to deal directly with the modifications to the objects in the Model/ViewModel level specially in cases where the drop operation will result in a service call.

I tried to customize what is set on the data of the DragEventArgs to send my own type, however if I do this it breaks with a NullReferenceException when trying to use the selection in line 352 of the DragDropTarget.

The code should create a new Selection if the selection is null instead of doing it when the data was converted to a selection (which would cause other problems because we'll have a Selection with an Item of type selection).

I already fix this and seems to be working fine. It's an easy change and I could send a patch if you need me to.

BTW, another approach is to deal with this at the drop target, however I really don't want to have a bunch of if/else on the drop to accept all the different types.

I think that the right way to handle this instead of adding our object to the Data property in the ItemDragEventArgs, we should just add one or more DataFormats to the DataObject or provide our own implementation of IDataObject and then the drop target would deal with whatever format suites it better. Right now the DataObject is created internally (or I might be missing some extension points)

Is it possible to give feedback which varies based on the index where the drop object whould be dropped within the drop target? For example, if it not possible to drop an item as the first item in the list, but it is possible to drop it as he second item in the list?

Miguel: It would appear that you've found a bug in SelectionCollection and I'll try and get that fixed for the next toolkit release.

You can create a new DataObject if you like. My recollection is that if the object passed to DoDragDrop is of type IDataObject then that object will be used. Otherwise a new data object will be created and the data will be nested inside. If that's not the case then that's a bug (this is WPF's behavior) and I will rectify it.

The bubbling behavior is correct and is WPF-compat.

Anonymous: It seems like determining whether an item could be dropped at a given index is the targets decision. Therefore it could set the drag drop effects based on the target index. You may have to inherit from DDT to get access to that information but it should be possible.

>IDataObjectI tried using it, but apparently I was setting it in the wrong place or something was broken. I was setting the Data property in the ItemDragEventArgs during the ItemDragStarting event. However, this property has the actual data and not the DataObject so I couldn't add a new format. If I added my own IDataObject a new DataObject wrapping my DataObject. I've this working now, but let me know if you need some help to reproduce it, I could prepare a minisample that shows this behaviour.

>BubblingI'm sorry. I just re-read what I said and I think I was just missing the e.Handled = true to avoid the event to bubble

I needed to be able to fire an event when something is dropped on an image (in my case a recycle bin). I read through the article and found that you used the method AttachEvent. I'm using Silverlight 3 but the controls does not contain a definition for AttachEvent. I think the right method to use is AddHandler which worked for me.

The user control’s class is inherited from IAcceptDrop.Here are my observations (Note – I have referred elements with their x:Name attribute):1) I am getting DragEnter event however immediately I get DragLeave event for both “childCanvas” and “childImage” which is wrong as mouse is still inside the canvas/image. As a result of this I am not getting the OnDrop event2) If I remove the ParentCanvas and host the Image element directly inside the User control then everything works fine.3) If I change AllowDrop for ParentCanvas to true I get the OnDrop event however the OriginalSource is the ParentCanvas and not the child element on which the drop happened.My guess is this is a bug, any suggestions?I want to replace the image with the drag source image.

Got the exact issue. Toolkit is using RenderSize property to determine the original source for the drag operation (refer - Controls.Toolkit\DragDrop\DragOperation.cs, function - GetDragOverOriginalSource)

In my case the RenderSize for Image element is (0,0) and hence the original source changes to its parent. This is a bug in Silverlight refer the link: http://connect.microsoft.com/VisualStudio/feedback/ViewFeedback.aspx?FeedbackID=520507

The workaround that I can think of is to use ActualWidth/ActualHeight properties as below: node => new Rect(new Point(0, 0), new Size( (node as FrameworkElement).ActualWidth, (node as FrameworkElement).ActualHeight)).Contains(args.GetPosition(node)))

Is there a way to disable dragging above/below nodes in the TreeViewDragDropTarget?I can't find the exact problem, but it seems to be duplicating items (overwriting existing data!) so I need to find a way to disable it, while still enabling dragging into a node.I can't find much info about the DragDropTargets on the web about this except for your blog!

Hi Jafar,I have a question... I am trying to use drag and drop in my application that allows users to "drop occupants into seats of a vehicle." So, I have created a ListBoxDragDropTarget/ListBox with each seat having their own LBDDT/ListBox all within the vehicle's listbox data template. Then I also have a LBDDT/ListBox for the occupants the user can drag from and into the Vehicle Seat...All of these listboxes are bound to their own ObservableCollections. The problem is that when I try to drag a person from one listbox into the Vehicle seat - it uses the DragDrop "Copy" effect rather than using the "Move" effect which is what I need... Please let me know what you think or how I can fix this...

Ok, nevermind about my previous requests. What I ended up doing was removing the ItemSource bindings and created a few targetedtriggeractions to work around the problem. Basically, the drag and drop works now properly although I could not bind the ItemSource..(I am manually populating the listbox since there will always only be one item).

I do have just one more question... I noticed that if you are trying to drag and drop into a listbox that there is this insertion line that appears on DragEnter... In my case, I don't want to show it... Is it possible to remove the insertion line or hide it ?

Hi. I use DataGridDragDropTarget which works fine, but whatever row I drag, it always shows the first source grid's row as the transparent dragged image. Is it a bug? Also, how can I setup my own dragged image? Is it via DragDecoratorContent in ItemDragStarting?

Another question, how can I detect the target row in the target grid when dropped? Currently I do this using mouse position and hit testing, because I haven't found any "target row" data in events.

Hi Jafar,1) I noticed that when we are dragging the mouse faster then the dropping is not happening. This is happening in the SLToolkit sample as well. The item being dragged gets removed from source list, however it does not appear in the destination list box.2) Another problem is related to positioning of the tranparent background (decorator). When you start drag for the first time just notice that it appears at 0,0 and not at the mouse location. Once you drop it, then subsequent drag-drop operation starts the background image at the last drop position. Dragging slowly hides the problem somewhat, however it is more prominent when you drag faster.

How do I customize it to allow the drag and drop only between the elements at same heirarchy level in a tree view. Currently I see that the elements are draggable across heirarchies. Basically what I need is, interchanging the elements' position which are in the same heirarchy level in a treeview.

I'm having problems inheriting a DDT. I simply created a class that inherits from the TreeViewDragDropTarget. I can create a UserControl, put the new DDT inside of it with a TreeView inside of the new DDT. So far so good... The problem is that I can not place that UserControl on any page or other UserControl without Blend giving me the big red box error: ArgumentNullException: Value cannot be null.Parameter name: stream

However, the code compiles and runs.

I have no idea why I can't do a simple inheritance. Any ideas? I must be missing something.

I have used the DragDropTargets with a standard dataGrid, but now i am attempting this with the datagrid's itemsource being bound to a RIA DomainDataSource. For some reason this does not allow for drag or drop, have you seen this?

If you want to limit tree view item moves to within the current level of hierarchy then you have to hook the DragOver,DragEnter,DragLeave, and Drop events and set the Effects property of the DragEventArgs to None when the target location is outside of the current hierarchy.

I suggest you subclass TVDDT. This will give you access to the protected GetDropTarget which accepts a DragEventArgs. This method will allow you to find out the intended drop target of a drag operation.

Scott B:

The Blend exception is almost certainly due to the fact that DDT inherits from ContentControl and when Blend inserts a CC onto a design surface it adds some content to it. This wouldn't be a problem but the DDT's throw an exception unless their Content is set to the correct type. A ListBoxDDT throws if its content is not set to a ListBox, etc.

The solution is to create a DefaultInitializer for your custom DDT. By doing so you can prevent Blend from adding Content to the DDT at design-time. See my former manager Ning Zhang's blog for details. http://www.ningzhang.org/2009/05/11/editing-model-default-initializer-for-silverlight-controls/

michael_p_lockwood:

In order to drag and drop from a data source it must implement various interfaces (INCC and IList). I suspect that the DomainDataSource dosn't implement one of these.

Avinash:

In order to hide the drag image you can hook the ItemDragStarting event and set the DragDecoratorContent property on the ItemDragEventArgs to null. If you want to change the style of the drag decorators there is a template part called "InsertionIndicator" of type path.

I have a ListBox and a Treeview.I can drag items from ListBox and drop on to Treeview. I don't want to drop item above or below the treeview node. I tried to do in the drop event of TreeViewDragDropTarget but of no use. I am not able to cancel the drop event. How can I achieve this? Please help me.

Jafar, I wrapped the Drag Drop API you created in the Silverlight Toolkit into DragDrop using attached properties. I got the idea from Pavan Podila's work in WPF that really helped me earlier. Here is the link: http://sl4dragdrop.codeplex.com/ . Hopefully it will be of some help to other people.

About Me

I'm a software developer who started programming at age 16 and never saw any reason to stop. I'm working on the Presentation Platform Controls team at Microsoft. My primary interests are functional programming, and Rich Internet Applications.