Tutorial 2: Loading hierarchical data

This tutorial shows how to load graph data from XML and create diagram objects corresponding to the graph nodes and edges.

1. Right-click the project in Solution Explorer and choose Add -> New Item from the context menu. Create a new XML file called SampleTree.xml and add to it content in the following form:

XML

<?xml version="1.0" encoding="utf-8" ?> 
<Project>
    <Activity Name="Activity 1">
        <Activity  Name="sub-activity 1">
            <Activity  Name="sub-activity 1-1" />
            <Activity  Name="sub-activity 1-2" />
        </Activity>
        <Activity  Name="sub-activity 2">
            <Activity  Name="sub-activity 2-1" />
            <Activity  Name="sub-activity 2-2" />
            <Activity  Name="sub-activity 2-3" />
        </Activity>
        <Activity  Name="sub-activity 3">
            <Activity  Name="sub-activity 3-1" />
            <Activity  Name="sub-activity 3-2" />
        </Activity>
    </Activity>
    <Activity Name="Activity 2">
        <Activity  Name="sub-activity 1">
            <Activity  Name="sub-activity 1-1" />
            <Activity  Name="sub-activity 1-2" />
            <Activity  Name="sub-activity 1-3" />
        </Activity>
        <Activity  Name="sub-activity 2">
            <Activity  Name="sub-activity 2-1" />
            <Activity  Name="sub-activity 2-2" />
        </Activity>
    </Activity>
    <Activity Name="Activity 3">
        <Activity  Name="sub-activity 1">
            <Activity  Name="sub-activity 1-1" />
            <Activity  Name="sub-activity 1-2" />
            <Activity  Name="sub-activity 1-3" />
            <Activity  Name="sub-activity 1-4" />
        </Activity>
        <Activity  Name="sub-activity 2" />
        <Activity  Name="sub-activity 3">
            <Activity  Name="sub-activity 3-1" />
            <Activity  Name="sub-activity 3-2" />
        </Activity>
    </Activity>
</Project>

2. Set the file's "Build Action" property to "Content" and "Copy to Output Directory" to "Copy if newer".

3. Override the OnLoad method of the form:

C#

protected override void OnLoad(EventArgs e)
{
    base.OnLoad(e);
}

Visual Basic

Protected Overrides Sub OnLoad(ByVal e As EventArgs)

    MyBase.OnLoad(e)

End Sub

4. Add the following member to the window class to hold the default node size.

C#

RectangleF nodeBounds = new RectangleF(0, 0, 24, 6);

Visual Basic

Dim nodeBounds As New RectangleF(0, 0, 24, 6)

5. Create the tree root node, and call the CreateChildren method, which builds the tree recursively.

C#

ShapeNode root = diagram.Factory.CreateShapeNode(nodeBounds);
root.Text = "Project";
XmlDocument document = new XmlDocument();
document.Load("SampleTree.xml");
CreateChildren(root, document.SelectSingleNode("Project"));

Visual Basic

Dim root As ShapeNode = diagram.Factory.CreateShapeNode(nodeBounds)
root.Text = "Project"
Dim document As New XmlDocument()
document.Load("SampleTree.xml")
CreateChildren(root, document.SelectSingleNode("Project"))

6. Define CreateChildren as follows. It takes as parameters the parent DiagramNode and parent XML element, iterates the child XML elements to build the next level of the hierarchy, and creates corresponding diagram items by calling CreateShapeNode and CreateDiagramLink.

C#

private void CreateChildren(DiagramNode parentDiagNode, XmlNode parentXmlNode)
{
    foreach (XmlElement element in parentXmlNode.SelectNodes("Activity"))
    {
        ShapeNode node = diagram.Factory.CreateShapeNode(nodeBounds);
        node.Text = element.GetAttribute("Name");
        diagram.Factory.CreateDiagramLink(parentDiagNode, node);
        CreateChildren(node, element);
    }
}

Visual Basic

Private Sub CreateChildren(ByVal parentDiagNode As DiagramNode, ByVal parentXmlNode As XmlNode)

    For Each element As XmlElement In parentXmlNode.SelectNodes("Activity")

        Dim node As ShapeNode = diagram.Factory.CreateShapeNode(nodeBounds)
        node.Text = element.GetAttribute("Name")
        diagram.Factory.CreateDiagramLink(parentDiagNode, node)
        CreateChildren(node, element)

    Next

End Sub

7. Use TreeLayout to arrange the diagram. Add the following code to the end of the OnLoad override.

C#

TreeLayout layout = new TreeLayout();
layout.Type = TreeLayoutType.Cascading;
layout.Direction = TreeLayoutDirections.LeftToRight;
layout.LinkStyle = TreeLayoutLinkType.Cascading2;
layout.NodeDistance = 3;
layout.LevelDistance = -8; // let horizontal positions overlap
layout.Arrange(diagram);

Visual Basic

Dim layout As New TreeLayout()
layout.Type = TreeLayoutType.Cascading
layout.Direction = TreeLayoutDirections.LeftToRight
layout.LinkStyle = TreeLayoutLinkType.Cascading2
layout.NodeDistance = 3
layout.LevelDistance = -8
' let horizontal positions overlap
layout.Arrange(diagram)

8. Build and run the project. If everything is fine, you should see this representation of the hierarchy: