Button TreeView Control

• Download source code - 15.6 KB
• Demo application - 41.73 KB

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.

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:

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

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

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.

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

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.

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.

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.