Click here to Skip to main content
13,344,281 members (53,802 online)
Click here to Skip to main content
Add your own
alternative version


83 bookmarked
Posted 9 May 2005

Rich Design Time Featured TreeList Control

, 9 May 2005
Rate this:
Please Sign up or sign in to vote.
A Tree like component with rich design time features.

Sample Image


There are actually several reasons that made me start doing this:

  • There are almost no tree control samples available out there. Nothing for VB.NET.
  • There are almost no examples of rich time design support for collection of controls.
  • I needed a tree with various image sizes (for a DVD collection).
  • I hated to not be able to show PNG images correctly within a tree.
  • I wanted to go deep into a control.

I'm not saying my article or my component is great work, but at least it'll give the newbie a rough start on that matter. Of course, I would say that my work is not free! I'd like to put it as ShareYourWorkWare ;) Meaning that if someone wants to improve it, he could make the others benefit as well.


This article will reflect several bits of code that were put together in a kind of complete component. Among those you'll find:

  • How to build a tree (a component that has a collection property that itself has collections, etc.)
    • Implementing a real CollectionBase property.
  • How to make a control "Design Time Enabled"
    • Using <Designer()>.
    • Inheriting from ControlDesigner.
  • Twisting the PropertyGrid.
    • Collections
    • TypeConverters
    • PropertyDescriptor
    • Implementing ICustomTypeDescriptor
  • And many more.


Mea culpa, I know... I've been reusing two nice piece of code that are available on the web. First of all, the great "Managed C++ Wrapper of UxTheme" from Don Kackman, and secondly, The "VisualStyles" provider from SkyBound.

The code itself

Let's try to start from somewhere.

As stated before, I wanted to write a tree control. Which is not an easy thing to do, especially if you have no clue on how to start. First, I'd thought about deriving from the original TreeView control, but I soon realized that it was not possible for what I wanted.

In fact, I needed a tree control that is able to show images that are not always of the same size. Point was: creating a DVD collection application that shows all DVDs within a tree, showing a thumbnail image of the DVD cover. I also imagined a control that could have the famous Text property as long as an "optional" description.


This is the main component. It's derived from Control. I've read somewhere on the web that the tree is supposed to take care of all the paintings. That's how I've implemented it. The main properties of TreeList are:

  • Nodes (represents a collection of TreeListNode)
  • SelectedNode (the node currently selected)
  • PointedNode (the node currently pointed by the right mouse click).

I specified a Designer (shown below) in order to enable rich design time experience. This is how it is declared:

<Designer(GetType(TreeListDesigner))> _
Public Class TreeList Inherits Control

The Nodes property needed to have some special definition as well to see it correctly in the PropertyGrid:

Private WithEvents _Nodes As TreeListNodeCollection
    <Category("Collection"), _
    DesignerSerializationVisibility(DesignerSerializationVisibility.Content)> _
    Public ReadOnly Property Nodes() As TreeListNodeCollection
            Return _Nodes
        End Get
    End Property

It's gotta be using the DesignerSerializationVisibility.Content in order to be able to display it that way:

Sample Image

Notice that instead of having the traditional "(Collection)", I show the number of subnodes along with a nice (+) sign to expand it and show its internal properties.


