Click here to Skip to main content
Click here to Skip to main content
Go to top

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

Introduction

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.

image002.gif

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:

image004.gif

Figure: User Interface of Tree View

The following shows how child nodes level is set:

public void AddChild(ButtonNode btnNode)
{
btnNode.Parent=this;
btnNode.NodePosition=this.Count;
btnNode.Level=this.Level+1;
SetLevel(btnNode);

this.Add(btnNode);
}

public void SetLevel(ButtonNode btnNode)
{

foreach(ButtonNode btn in btnNode)
{
btn.Level=btnNode.Level+1;
SetLevel(btn);
}
}

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

Class Diagram

image006.gif

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.

image008.gif

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.NodeButton.Visible=true;
if(btn.Count>0)
btn.IndicatorButton.Visible=true;
XLocation=btnNode.RootPanel.XRootLocation+btn.Level*
	(IndicatorButton.Width+this.RootPanel.NodeHorizontalSeparator);
YLocation=YLocation+NodeButton.Height+RootPanel.NodeVerticalSeparator;
btn.SetLocation(new Point(XLocation,YLocation));
if(btn.Expanded==true)
ExpandNode(btn);
ExpandCount+=1;
}
}

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.

image010.gif

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)
{
btn.NodeButton.Visible=false;
btn.IndicatorButton.Visible=false;
ExpandCount+=1;
CollapseNode(btn);
}
}

It makes the nodes' visibility false.

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

image011.png

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.

image013.png

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
    btnNode.AddChild(btnNode2);
    
    btnNode.NodeButton.Text="Milton";
    btnNode2.NodeButton.Text="Syed Md. Abul Bashar";
  3. Add Node to the Tree
    panel1.Add(btnNode);

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.

License

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

Share

About the Author

Syed BASHAR
Software Developer
Bangladesh Bangladesh
Name SYED MD. ABUL BASHAR
Email ID: miltoncse00@gmail.com
 
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 : http://bd.linkedin.com/in/miltoncse00[^]
 
My blog :http://ciintelligence.blogspot.com/[^]

Comments and Discussions

 
QuestionButtons properties Pinmemberjona118-Mar-12 3:26 
AnswerRe: Buttons properties PinmemberSyed BASHAR18-Mar-12 6:18 
GeneralMy vote of 5 Pinmemberjona118-Mar-12 3:22 
QuestionHow to Add UserControl as TreeNode Pinmemberelahe babaee1-Apr-08 22:24 
AnswerRe: How to Add UserControl as TreeNode Pinmembermilton cse0027-Jun-08 20:49 
GeneralDownloading problem Pinmembervinayskvs31-Oct-07 3:35 
GeneralRe: Downloading problem Pinmembermilton cse008-Nov-07 23:55 
GeneralRe: Downloading problem PinmemberQurex29-Dec-07 5:58 
GeneralRe: Downloading problem PinmemberMember 474015218-Nov-09 20:22 
GeneralRe: Downloading problem Pinmembermilton cse0029-Oct-10 6:54 
QuestionHow can I add lines between the nodes as we see in a treeview Pinmemberpriti arora5-Mar-07 18:46 
AnswerRe: How can I add lines between the nodes as we see in a treeview Pinmembermilton cse0013-Jun-07 23:32 
GeneralNice control Pinmemberpravat_sagun13-Jan-07 22:40 
GeneralInteresting, but too specific Pinmemberallex4project4-Jan-07 1:45 
GeneralRe: Interesting, but too specific Pinmemberpita20004-Jan-07 23:14 

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
Web03 | 2.8.140926.1 | Last Updated 29 Oct 2010
Article Copyright 2007 by Syed BASHAR
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid