Manual reordering of items inside a ListView

• Download source files - 15 Kb
• Download demo project - 6 Kb

Introduction

In another community someone asked whether it is possible to implement something like drag&drop inside a ListView.

The person claimed to have searched for an example but didn't find any. Only articles dealing with dragging items into or out of a ListView, but not dragging and dropping items within the same ListView.

This question raised my interest so I built a quick&dirty solution to try it out. After the basics worked I added a few "bells and whistles" (like showing the insertion point in the ListView), but we'll come to this later on.

Basic Idea

Each drag and drop operation is mainly just a combination of handling three events:

• MouseDown: Find out if something that can be dragged has been klicked on and save the reference for further use.
• MouseMove: Show the user some feedback whether or not the item can be dropped at the mouse position.
• MouseUp: Finalize the drag operation and feed the item to the target.

System.Windows.Forms.Control has some methods and events to deal with drag and drop operations, if you want to dig deeper into drag and drop, you should read about Control.DoDragDrop(), Control.GiveFeedback() and the Drag* events. MSDN has some nice tutorials on this topic.

Implementation - first leg

The first thing we have to do is to remember which item is being dragged:

// The LVItem being dragged
private ListViewItem _itemDnD = null;

I chose a ListViewItem so that we can easily access all its properties later on. Likewise, you could just save the index of the item as int, but then you'd always have to access the ListView's Item collection and once the item has been removed from the ListView, you won't find it at all.

Also remember, that _itemDnD is just a reference to the object, so the memory consumption is minimal, as well.

Like stated above, to achieve our goal we have to handle the following events of our ListView:

MouseDown

The ListView has a very convenient method to find the ListViewItem at a certain location: GetItemAt(), so we'll use it to find out which item the user has clicked on.

_itemDnD = listView1.GetItemAt(e.X, e.Y);
// if the LV is still empty, no item will be found anyway, so we don't have to consider this case

Not much else to do here - just remember which item was clicked on and you're done.

MouseMove

Once the user actually moves the mouse while having pressed a mouse button, the actual drag operation is performed.

if (_itemDnD == null)
    return;

// Show the user that a drag operation is happening
Cursor = Cursors.Hand;

For simplicity reasons I just chose one of the predefined Cursors to show that a dragging operation is in progress.

For a start, that's sufficient as well. We'll give additional feedback later on.

MouseUp

Now we're at the point where the actual work is done. The user has released the mouse button, so we have to find out where the item has been dropped. The GetItemAt() method once again is called. Afterwards, the item is removed from the ListView and inserted at the new location.

if (_itemDnD == null)
    return;
 
// use 0 instead of e.X so that you don't have to keep inside the columns while dragging
ListViewItem itemOver = listView1.GetItemAt(0, e.Y);
 
if (itemOver == null)
    return;
 
listView1.Items.Remove(_itemDnD);
listView1.Items.Insert(itemOver.Index, _itemDnD);
 
Cursor = Cursors.Default;

The only problem is that this algorithm isn't sophisticated enough to decide whether to insert before or after the item we dropped our ListViewItem on. Right now we're always inserting before the item we released the mouse over.

There's also a problem now when we drop the item on itself: First it's being removed from the Items collection and then we want to insert it before itself. At this moment, the item has an Index of -1 (i.e. it isn't part of an Items collection), so we'll get an exception here that we cannot insert a ListViewItem before Index position -1.

Don't worry, we'll fix this later on.

First summary

Apart from the few flaws I mentioned above we've already implemented drag and drop operations within a ListView. You see - it's not that difficult.

Now on to the "bells and whistles" I mentioned earlier:

Implementation - second leg

Insertion before/after an item

Right now we always insert before the item we released the mouse button over, so it's not possible to make an item become the last item of the ListView.

To improve the handling I chose to find out whether the item has been dropped on the upper or lower half of the target item. If it's been dropped on the upper half, we'll insert before the target item, otherwise after the target item.

Finding out where exactly the mouse has been released is being accomplished with the help of ListViewItem.GetBounds(). This method allows you to query the rectangle the ListViewItem occupies. I've altered the MouseUp event handler accordingly:

// use 0 instead of e.X so that you don't have to keep inside the columns while dragging
ListViewItem itemOver = listView1.GetItemAt(0, e.Y);
 
if (itemOver == null)
    return;
 
Rectangle rc = itemOver.GetBounds(ItemBoundsPortion.Entire);
 
// find out if we insert before or after the item the mouse is over
bool insertBefore;
if (e.Y < rc.Top + (rc.Height / 2))
    insertBefore = true;
else
    insertBefore = false;
 
if (_itemDnD != itemOver) // if we dropped the item on itself, nothing is to be done
{
    if (insertBefore)
    {
        listView1.Items.Remove(_itemDnD);
        listView1.Items.Insert(itemOver.Index, _itemDnD);
    }
    else
    {
        listView1.Items.Remove(_itemDnD);
        listView1.Items.Insert(itemOver.Index + 1, _itemDnD);
    }
}

Please note that I also checked whether the item is being dropped on itself. In this case we don't have to do anything.

With this modification we can place the item before the first or after the last ListViewItem in the ListView.

Giving feedback by extending the ListView

Now that we can decide where exactly to insert the item, a little more feedback would be nice, don't you think?

I was thinking of drawing a colored line where the item will be inserted if you release the button.

But how to achieve this goal? We can find out whether to insert before or after the current item in the MouseMove event, just like we already do in MouseUp, so that's not the problem.

What is a little complicated, though, is how to perform the actual drawing onto the ListView.

Usually, to perform some extra painting on a control, you can derive from the control, override OnPaint(), call OnPaint() of your base class and then perform your own additional painting.

Unfortunately, the ListView doesn't call OnPaint() (or OnPaintBackground()), because it's still just a wrapper around the CommonControls ListView (has been this way since .NET 1.0).

Nevertheless, there is a way to accomplish custom painting on the ListView.
Every control has a protected method WndProc() in which you can get access to all the windows messages the control receives. This is a very powerful method, you're right at the pulse of the control, so to speak. Mess it up and your control is dead (doesn't work as expected or work at all), play it right and you can do almost anything with the control.
Since OnPaint() usually is being called when the WM_PAINT message is received, we can catch this message here and perform out painting.

