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.

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.

apologies for the late reply - I don't remember ever getting a notification email from CodeProject.

I'll answer both questions together:

Essentially, to start customizing the tree control, pick one of the renderers, and copy it and use it as a starting point. You can then set this as the renderer for the tree controls you need it in.

To provide your own customizations, modify the MeasureTreeNode and RenderTreeNode methods. To add an "unread count" to each node, you'd add on some extra space in measure (to account for the numbers), and you'd draw the values in the render method.

Adding a button is trickier. You have two choices: 1 - add real buttons for each node, or 2 - render fake buttons. Option (1) is likely to be too heavyweight - having that many real buttons will likely add too many window handles. Option (2) is tricky if your buttons need to look like OS ones - you'll need separate render paths for Win2K, XP themes, and Aero. If you don't need them to look like OS ones then you can use a single render code path.