Click here to Skip to main content
Click here to Skip to main content

Drag and Drop Treeview control

, 31 Jul 2004
Rate this:
Please Sign up or sign in to vote.
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

Share

About the Author

yetanotherchris
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

 
GeneralProblem when dragging a node from one treeview to another treeview Pinmembermightygirls8-Feb-09 21:35 
GeneralRe: Problem when dragging a node from one treeview to another treeview PinmemberVercas13-Oct-10 10:04 
GeneralGood Start PinmemberAli Rafiee23-Aug-08 13:35 
GeneralBuggy Buggy Buggy PinmemberTim Kock6-Apr-08 6:07 
Generaldrag and drop onto different tree control Pinmembererinselena3-Jul-07 9:18 
GeneralRe: drag and drop onto different tree control PinmemberPatrick de Kleijn10-Jul-07 11:56 
Questiondo i need to download this control? PinmemberICCI29-Mar-07 8:51 
AnswerRe: do i need to download this control? Pinmemberrpallas4-Mar-08 12:15 
GeneralVery buggy! PinmemberSocrates#3-Nov-06 6:16 
QuestionDragging from a listbox PinmemberSebicu24-Oct-06 23:40 
GeneralNodes turn black when dragging over PinmemberMathieu Jacques12-Oct-06 6:34 
QuestionRe: Nodes turn black when dragging over Pinmembererinselena31-Jan-07 6:28 
AnswerRe: Nodes turn black when dragging over PinmemberJason Wieth12-May-09 13:57 
QuestionCancel Dragging Due To Target Node Pinmembercentiipede6-Apr-06 9:46 
Generaldrag drop problem Pinmembermargiex1-Nov-05 0:00 
GeneralEnsureVisible without right-scrolling PinsussGavin McKay12-Oct-05 18:40 
GeneralThe API-function you need for the ghost icons Pinmembertschenz28-Sep-05 7:03 
GeneralRe: The API-function you need for the ghost icons - working VB.NET implementation Pinmemberdecoda10-Jan-07 9:32 
Generalbug found and fixed it PinmemberIng Bram Boucherie15-Apr-08 6:32 
General[fix]Custom Nodes and moving PinmemberKbirger24-Aug-05 6:01 
GeneralOnDragLeave PinmemberPoele3-Jun-05 3:41 
GeneralRe: OnDragLeave PinmemberKbirger24-Aug-05 5:49 
Questionmy node doesnt work ???? Pinmembergyokusei29-Apr-05 18:25 
GeneralSmall fix to your code Pinmemberrasw27-Jan-05 19:46 
QuestionCan I do it from VB.net PinsussMichel Aparecido3-Jan-05 6:28 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150305.1 | Last Updated 1 Aug 2004
Article Copyright 2004 by yetanotherchris
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid