Click here to Skip to main content
16,020,424 members
Articles / Programming Languages / C#
Article

Drag and Drop Treeview control

Rate me:
Please Sign up or sign in to vote.
3.86/5 (19 votes)
31 Jul 20044 min read 316.2K   5.5K   77   52
A treeview that has drag and drop built in.

Sample Image - DragDropTreeview.gif

Introduction

One of the common behaviors developers want to implement with treeviews is drag and drop. For some reason, Microsoft haven't made this entirely easy with the .NET TreeView control (and it hasn't changed in the 2.0 beta either). Whilst it's not really that challenging to do, it makes sense to have a single control that has the behavior built in, instead of cutting and pasting the event each time you want to implement drag and drop in a treeview.

Drag and drop is based around 4 events: OnDragDrop, OnDragEnter, OnDragLeave, OnDragOver, and in the TreeView control, OnItemDrag. I won't bother going over the order in which these events are called or what they do, you can read the MSDN docs for that, or use Google. Suffice to say, these events have all been implemented in this TreeViewDragDrop control.

Features of the control

I built the control for a management application for a website I store code examples on (www.sloppycode.net, shameless plug). Remembering the old adage, programming is 90% design, I wrote down the following features I wanted the control to do:

  • Auto scrolling
  • Target node highlighting when over a node
  • Custom cursor when dragging
  • Custom ghost icon label when dragging
  • Escape key to cancel drag
  • Blocks certain nodes from being dragged via a DragStart event
  • Sanity checks for dragging (no parent into children nodes, target isn't the source)

Some of the above features aren't documented in MSDN, but can be found if you trawl through Google groups and websites. I'll go through how I implemented these core features now.

Auto scrolling

This is done via a WinAPI SendMessage call. The OnDragOver event performs a SendMessage call (277 is the constant value, WM_SCROLL I think, but I haven't checked that). This scrolls the treeview up or down, depending on the mouse position.

Target node highlighting

This is pretty straightforward to perform, you simply change the target node's background and foreground color in the OnDragOver event. The default color for this, based on Windows Explorer, is the system 'Highlight' color for the background color, and 'HighlightText' for the foreground color. I've made these properties in the control so people are free to change them to whatever they like.

Custom cursor when dragging

This is done using the OnGiveFeedback event. The event passes a GiveFeedbackEventArgs class which has a UseDefaultCursors property. We can set this to false if we want to implement a custom cursor, and change it to the cursor we want. We also check if dragging is being performed, and change the cursor back if it's not.

Custom ghost icon

This feature is the nicest one of the control, although will probably be the biggest source of bugs. It copies the Windows Explorer behavior of showing the node that is being dragged, as a 'ghosted' or faded out version, including the label of the node and its icon. I implemented this using a second form, which is moved to the position the mouse is. Via properties in the control, you can change the image that is being shown, and the font of the label. It's a nicer version of the custom cursor mentioned above, although I get the feeling I'm doing it a long way round, and that there's a Windows API call that does it for me already - the problem is I don't know what it is. If anyone knows, please say.

Escape key to cancel drag

This is another standard behavior of Windows Explorer's treeview, where you can hit the escape key to cancel the dragging. The OnKeyUp event is where this is performed, it checks to see if the key is the escape key, and cancels the drag if it is, also returning any dragged over nodes to their original state.

Blocks certain nodes from being dragged

I've added a few custom events into the control to add some small extra event functionality. The main one of these is the DragStart event. This is fired when the drag begins, and allows you to check which node is being dragged, and stop the drag drop event if needs be. This can be useful if, for example, you have a recycle bin in your treeview, and don't want the user to be dragging that around the place.

Sanity checks for dragging

This is built in to stop nodes being dragging inside of themselves, or being dragged onto themselves. It uses the Path property to do the check in the fastest way possible. This does mean that if you have 2 paths the same, then it won't work; you may want to build a derived class if you've got this problem, and do it the long way around, by cycling back up the parent nodes and checking it that way.

That's about it. I've added an over-ridden WndProc event which prevents the treeview's background from being repainted on each update, stopping a flicker. It still flickers a bit when you're holding a node, but this seems to be something with the .NET framework controls. Double buffering has been tried but with no success, any suggestions would be welcome.

Hopefully, it'll be useful to some people.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
United Kingdom United Kingdom
London based C# programmer.

I maintain my own pet C# site http://www.sloppycode.net in my spare time.

Comments and Discussions

 
QuestionCode License Pin
Member 1454678831-Jul-19 3:51
Member 1454678831-Jul-19 3:51 
GeneralProblem when dragging a node from one treeview to another treeview Pin
mightygirls8-Feb-09 20:35
mightygirls8-Feb-09 20:35 
GeneralRe: Problem when dragging a node from one treeview to another treeview Pin
Vercas13-Oct-10 9:04
Vercas13-Oct-10 9:04 
GeneralGood Start Pin
Ali Rafiee23-Aug-08 12:35
Ali Rafiee23-Aug-08 12:35 
GeneralBuggy Buggy Buggy Pin
Tim Kock6-Apr-08 5:07
Tim Kock6-Apr-08 5:07 
Generaldrag and drop onto different tree control Pin
erinselena3-Jul-07 8:18
erinselena3-Jul-07 8:18 
GeneralRe: drag and drop onto different tree control Pin
Patrick de Kleijn10-Jul-07 10:56
Patrick de Kleijn10-Jul-07 10:56 
Questiondo i need to download this control? Pin
ICCI29-Mar-07 7:51
ICCI29-Mar-07 7:51 
AnswerRe: do i need to download this control? Pin
rpallas4-Mar-08 11:15
rpallas4-Mar-08 11:15 
GeneralVery buggy! Pin
Socrates#3-Nov-06 5:16
Socrates#3-Nov-06 5:16 
QuestionDragging from a listbox Pin
Sebicu24-Oct-06 22:40
Sebicu24-Oct-06 22:40 
GeneralNodes turn black when dragging over Pin
Mathieu Jacques12-Oct-06 5:34
Mathieu Jacques12-Oct-06 5:34 
QuestionRe: Nodes turn black when dragging over Pin
erinselena31-Jan-07 5:28
erinselena31-Jan-07 5:28 
AnswerRe: Nodes turn black when dragging over Pin
Jason Wieth12-May-09 12:57
Jason Wieth12-May-09 12:57 
QuestionCancel Dragging Due To Target Node Pin
centiipede6-Apr-06 8:46
centiipede6-Apr-06 8:46 
Generaldrag drop problem Pin
margiex31-Oct-05 23:00
margiex31-Oct-05 23:00 
hi, how can I drag data from other control to this treeview, It will not fire the dragcomplete event.
GeneralEnsureVisible without right-scrolling Pin
Gavin McKay12-Oct-05 17:40
Gavin McKay12-Oct-05 17:40 
GeneralThe API-function you need for the ghost icons Pin
Member 130319328-Sep-05 6:03
Member 130319328-Sep-05 6:03 
GeneralRe: The API-function you need for the ghost icons - working VB.NET implementation Pin
decoda10-Jan-07 8:32
decoda10-Jan-07 8:32 
Generalbug found and fixed it Pin
Ing Bram Boucherie15-Apr-08 5:32
Ing Bram Boucherie15-Apr-08 5:32 
General[fix]Custom Nodes and moving Pin
Kir Birger24-Aug-05 5:01
Kir Birger24-Aug-05 5:01 
GeneralOnDragLeave Pin
Poele3-Jun-05 2:41
Poele3-Jun-05 2:41 
GeneralRe: OnDragLeave Pin
Kir Birger24-Aug-05 4:49
Kir Birger24-Aug-05 4:49 
Questionmy node doesnt work ???? Pin
gyokusei29-Apr-05 17:25
gyokusei29-Apr-05 17:25 
GeneralSmall fix to your code Pin
rasw27-Jan-05 18:46
rasw27-Jan-05 18:46 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.