Click here to Skip to main content
15,867,330 members
Articles / Multimedia / GDI+
Article

Customizable Tree Control with Animation Support

Rate me:
Please Sign up or sign in to vote.
4.72/5 (17 votes)
8 Apr 2008CPOL4 min read 107.2K   23   115   29
A tree control implementation, allowing complete customization and animation support
Screenshot - SuperTree1.png

Introduction

This article presents a complete, custom tree control for Windows Forms, written in C#.

Background

This tree control was originally written for the FeedGhost RSS Reader. We needed complete control over what the tree displays, including the ability to annotate rows with additional information and icons. (The image above shows a few of the customizations we applied, including extra row text and icons. Not shown in the image are 'pulsing' icon overlays when feeds are being updated). Additionally, we wanted to visual appearance of the tree control to match the rest of the application, with the glossy, glowing animated effects found elsewhere.

Using the Code

From the source files supplied, the best starting point is SuperTreeTest.sln. Load this into Visual Studio, and run it.

Screenshot - SuperTree2.png

This application displays four trees: the two on the left mimic the standard Windows tree control, while the two on the right use our custom "glossy" renderer. (The image above shows the two renderers). The two controls at the top do not use animation; the two on the bottom do.

The control should be usable in your own applications in a similar way to the standard Windows Forms tree control. Add the associated helper assemblies, drop the control onto your form, then add TreeNodes, starting at the RootNode. The control provides events for node selection, clicks and double-clicks. Please note that there is no designer support for data in this control; I've always found that once a control is positioned on a form, data is more easily added in code.

Animation is controlled using the boolean Animate property. The visual appearance of the tree is a more complicated matter, but essentially is handled by an implementation of the IRenderer interface. I've provided two renderers; StandardRenderer and GlowRenderer. While you can write your own from scratch, for minor customizations I'd suggest proxying from an existing one.

The IRenderer Interface

  • Setup/Setdown

    These methods will be called at the start and end of the control's lifetime. You can use these for any initialization and finalization you may need to do.

  • PreRender

    This is called before each batch of rendering. This is usually used to synchronize animations.

  • MeasureIndent

    This function should return the indentation of a particular node, in pixels, from the left-hand edge.

  • MeasureTreeNode

    This function should return the size, in pixels, of a particular node. The dimensions that are actually required are indicated; usually, node heights are constant while the width is a text-measure operation, so only calculate what is actually required.

  • RenderBackground

    This method should draw an area of background. This may be as simple as clearing to the window background color.

  • RenderTreeNodeRow

    This method should draw the node row, that is, the entire width of that row. Often the selection marker will be drawn here.

  • RenderTreeNode

    This method should draw the node itself. It will be called after RenderTreeNodeRow.

  • ProcessClick/ProcessDoubleClick

    Process a raw mouse event. The renderer should decide whether to turn this into a selection event, an expand/collapse event, or a custom event.

The ITreeInfo and ITreeEvents Interfaces

When implementing the IRenderer, you'll notice that you aren't given access to the tree itself. Instead, the necessary methods are available in the ITreeInfo and ITreeEvents methods. In general, ITreeInfo provides information about the tree control, while ITreeEvents allows the state of the tree to be modified.

Animation

Animation is handled centrally by the tree control, so the renderer should never have to invalidate the tree control. To start a node animating, call the BeginAnimating(TreeNode,Rectangle) method on ITreeEvents. That part of the node will then be continually invalidated, until EndAnimating(TreeNode) is called. The GlowRenderer (in the WinFormsGloss TreeControl) demonstrates how to animate glowing hot-track effects as the mouse moves over the nodes and expansion marks.

Node expansion and collapse animation is also handled for you; if you set the Animate property to true, the AnimatedVerticalPositioning class will be used by the tree control.

Points of Interest

The VectorGraphics solution used by the glossy renderer is my abstraction layer for GDI+, allowing vector scenes to be created, styled, and displayed more easily than using basic GDI+ alone. The Testing folder includes a little Office 2007-style graph drawing program.

I'll post an article explaining this library in more depth later.

History

