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

Customizable Tree Control with Animation Support

By , 8 Apr 2008
Rate this:
Please Sign up or sign in to vote.
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)

About the Author

Stu-Smith
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

 
QuestionOrdering childNodes ? PinmemberToumar6-Jul-09 2:15 
QuestionHow can I set BackColor or BackgroundImage? Pinmemberddsw041127-Mar-09 4:52 
GeneralIssue when removing a node from the Treeview PinmemberRUrry4-Mar-09 13:02 
GeneralRe: Issue when removing a node from the Treeview PinmemberRUrry4-Mar-09 13:28 
GeneralRe: Issue when removing a node from the Treeview PinmemberToumar1-Oct-09 2:39 
QuestionImages? PinmemberOBRon23-Nov-08 15:11 
AnswerRe: Images? PinmemberStu-Smith23-Nov-08 22:10 
GeneralRe: Images? PinmemberOBRon24-Nov-08 5:42 
Thank you Stu. I will plan to do that - it's helpful to know I wasn't just failing to see the functionality. -Ron
AnswerRe: Images? PinmemberRUrry4-Mar-09 12:58 
Questionplease help. Right To Left Layout? Pinmembermahdi_znt24-Oct-08 21:35 
GeneralSome problems in MDI children PinmemberDaniele Alberto Galliano17-Apr-08 22:36 
GeneralRe: Some problems in MDI children PinmemberNicola Costantini21-Apr-08 5:31 
GeneralExellent job! Question on license Pinmemberjesuscheung26-Mar-08 23:53 
GeneralRe: Exellent job! Question on license PinmemberStu__Smith27-Mar-08 5:55 
Questionwhere is the zip file? Pinmemberbasicci@hotmail.com14-Feb-08 4:07 
AnswerRe: where is the zip file? PinmemberDan Suthar8-Apr-08 2:17 
GeneralRe: where is the zip file? PinmemberStu-Smith8-Apr-08 6:47 
JokeRe: where is the zip file? PinmemberDan Suthar8-Apr-08 16:13 
GeneralRe: where is the zip file? Pinmemberagorby14-Dec-08 22:49 
GeneralRe: where is the zip file? PinmemberStu-Smith17-Dec-08 0:58 
GeneralCongratulations! Pinmemberlamarmotte9-Feb-08 22:09 
GeneralRe: Congratulations! PinmemberStu-Smith10-Feb-08 23:41 
QuestionHow does SuperTreeView behave with 1000+ tree nodes? Pinmemberstotti_no116-Dec-07 21:16 
AnswerRe: How does SuperTreeView behave with 1000+ tree nodes? PinmemberStu-Smith10-Feb-08 23:19 
GeneralVery good Job Pinmemberzwan136-Dec-07 1:48 

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 | Mobile
Web01 | 2.8.140415.2 | Last Updated 8 Apr 2008
Article Copyright 2007 by Stu-Smith
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid