Draw a family tree in C#


[family tree]

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 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 Example   Follow me on Twitter   RSS feed   Donate




About RodStephens

Rod Stephens is a software consultant and author who has written more than 30 books and 250 magazine articles covering C#, Visual Basic, Visual Basic for Applications, Delphi, and Java.
This entry was posted in classes, generic, OOP and tagged , , , , , , , , , , , , , , , , . Bookmark the permalink.

12 Responses to Draw a family tree in C#

  1. Pedro says:

    Hey, great stuff! It helped me understand some things, since i’m trying to embed something identical in my aplication.

    Regarding your example, imagine I wanted to include “Diana, Princess of Wales” as Prince Charles wife (yes I know they got divorced) and mother of Prince William and Prince Henry, how could I accomplished that? I tried one or two different things, but without any success.

    • RodStephens says:

      Excellent question! This example is really just showing how the generic TreeNode class works. Unfortunately a family “tree” like the one you want isn’t really a tree because child nodes have multiple parents and in a mathematical tree a child can have only one parent.

      For example, in the tree I built I cheated and put Queen Elizabeth and Price Phillip in the same node. You could do that with Charles and Di.

      To really do it right, you would need to use a network instead of a tree. Each node would have links to other nodes that are not always child nodes. You would probably want to have link types so you could tell if a link leads to a parent, divorced spouse, deceased spouse, and so forth.

      Arranging the network would also be a but tricky. The easiest thing would be to make the user position the nodes. Although there is some structure to family trees (for example, you can probably line generations up, more or less), so you could probably come up with an algorithm to draw the tree reasonably well.

      It would all be a fair amount of work, though.

  2. OLWAN says:

    Hello
    I used this project to learn OOP, Thank you very much.
    But I have question:
    I create grand family(about 200 members), the final form show part of family, Although I modified Size of picTree, but i see just right side of the tree family.
    how can increase the width of graphic?

  3. Pingback: Draw a scrolling family tree in C# - C# HelperC# Helper

  4. Maryam kamal says:

    how i can show the persons name just click on the picture ,please give me code of C# with in two three line.

  5. amit says:

    sir i am student of sociology so i am not much familiar with c# or programming. If you have full project with tutorial then please share if possible. thank you

    • RodStephens says:

      This site doesn’t have many complete tutorials. It’s mostly examples showing specific techniques. Some are advanced and some are for beginners.

      You might want to look into a beginner book such as my book C# 24-Hour Trainer. It starts from scratch and provides an easy introduction for people who haven’t programmed before.

Leave a Reply

Your email address will not be published. Required fields are marked *