The overridden method in a ListView derived class looks like this:

protected override void WndProc(ref Message m)
{
    base.WndProc(ref m);
 
    if (m.Msg == WM_PAINT)
    {
        if (LineBefore >= 0 && LineBefore < Items.Count)
        {
            Rectangle rc = Items[LineBefore].GetBounds(ItemBoundsPortion.Entire);
            DrawInsertionLine(rc.Left, rc.Right, rc.Top);
        }
 
        if (LineAfter >= 0 && LineBefore < Items.Count)
        {
            Rectangle rc = Items[LineAfter].GetBounds(ItemBoundsPortion.Entire);
            DrawInsertionLine(rc.Left, rc.Right, rc.Bottom);
        }
    }
}

WM_PAINT in this case is a constant I defined with the corresponding value (0x000f) taken from one of the windows header files (WinUser.h). You can find them in a subdirectory of your VisualStudio installation, for example.

LineBefore and LineAfter are two new properties I added to the new ListView. They can be set to an item index to make the ListView draw an insertion line before resp. after this item.

The painting of the insertion line has been encapsulated in a private method DrawInsertionLine(), if you wonder where this comes from.

Now that the ListView actually can display insertion lines, the rest is just a matter of setting the right properties and telling the ListView to repaint itself (so that a WM_PAINT is sent and the painting is performed) by calling its Invalidate() method.

Summary

I hope I could show you how drag and drop operations inside a ListView can be accomplished with a few simple steps.

The basic task isn't very hard, but as soon as you want to implement a little more sophisticated control, you should know a little bit about message handling in .NET (and Windows) controls.

History

17.06.2006

Version 1.0 Initial release

You must Sign In to use this message board.

FAQ  Noise Tolerance Very HighHighMediumLowVery Low  Search Messages    Layout Expand All MessagesThread ViewNo Javascript (slow)No Javascript Preview    Per page 102550

Msgs 1 to 7 of 7 (Total in Forum: 7) (Refresh) FirstPrevNext

Good solution Cyril Gupta 20:54 9 Jan '08   Hi there, Your solution is quite different that I designed for the same problem. I used the traditional Dragdrop events. It works just fine. But I like the way you've done it too, it's pretty ingenious, specially the bit about overriding the wndproc to custom paint the control. That idea will help me with a lot of other stuff. Cheers! You can do anything with a little bit of 'magination. Sign In·View Thread·PermaLink Move multiple items Indra_PR 10:16 6 Jan '08   I've tried your code and it's worked. But what about multi-item select, i want to make something like drag-drop item in winAmp playlist. After selecting some items, when the cursor moves up, it moves the selected items up. And vice versa, when the cursor moves down, it moves all the selected items down. Thanks before, need your reply ASAP for my thesis application. Regard, Indra Permana Rusli - No Signature Available - Sign In·View Thread·PermaLink Great! LhugS 3:18 26 Jun '07   This saved me a lot of time that I otherwise had used to write this on my own. By the way, I'd have put this all in one class overriding the events which makes the code more reusable. Sign In·View Thread·PermaLink Re: Great! mav.northwind 9:24 26 Jun '07   This is left for the reader as an exercise Regards, mav -- Black holes are the places where God divided by 0... Sign In·View Thread·PermaLink Very Nice!!! james33707 3:42 18 Apr '07   Thank you James Thank you James Sign In·View Thread·PermaLink Large Icon view doesn't work Donald Man 18:23 20 Jun '06   I try with large icon view, it doesn't have any effect on drawing the marker and move the item in the list. Sign In·View Thread·PermaLink Re: Large Icon view doesn't work mav.northwind 0:49 21 Jun '06   At the moment, it's for the List or Details views only. And, before you ask, when grouping is enabled, the items don't appear in the correct order inside the groups. I'm thinking about modifying the code and article (to use one of the drag&drop cursors, for example), perhaps I'll find time to adress this issue as well, but at the moment I'm quite busy. Nevertheless, you're welcome to extend the code if you need reordering in LargeIcon or SmallIcon View. Regards, mav -- Black holes are the places where god divided by 0... Sign In·View Thread·PermaLink 2.00/5 (1 vote)

Last Visit: Thursday, November 20, 2008 12:37 AM     Last Update:Thursday, November 20, 2008 12:37 AM