This holds a collection of TreeListNodes (it's represented as the "Nodes" property). That's its definition:

<TypeConverter(GetType(TreeListNodeCollectionConverter)), _
Editor(GetType(TreeListNodeCollectionEditor), GetType(UITypeEditor)), _
DesignTimeVisible(False), _
ToolboxItem(False), _
Serializable()> _
Public Class TreeListNodeCollection
    Inherits CollectionBase
    Implements ICustomTypeDescriptor

Notice here, the use of a TypeConverter. (That allows to show "3 node(s)" instead of "(Collection)", the user of a customized Editor avoids the problem when you have a collection of collection within a property.)


This represents a node. It's inherited from Component. That was the only way to achieve a correct designer for the TreeList. It is defined that way:

<TypeConverter(GetType(TreeListNodeConverter)), _
DesignTimeVisible(False), _
ToolboxItem(False), _
Serializable()> _
Public Class TreeListNode
    Inherits Component

It also has a property called "Nodes" which represents a TreeListNodeCollection (in order to hold its child nodes).


This is the designer of the TreeList component, it inherits from ControlDesigner and allows the user to select a node at design time. It also helps when a node is selected to change the content of the PropertyGrid displayed at design time.

TreeListNodeCollectionConverter & TreeListNodeConverter

Those are the converters for Collection and Node, it allows to change their respective visualizations on the PropertyGrid object. For instance, a node showing its name instead of "TreeListNode1".


This is the collection editor stated above. Allows to use a CollectionEditor from within another CollectionEditor.


This is the piece that makes Nodes have its little (+) sign at design time ;)

Points of Interest

I've learned a lot of things writing this component. I know that it is not really finished yet, but I hope that other people will join in to move forward and bring it to a stable state.


Sample Image

I also wanted to implement a possibility to show a tree being filled without having to wait for a non responsive control. Therefore the property "IsBusy()" of the TreeList can be set to show a progressbar.


Sample Image

I've also put the option to draw the tree (kind of fantasy) without the Windows XP styles.


Sample Image

I wanted to have scrollbars if the content of the control was too small to show everything. This was a bit of a question for me. I used the Skybound.VisualStylesProvider to achieve the XP look.

Additional insight

I'll be writing more in-depth about this control later on if I see that people like it.


That was my first article guys, hope you enjoyed it ;)

  • May 06, 2005 - v.0.1.


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


About the Author

Nicolas Wälti
Software Developer (Senior)
Switzerland Switzerland
No Biography provided

You may also be interested in...


Comments and Discussions

QuestionCan I use it in ASP.NET page? Pin
fooks22-May-05 21:03
memberfooks22-May-05 21:03 
AnswerRe: Can I use it in ASP.NET page? Pin
Nick Waelti23-May-05 1:57
memberNick Waelti23-May-05 1:57 
AnswerRe: Can I use it in ASP.NET page? Pin
GMorris26-May-05 4:49
memberGMorris26-May-05 4:49 
GeneralVery nice! Pin
Crinoid20-May-05 8:18
memberCrinoid20-May-05 8:18 
GeneralRe: Very nice! Pin
Nick Waelti23-May-05 1:56
memberNick Waelti23-May-05 1:56 
GeneralGreat Job Pin
Briga19-May-05 5:26
memberBriga19-May-05 5:26 
GeneralRe: Great Job Pin
Nick Waelti23-May-05 1:55
memberNick Waelti23-May-05 1:55 
GeneralGiving gradient fill in the background Pin
lflutt17-May-05 14:19
memberlflutt17-May-05 14:19 
First thing i want to say is "THANK YOU" for the control.

I was able to give a gradient fill in the background by adding this code to procedure DrawBackground of Treelist.vb

<br />
   Private Sub DrawBackground(ByVal g As Graphics, ByVal r As Rectangle)<br />
        Dim Br As New LinearGradientBrush(Me.ClientRectangle, m_StartColor, m_EndColor, m_GradientMode)<br />
<br />
        If UxTheme.IsAppThemed AndAlso StylesEnabled Then<br />
            Dim _WindowTheme As WindowTheme = GetThemeData("TREEVIEW")<br />
            Dim _ThemePart As ThemePart = GetPartData(_WindowTheme, "TREEITEM")<br />
            _ThemePart.DrawBackground(g, r)<br />
        Else<br />
            g.FillRectangle(Br, r)<br />
            DrawBorder(g, r)<br />
        End If<br />
    End Sub<br />

of course you need to Import System.Drawing.Drawing2D then create property for start color , end color then type of gradient fill you want to show.
<br />
  Dim m_StartColor As Color = Color.Blue<br />
<br />
    Property StartColor() As Color<br />
        Get<br />
            Return m_StartColor<br />
<br />
        End Get<br />
        Set(ByVal Value As Color)<br />
            m_StartColor = Value<br />
            Me.Invalidate()<br />
        End Set<br />
    End Property<br />
<br />
    Sub ResetStartColor()<br />
        m_StartColor = Color.Blue<br />
    End Sub<br />
<br />
    Function SHouldSerializeStartColor() As Boolean<br />
        Return Not m_StartColor.Equals(Color.Blue)<br />
    End Function<br />
<br />
    Dim m_EndColor As Color = Color.Black<br />
<br />
    Property EndColor() As Color<br />
        Get<br />
            Return m_EndColor<br />
<br />
        End Get<br />
        Set(ByVal Value As Color)<br />
            m_EndColor = Value<br />
            Me.Invalidate()<br />
        End Set<br />
    End Property<br />
<br />
    Sub ResetEndColor()<br />
        m_EndColor = Color.Black<br />
    End Sub<br />
<br />
    Dim m_GradientMode As LinearGradientMode = LinearGradientMode.ForwardDiagonal<br />
<br />
    Property gradientmode() As LinearGradientMode<br />
        Get<br />
            Return m_GradientMode<br />
        End Get<br />
        Set(ByVal Value As LinearGradientMode)<br />
            m_GradientMode = Value<br />
            Me.Invalidate()<br />
        End Set<br />
    End Property<br />

I just want to point out am that newbie you are referring the beginning of the article. So thank you once again on the great control..

Since am newb not sure if its the proper way to do gradient fill but it works for me. Hopefully when you update the control this could be a feature. Then I can see the proper way of doing it.;)

Lance Lutt
GeneralRe: Giving gradient fill in the background Pin
Nick Waelti17-May-05 21:31
memberNick Waelti17-May-05 21:31 
GeneralGreat Pin
Marc Sommer15-May-05 1:22
memberMarc Sommer15-May-05 1:22 
GeneralRe: Great Pin
Nick Waelti16-May-05 20:56
memberNick Waelti16-May-05 20:56 
Questiondouble click to collapse? Pin
Unruled Boy12-May-05 20:16
memberUnruled Boy12-May-05 20:16 
AnswerRe: double click to collapse? Pin
Nick Waelti13-May-05 2:15
memberNick Waelti13-May-05 2:15 
Questionmimics the msn 7 animated graphics? Pin
Unruled Boy12-May-05 20:04
memberUnruled Boy12-May-05 20:04 
AnswerRe: mimics the msn 7 animated graphics? Pin
Nick Waelti13-May-05 2:14
memberNick Waelti13-May-05 2:14 
GeneralVery Informative Pin
Icharus12-May-05 14:19
memberIcharus12-May-05 14:19 
GeneralRe: Very Informative Pin
Nick Waelti13-May-05 2:13
memberNick Waelti13-May-05 2:13 
GeneralBackground image Pin
Rizwan Bashir12-May-05 3:08
memberRizwan Bashir12-May-05 3:08 
GeneralRe: Background image Pin
Nick Waelti13-May-05 2:10
memberNick Waelti13-May-05 2:10 
GeneralGreat control! Pin
Carl Mercier10-May-05 4:12
memberCarl Mercier10-May-05 4:12 
GeneralRe: Great control! Pin
(Nick Waelti)10-May-05 4:27
member(Nick Waelti)10-May-05 4:27 
Generallooks great... Pin
Jerry Maguire10-May-05 3:19
memberJerry Maguire10-May-05 3:19 
GeneralRe: looks great... Pin
(Nick Waelti)10-May-05 3:24
member(Nick Waelti)10-May-05 3:24 

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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.180111.1 | Last Updated 10 May 2005
Article Copyright 2005 by Nicolas Wälti
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid