Click here to Skip to main content
13,046,533 members (71,995 online)
Click here to Skip to main content
Add your own
alternative version


24 bookmarked
Posted 3 Jan 2007

Button TreeView Control

, 29 Oct 2010
Rate this:
Please Sign up or sign in to vote.
Button TreeView is a TreeView control where nodes are not label control or text box control nodes but button controls

Sample screenshot

Button Tree View User Control


TreeView control provides a tree-like view of hierarchical data as its user interface. Underneath, its programming model is based on the familiar tree structure consisting of parent nodes and child nodes. Each node has its own Nodes collection, where Node has Text, Tag and Image attributes. Tree structure is shown in figure 1.


Figure: Tree Structure

TreeView control is mostly used for folder tree where you need hierarchy. But TreeView doesn't support controls (like Button, Combobox, DataGrid) as Nodes.

As each node can link to other nodes as its children and its children know its parent, we can implement Button TreeView by using a two way link list as Node. But if we like the same facility and also that of array, then Array List is more preferable.

As Array List is a Collection Object so one Array list Object can contain Array List Collection which is the same as Tree Node. Here Array List is used as Node.

Another important property of Tree level about how it interferes in the user interface is discussed later.

In user interface, each Node looks like controls (like Button, Textbox or other controls) rather than just image and label. So a class is created that inherits Array list and contains button as control.

class ButtonNode :Arraylist
Button NodeButton;

Most of the functionality of Tree Node of .NET is provided in Button Node. MiButton is used here as Node Button which is inherited from Button class.

How does the Button Tree View look like? That’s mainly depending on the level. Root node at 0 level, its child at second level and so on. In user interface how will the tree look that is shown when root and child2 are expanded. We can see here that X location of a node is determined by its level and Y location is determined by its Upper node expanded hierarchy. After the completion of upper node’s expanded hierarchy, the next node is started and all nodes are arranged in such ways that it looks like Figure 2 as shown below:


Figure: User Interface of Tree View

The following shows how child nodes level is set:

public void AddChild(ButtonNode btnNode)


public void SetLevel(ButtonNode btnNode)

foreach(ButtonNode btn in btnNode)

When a child is added to a node, then its level is set according to its parent level.

Class Diagram


Figure : High Level Class Diagram represent tree control structure.

High level class diagram shows the structure of the button tree control and how it is implemented here.

Two Main Functions ( Expand And Collapse)

Every node of Control Tree is a object and contains its own state, position, level, contents, etc.

Now see what happens when a node is expanded:

Let the target node have child nodes. So,

  1. When it is expanded, the child nodes and its successors whose previous status was expanded those nodes and its successors become expanded
  2. The vertical location of those nodes whose location is after the target node but not target nodes children increase as the number of nodes and level expand.
  3. But location of those nodes whose location is before the target node and its predecessors, remain the same as prior to being expanded.

The figures shows the condition before and after the nodes become expanded.


yellow -->targeted node; orange-->expanded node

Figure: The state of Tree before and after a node becomes expanded.

The following code shows how a target node is expanded:

public void ExpandNode(ButtonNode btnNode)
for(int i=0;i<btnNode.Count;i++)
ButtonNode btn=(ButtonNode)btnNode[i];
btn.SetLocation(new Point(XLocation,YLocation));

It expands each node under the target node. and makes its visibility true.

What happens when a node is collapsed?

This is the opposite as the operation of when a node is expanded.

Let the target node have child nodes whose state is expanded:

  1. When the target node is collapsed, then all its child nodes disappear but their status remains the same.
  2. The vertical location of those nodes whose location is after the target node but not target nodes children, decrease as the number of nodes and level collapsed.
  3. But location of those nodes whose location is before the target node and its predecessors, remain the same as before collapse.

The figures show the condition before and after the nodes become collapsed.


yellow -->targeted node; orange-->collapsed node

Figure : The state of Tree before and after a node becomes collapsed.

The following code shows how a node is collapsed:

public void CollapseNode(ButtonNode btnNode)
foreach(ButtonNode btn in btnNode)

It makes the nodes' visibility false.

Now see what visual functionality is provided here that makes it easy for rendering.


Figure : Tree nodes Basic Property

Here two categories are used; one for button tree and another for tree nodes. Tree node property contains button size, node and indicator separations, and indicator images, next node horizontal and vertical separator. Actually these are the basic properties for rendering.

This is so that any control can be provided as tree nodes control and we can control rendering aspects as a whole.


Figure: An Example of Button Tree Control

The following code shows nodes can be added to Button Tree Control.

  1. First create nodes
    ButtonNode btnNode=new ButtonNode();
    ButtonNode btnNode2=new ButtonNode();
  2. Set Hierarchy
    btnNode2.NodeButton.Text="Syed Md. Abul Bashar";
  3. Add Node to the Tree

So if you think that you need combobox not button as node or you think I need both combobox and button as node, that can be done very easily. All the functionality is the same and the only difference is the node control which can be independently implemented here. Many of the other functionality can be defined, but I provide a simple architecture that makes it easy to understand.


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


About the Author

Software Developer
Bangladesh Bangladesh
Email ID:

I am now working as software engineer in Malaysia. I am from Bangladesh and I have completed my B.Sc (Engg.) in CSE from Rajshahi University of Engineering and Technology (RUET).I spend much time in learning latest technology.

My LinkedIn Profile :[^]

My blog :[^]

You may also be interested in...


Comments and Discussions

QuestionButtons properties Pin
jona118-Mar-12 3:26
memberjona118-Mar-12 3:26 
AnswerRe: Buttons properties Pin
Syed BASHAR18-Mar-12 6:18
memberSyed BASHAR18-Mar-12 6:18 
GeneralMy vote of 5 Pin
jona118-Mar-12 3:22
memberjona118-Mar-12 3:22 
QuestionHow to Add UserControl as TreeNode Pin
elahe babaee1-Apr-08 22:24
memberelahe babaee1-Apr-08 22:24 
AnswerRe: How to Add UserControl as TreeNode Pin
milton cse0027-Jun-08 20:49
membermilton cse0027-Jun-08 20:49 
GeneralDownloading problem Pin
vinayskvs31-Oct-07 3:35
membervinayskvs31-Oct-07 3:35 
GeneralRe: Downloading problem Pin
milton cse008-Nov-07 23:55
membermilton cse008-Nov-07 23:55 
GeneralRe: Downloading problem Pin
Qurex29-Dec-07 5:58
memberQurex29-Dec-07 5:58 
GeneralRe: Downloading problem Pin
Member 474015218-Nov-09 20:22
memberMember 474015218-Nov-09 20:22 
GeneralRe: Downloading problem Pin
milton cse0029-Oct-10 6:54
membermilton cse0029-Oct-10 6:54 
QuestionHow can I add lines between the nodes as we see in a treeview Pin
priti arora5-Mar-07 18:46
memberpriti arora5-Mar-07 18:46 
AnswerRe: How can I add lines between the nodes as we see in a treeview Pin
milton cse0013-Jun-07 23:32
membermilton cse0013-Jun-07 23:32 
GeneralNice control Pin
pravat_sagun13-Jan-07 22:40
memberpravat_sagun13-Jan-07 22:40 
GeneralInteresting, but too specific Pin
allex4project4-Jan-07 1:45
memberallex4project4-Jan-07 1:45 
GeneralRe: Interesting, but too specific Pin
pita20004-Jan-07 23:14
memberpita20004-Jan-07 23:14 

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
Web01 | 2.8.170713.1 | Last Updated 29 Oct 2010
Article Copyright 2007 by Syed BASHAR
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid