How to Use GDI to draw a tree chart in C # (non-Treeview)

As a result of the project requirements, You need to draw a tree chart and search for it on the Internet, and find that there are few materials in this area. No way, you can do it yourself. The following is a simple implementation of a layer-3 instance. The following is the final result:

 

The first thing to note is that the tree chart is drawn under the pictureBox control and the code is written under the painting event.

The first step is to define the content of each node, the number of nodes, and other initial information. Here we simply assign values directly. In most cases, the content of the node should be read from the database. In this case, you only need to modify the code of this part.

[Csharp]
String parentTree = "China ";
ArrayList midTree = new ArrayList ();
MidTree. Add ("Jiangsu Province ");
MidTree. Add ("Shandong Province ");
Int midTreeCount = midTree. Count;
ArrayList subTree = new ArrayList ();
SubTree. Add ("Nanjing ");
SubTree. Add ("Yangzhou ");
SubTree. Add ("Suzhou City ");
SubTree. Add ("Qingdao ");
SubTree. Add ("Rizhao City ");
Int subTreeCount = subTree. Count;
ArrayList eachSubTreeCount = new ArrayList ();
EachSubTreeCount. Add (3 );
EachSubTreeCount. Add (2 );

Define the initial variables required for drawing

[Csharp]
Int midCountFlag = 0; // offset used to draw the intermediate knot
Int subCountFlag = 0; // offset used to draw the top-level knots
Int x = 0; // The X coordinate in the upper left corner of the node rectangle graph.
Int y = 0; // Y coordinate in the upper left corner of the rectangle Graph
Int picX = pictureBox1.Width; // horizontal length of the drawing Area
Int picY = pictureBox1.Height; // The vertical length of the drawing area.
StringFormat sf = new StringFormat ();
Sf. Alignment = StringAlignment. Center;
Rectangle rect; // The Rectangle of the knots.
Point loc; // coordinate of the upper-left corner of the node rectangle Graph
Point startP; // start coordinate of the connection line
Point endP; // coordinates of the end of the connection line
Point tempP = new Point (); // coordinate cache volume
SizeF sizeF; // size of the node content
Size s;
Font font = new Font ("", 18); // Font of the node content
Pen redPen = new Pen (Color. Red, 2); // the paint brush required for connecting
Graphics g = e. Graphics;
G. Clear (Color. White); // Clear the drawing area first

OK. Now we can start painting. First, draw the root.

[Csharp]
# Region
SizeF = g. MeasureString (parentTree, font );
SizeF. Width + = 10;
S = sizeF. ToSize ();
 
X = Convert. ToInt32 (picX-sizeF. Width)/2 );
Y = 30;
StartP = new Point (picX/2, y + s. Height );
Loc = new Point (x, y );
 
Rect = new Rectangle (loc, s );
G. DrawRectangle (Pens. Black, rect );
G. DrawString (parentTree, font, Brushes. Black, rect, sf );
# Endregion

Then draw out the subtree of the root.

[Csharp]
# Region painting subtree
Foreach (object o in midTree)
{
Int picXMid = picX/midTreeCount;
 
String strMidTree = o. ToString ();
SizeF = g. MeasureString (strMidTree, font );
SizeF. Width + = 10;
S = sizeF. ToSize ();
 
X = Convert. ToInt32 (picXMid-sizeF. Width)/2 + picXMid * midCountFlag );
Y = 230;
EndP = new Point (picXMid/2 + picXMid * midCountFlag, y );
Loc = new Point (x, y );
 
Rect = new Rectangle (loc, s );
G. DrawRectangle (Pens. Black, rect );
G. DrawString (strMidTree, font, Brushes. Black, rect, sf );
G. DrawLine (redPen, startP, endP );
 
MidCountFlag ++;
If (midCountFlag = 1)
TempP = new Point (endP. X, endP. Y + s. Height );
}
# Endregion
Draw the branches of the subtree.

[Csharp]
# Region draw the branches of the subtree
 
StartP = tempP;
 
For (int I = 0; I! = MidTree. Count; ++ I)
{
Int picXMid = picX/midTreeCount;
StartP. X + = picXMid * I;
If (I> = 1)
SubCountFlag + = (int) eachSubTreeCount [I-1];
For (int j = 0; j! = (Int) eachSubTreeCount [I]; ++ j)
{
 
Int picXSub = picX/(midTreeCount * (int) eachSubTreeCount [I]);
 
String strSubTree = subTree [j + subCountFlag]. ToString ();
SizeF = g. MeasureString (strSubTree, font );
SizeF. Width + = 10;
S = sizeF. ToSize ();
 
X = Convert. ToInt32 (picXSub-sizeF. Width)/2 + picXSub * j) + picXMid * I );
Y = 430;
EndP = new Point (picXSub/2 + picXSub * j + picXMid * I, y );
Loc = new Point (x, y );
 
Rect = new Rectangle (loc, s );
G. DrawRectangle (Pens. Black, rect );
G. DrawString (strSubTree, font, Brushes. Black, rect, sf );
G. DrawLine (redPen, startP, endP );
}
}
# Endregion