Button TreeView Control

Download sourcecode

Demo Application

Button Tree View User Control

Tree View 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

Tree View control is mostly used for folder tree where need hierarchy. But TreeView doesn’t support controls like (Button, Combobox, Data Grid ) as Nodes.

As each node can link to other nodes as its children and its children know its parent so we can implement Button TreeView by using 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 same as Tree Node. Here Array List is used as Node.

Another important property of Tree is level how it interfere in 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 contain 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 Button Tree View looks like? That’s mainly depending on level. Root node at 0 level, its child at second level and so on. In user interface how tree will looks that is shown when root and child2 is 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 next node is started and all nodes are arranged in such ways that it looks like Figure 2 as shown bellow.

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:

Figure : High Level Class Diagram represent tree control structure.

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

Two Main Function ( Expand And Collapse):

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

Now see what happen when a node is expanded:

Let that the target node has 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 expanded.
3. But location of those nodes whose location is before the target node and its predecessors, remain same as before expanded.

The figures show 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.

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;
}

}

its expanding each nodes under target node. and making its visibility true.

What happens when a node is collapsed?

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

Let that the target node has child nodes whose state is expanded:

1. When the target node is collapse then all its child nodes become disappear but their status remains 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 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.

following code shows how a node is colloapsed

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

btn.NodeButton.Visible=false;
btn.IndicatorButton.Visible=false;
ExpandCount+=1;
CollapseNode(btn);

}
}

its making nodes visibility false.

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

Figure : Tree nodes Basic Property

Here two categories is 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 property for rendering.

So that any control can be provided as tree nodes control and we can control rendering aspects as 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 Heirarchy

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 same and only difference is there is node control which can be independently implemented here. Many of other functionality can be define a but I provide a simple architecture that make it easy to make out.