This tutorial explains how you can create a random tree of class shapes using Netron 3. The layout algorithm organizes the tree in a nice classical tree diagram. You can easily modify the code to change the layout to any of the layouts includes in the library.

You can download the code of this tutorial and if you have a developer’s license you can get much more from the Netron Trac dev site.

Create a standard WinForm project in Visual Studio and add a reference to Netron.Diagramming.Core and Netron.Diagramming.Win.

If you do not have the diagram control yet in your VS toolbox, browse to the Netron.Diagramming.Win assembly and add it to the toolbox. Two items will be added, one of which is the diagramming control. When you add it you will get a stack exception, this is a bug in the (unfinished) release of Netron 3. Simply close the form and re-open it and you will see something like below.

In the form’s code override the onload method and add in the usings

1
2

using Netron.Diagramming.Core;
using Netron.Diagramming.Core.Analysis;

In order to build up a tree we need to place a root node. Add the following code to the form:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
labels = new Dictionary();
AddRoot();
}
 
private void AddRoot()
{
ClassShape shape = new ClassShape();
shape.Text = "Root";
Random rnd = new Random();
shape.Transform(rnd.Next(10, this.Width - 30), rnd.Next(10, this.Height - 30), shape.Width, shape.Height);
this.diagramControl1.AddShape(shape);
labels.Add(0, shape);
this.diagramControl1.SetLayoutRoot(shape);
}

Next, we need to build up the tree. You can experiment with different methods and values, in the code below we randomly add nodes to existing ones making sure that the tree is balanced and does not grow in one particular direction:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

 
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
labels = new Dictionary();
AddRoot();
for (int i = 0; i < 30; i++)
{
this.AddTreeNode();
}
 
}
 
private void AddTreeNode()
{
counter++;
 
ClassShape shape = new ClassShape();
shape.Text = "Shape " + counter;
int s1;
shape.Transform(rnd.Next(10, this.Width - 30), rnd.Next(10, this.Height - 30), shape.Width, shape.Height);
this.diagramControl1.AddShape(shape);
labels.Add(counter, shape);
s1 = rnd.Next(0, counter - 1);
 
while (labels[s1].Connectors[0].AttachedConnectors.Count >= rnd.Next(1, 9) && s1 < = counter - 5)
{
s1 = rnd.Next(0, counter - 1);
}
this.diagramControl1.AddConnection(labels[s1].Connectors[0], shape.Connectors[0]);
 
}

Now, the final step. Simply add the following line to let the library process the node and activate the layout algorithm:

1
2
3
4
5
6
7
8

this.diagramControl1.RunActivity("Standard TreeLayout");
this.diagramControl1.Invalidate(); 
 
//this.diagramControl1.RunActivity("Radial TreeLayout");
//this.diagramControl1.RunActivity("Standard TreeLayout");
//this.diagramControl1.RunActivity("FruchtermanReingold Layout");
//this.diagramControl1.RunActivity("Balloon TreeLayout");
//this.diagramControl1.RunActivity("ForceDirected Layout");

The additional Invalidate() is not strictly necessary but it makes sure the whole canvas is rendered again after layout. The other possibilities are listed as well and it’s great fun to play with them. Also, for each layout algorithm you have different parameters and possibilities. For example, in the screenshot below the following was set in code:

1

Netron.Diagramming.Core.Layout.LayoutSettings.TreeLayout.TreeOrientation = TreeOrientation.BottomTop;

Other parameters can be discovered and adjusted in the same fashion:

1
2

Netron.Diagramming.Core.Layout.LayoutSettings.TreeLayout.BreadthSpacing = 160;
Netron.Diagramming.Core.Layout.LayoutSettings.TreeLayout.DepthSpacing = 160;

Finally, you will notice that sometimes the root of the tree is not properly centered in the view. You can change the origin of the diagram in the following way:

1
2
3
4

Point p = new Point(
-500,-800
);
this.diagramControl1.Origin = p;

Hope this little tutorial helps to explore the library and its many features.