I learned how to implement drag and drop in WPF from Josh Smith's article Drag and Drop Items in a WPF ListView. Josh's great article and attached code describe many WPF features related to drag and drop functionality. I felt, however, that most of the time people might want to use just a plain, vanilla drag and drop without most of those features. For such people, this article and the related code can be more useful.
On top of that, Josh uses the
MouseUtilities class developed by Dan Crevier that calls some Win32 functions. I got around this problem by using the event's
GetPosition method. So, one should be able to use the functionality presented here in a Web browser application (XBAP) without any problems.
Later note - added on 03/16/08: Actually this is quite true, one cannot run an XBAP application with
DragDrop.DoDragDrop() function under partial trust. To see an example of Drag and Drop implementation for XBAP, take a look at Implementing Drag Drop Operations for Browser Based WPF Applications (XBAP). Also for multiselect drag and drop, see MultiSelect Drag and Drop in WPF.
Using the Code
To use the code, just download it, open the project using Visual Studio 2008, compile and run.
Use drag and drop to re-order the items in the list.
Brief Code Description
There are basically three files containing the code:
Shape.cs contains the definition for very simple objects that are used as items behind the
ListView. Each item has a name and number of sides as properties.
Window1.xaml contains XAML representing a very simple
ListView control in it.
ItemsSource property is set to point to a collection of
Window1.xaml.cs contains all the C# plumbing and the functions that actually do drag and drop:
ListView1_PreviewMouseLeftButtonDown - originates the drag operation
ListView1_Drop - completes the drop operation
Using Event Argument GetPosition Function to Determine Current Mouse Position
MouseButtonEventArgs classes have the function:
This function returns the current mouse position with respect to the Visual element (passed to the function as the argument). Since
MouseButtonEventArgs do not have a common superclass or interface that defines the
GetPosition function, I wrote the code that takes
GetPosition function as a
delegate in order to be able to re-use it for both classes. Here is the functionality that returns the
index of the current item in the list:
int GetCurrentIndex(GetPositionDelegate getPosition)
int index = -1;
for (int i = 0; i < this.ListView1.Items.Count; ++i)
ListViewItem item = GetListViewItem(i);
if (this.IsMouseOverTarget(item, getPosition))
index = i;
bool IsMouseOverTarget( Visual target, GetPositionDelegate getPosition)
Rect bounds = VisualTreeHelper.GetDescendantBounds( target );
Point mousePos = getPosition((IInputElement) target);
return bounds.Contains( mousePos );
GetPositionDelegate is defined as:
delegate Point GetPositionDelegate(IInputElement element);
Here is how the function
GetCurrentIndex is called: from
ListView1_Drop function - responsible for dropping operation (this function uses
void ListView1_Drop(object sender, DragEventArgs e)
int index = this.GetCurrentIndex(e.GetPosition);
ListView1_PreviewMouseLeftButtonDown function - responsible for starting drag operation (this function uses
void ListView1_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
oldIndex = this.GetCurrentIndex(e.GetPosition);
- 3rd March, 2008: Initial post
- 16th March, 2008: Added references to other drag and drop articles