Title: Draw a family tree in C#

This example shows how to use the generic TreeNode class to draw a family tree. The example Draw a tree with nodes containing pictures in C# draws a picture showing part of the (somewhat outdated) British royal family tree. It works, but it connects parent and child nodes with lines leading from the pictures' centers, and that's not the way family trees are normally drawn.

This example changes the way the TreeNode class draws nodes and their links. The only changes are in the DrawSubtreeLinks method shown in the following code.

// Draw the links for the subtree rooted at this node. private void DrawSubtreeLinks(Graphics gr) { // See if we have 1 child. if (Children.Count == 1) { // Just connect the centers. gr.DrawLine(MyPen, Center, Children[0].Center); } else if (Children.Count > 1) { // Draw a horizontal line above the children. float xmin = Children[0].Center.X; float xmax = Children[Children.Count - 1].Center.X; SizeF my_size = Data.GetSize(gr, MyFont); float y = Center.Y + my_size.Height / 2 + Voffset / 2f; gr.DrawLine(MyPen, xmin, y, xmax, y); // Draw the vertical line from the parent // to the horizontal line. gr.DrawLine(MyPen, Center.X, Center.Y, Center.X, y); // Draw lines from the horizontal line to the children. foreach (TreeNode<T> child in Children) { gr.DrawLine(MyPen, child.Center.X, y, child.Center.X, child.Center.Y); } } // Recursively make the children draw their subtrees. foreach (TreeNode<T> child in Children) { child.DrawSubtreeLinks(gr); } }

This method first checks whether the current node has exactly one child. If it does, the code simply draws a line from this node's center to the child's center.

If the node has more than one child, the method finds the minimum and maximum X coordinates of the centers of the node's children. It calculates a Y coordinate that is half of Voffset below the current node's picture, and then draws a horizontal line there between the minimum and maximum X coordinates.

The method then draws a vertical line from the center of the current node to the horizontal line. It then loops through the current node's children and draws vertical lines between their centers and the horizontal line. The method finishes by recursively calling itself to make the children draw the links in their subtrees.

The rest of the program is the same as before. In particular, the main program still builds and draws the tree as before, relying on the TreeNode class to arrange and draw the links and nodes. The PictureNode class still manages and draws nodes that contain pictures. The only difference is in how the TreeNode class draws the links. That makes the classes easy to reuse.

Download the example to experiment with it and to see additional details.