The latest version of the source will be kept here.

  • 2007-12-05: Initial version
  • 2007-12-06: Fix for non-themed display settings

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Web Developer
United Kingdom United Kingdom
I'm currently working for a small start-up company, BinaryComponents Ltd, producing the FeedGhost RSS reader.

FeedGhost RSS Reader:
http://www.feedghost.com

Bespoke Software Development
http://www.binarycomponents.com

Comments and Discussions

 
GeneralDead link please re load another site Pin
akselri21-Oct-21 23:56
professionalakselri21-Oct-21 23:56 
QuestionDead link Pin
dekortix2-Dec-17 21:58
dekortix2-Dec-17 21:58 
QuestionOrdering childNodes ? Pin
Toumar6-Jul-09 2:15
Toumar6-Jul-09 2:15 
QuestionHow can I set BackColor or BackgroundImage? Pin
ddsw041127-Mar-09 4:52
ddsw041127-Mar-09 4:52 
GeneralIssue when removing a node from the Treeview Pin
RUrry4-Mar-09 13:02
RUrry4-Mar-09 13:02 
GeneralRe: Issue when removing a node from the Treeview Pin
RUrry4-Mar-09 13:28
RUrry4-Mar-09 13:28 
GeneralRe: Issue when removing a node from the Treeview Pin
Toumar1-Oct-09 2:39
Toumar1-Oct-09 2:39 
QuestionImages? Pin
OBRon23-Nov-08 15:11
OBRon23-Nov-08 15:11 
This is a terrific control. Visually, it makes the traditional tree control seem like it came from Windows 3.1 What I don't see is support for Images - other than Icon objects. I don't have a library of Icons - but I have a zillion PNG and JPG 16x16 images that I use everywhere. I am not seeing where I assign any Image to a tree node other than an Icon. Am I just missing it, or are Icons my only option here?

Thanks -Ron
AnswerRe: Images? Pin
Stu-Smith23-Nov-08 22:10
Stu-Smith23-Nov-08 22:10 
GeneralRe: Images? Pin
OBRon24-Nov-08 5:42
OBRon24-Nov-08 5:42 
AnswerRe: Images? Pin
RUrry4-Mar-09 12:58
RUrry4-Mar-09 12:58 
Questionplease help. Right To Left Layout? Pin
mahdi_znt24-Oct-08 21:35
mahdi_znt24-Oct-08 21:35 
GeneralSome problems in MDI children Pin
Daniele Alberto Galliano17-Apr-08 22:36
professionalDaniele Alberto Galliano17-Apr-08 22:36 
GeneralRe: Some problems in MDI children Pin
Nicola Costantini21-Apr-08 5:31
Nicola Costantini21-Apr-08 5:31 
GeneralExellent job! Question on license Pin
jesuscheung26-Mar-08 23:53
jesuscheung26-Mar-08 23:53 
GeneralRe: Exellent job! Question on license Pin
Stu__Smith27-Mar-08 5:55
Stu__Smith27-Mar-08 5:55 
Questionwhere is the zip file? Pin
basicci@hotmail.com14-Feb-08 4:07
basicci@hotmail.com14-Feb-08 4:07 
AnswerRe: where is the zip file? Pin
Dan Suthar8-Apr-08 2:17
professionalDan Suthar8-Apr-08 2:17 
GeneralRe: where is the zip file? Pin
Stu-Smith8-Apr-08 6:47
Stu-Smith8-Apr-08 6:47 
JokeRe: where is the zip file? Pin
Dan Suthar8-Apr-08 16:13
professionalDan Suthar8-Apr-08 16:13 
GeneralRe: where is the zip file? Pin
agorby14-Dec-08 22:49
agorby14-Dec-08 22:49 
GeneralRe: where is the zip file? Pin
Stu-Smith17-Dec-08 0:58
Stu-Smith17-Dec-08 0:58 
GeneralCongratulations! Pin
lamarmotte9-Feb-08 22:09
lamarmotte9-Feb-08 22:09 
GeneralRe: Congratulations! Pin
Stu-Smith10-Feb-08 23:41
Stu-Smith10-Feb-08 23:41 
QuestionHow does SuperTreeView behave with 1000+ tree nodes? Pin
Sven So.16-Dec-07 21:16
Sven So.16-Dec-07 21:16 

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.