本教程展示在業(yè)務(wù)流程圖控件FlowChart.NET中如何從XML中加載圖數(shù)據(jù)，以及創(chuàng)建一個對應(yīng)于圖節(jié)點和邊的圖對象。

1、右鍵單擊項目的上下文菜單，選擇添加- >新項目，創(chuàng)建一個新的叫做SampleTree.xml的XML文件，并在下面的窗格中給它添加內(nèi)容：

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、設(shè)置文件的“創(chuàng)建操作”屬性到“內(nèi)容”，以及那設(shè)置“復(fù)制輸出”到“如果更新就復(fù)制”。

3、覆蓋OnLoad方法。

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、添加以下成員到窗口類來保存默認(rèn)節(jié)點大小。

C#

RectangleF nodeBounds = new RectangleF(0, 0, 24, 6);
Visual Basic 
Dim nodeBounds As New RectangleF(0, 0, 24, 6)

5、創(chuàng)建樹的根節(jié)點，并調(diào)用CreateChildren方法構(gòu)建樹遞歸：

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、如下定義CreateChildren，作為父節(jié)點和父XML元素的參數(shù)，迭代子XML元素來構(gòu)建新的層級，通過調(diào)用CreateShapeNode和CreateDiagramLink創(chuàng)建一個相應(yīng)的圖項目。

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、使用TreeLayout布局來安排圖，添加下面的代碼到OnLoad覆蓋。

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、建立并運(yùn)行該項目。如果一切順利，你應(yīng)該看到這種表示的層次結(jié)構(gòu)：