MindFusion.Diagramming for WinForms是一個能幫助你創(chuàng)建工作流和進程圖表的.NET控件；數(shù)據(jù)庫實體關(guān)系圖表；組織圖表；對象層次和關(guān)系圖表；圖表和樹。它是基于對象－圖表框，表格和箭頭類型，將其歸類分派給其他并結(jié)合成復(fù)雜的結(jié)構(gòu)。該控件提供超過預(yù)先定義的50多種圖表框，如自定義設(shè)計樣式和對圖表框著色等。MindFusion.Diagramming for WinForms現(xiàn)已加入在線訂購，現(xiàn)在搶購立享優(yōu)惠，查看詳情>>

點擊下載MindFusion.Diagramming for WinForms最新試用版

本教程說明如何從XML加載圖形數(shù)據(jù)并創(chuàng)建與圖形節(jié)點和邊相對應(yīng)的圖形對象。

1、在解決方案資源管理器中右鍵單擊該項目，然后從上下文菜單中選擇“添加”->“新建項”。創(chuàng)建一個名為SampleGraph.xml的新XML文件，并以以下形式添加內(nèi)容：

XML格式

<?xml version="1.0" encoding="utf-8" ?>
<Graph>
    <Nodes>
        <Node id="0" name="start" />
        <Node id="1" name="activity 1" />
        <Node id="2" name="task 1" />
        <Node id="3" name="task 2" />
        <Node id="4" name="activity 2" />
        <Node id="5" name="task 3" />
        <Node id="6" name="task 4" />
        <Node id="7" name="activity 3" />
        <Node id="8" name="task 5" />
        <Node id="9" name="task 6" />
        <Node id="10" name="end" />
    </Nodes>
    <Links>
        <Link origin="0" target="1" />
        <Link origin="1" target="2" />
        <Link origin="1" target="3" />
        <Link origin="2" target="4" />
        <Link origin="3" target="4" />
        <Link origin="4" target="5" />
        <Link origin="4" target="6" />
        <Link origin="5" target="10" />
        <Link origin="6" target="10" />
        <Link origin="0" target="7" />
        <Link origin="7" target="8" />
        <Link origin="8" target="9" />
        <Link origin="1" target="9" />
        <Link origin="9" target="10" />
    </Links>
</Graph>

2、將文件的“生成操作”屬性設(shè)置為“內(nèi)容”，將“復(fù)制到輸出目錄”設(shè)置為“如果更新則復(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、將以下變量添加到Loaded處理程序?！皀odeMap”將圖節(jié)點映射到其標(biāo)識符，“bounds”包含默認(rèn)的節(jié)點大小。

C＃

Dictionary<string, DiagramNode> nodeMap = new Dictionary<string, DiagramNode>();
RectangleF bounds = new RectangleF(0, 0, 18, 6);

Visual Basic

Dim nodeMap As New Dictionary(Of String, DiagramNode)()
Dim bounds As New RectangleF(0, 0, 18, 6)

5、使用XML DOM API加載XML文檔：

C＃

// Load the graph xml
XmlDocument document = new XmlDocument();
document.Load("SampleGraph.xml");

Visual Basic

' Load the graph xml
Dim document As New XmlDocument()
document.Load("SampleGraph.xml")

6、通過調(diào)用Factory類的CreateShapeNode方法，加載圖形節(jié)點元素并創(chuàng)建其對應(yīng)的ShapeNode對象。CreateShapeNode只是使用“new”運算符創(chuàng)建ShapeNode實例并將其添加到圖的Nodes集合的快捷方式。此外，此代碼將新節(jié)點映射到XML元素的“id”屬性，并將節(jié)點的Text設(shè)置為“name”屬性的值。

C＃

// Load node data
XmlNodeList nodes = document.SelectNodes("/Graph/Nodes/Node");
foreach (XmlElement node in nodes)
{
    ShapeNode diagramNode = diagram.Factory.CreateShapeNode(bounds);
    nodeMap[node.GetAttribute("id")] = diagramNode;
    diagramNode.Text = node.GetAttribute("name");
}

Visual Basic

' Load node data
Dim nodes As XmlNodeList = document.SelectNodes("/Graph/Nodes/Node")
For Each node As XmlElement In nodes

    Dim diagramNode As ShapeNode = diagram.Factory.CreateShapeNode(bounds)
    nodeMap(node.GetAttribute("id")) = diagramNode
    diagramNode.Text = node.GetAttribute("name")

Next

7、加載圖形鏈接并創(chuàng)建相應(yīng)的DiagramLink對象。鏈接的起點和終點通過“nodeMap”字典按其ID訪問。

C＃

// Load link data
XmlNodeList links = document.SelectNodes("/Graph/Links/Link");
foreach (XmlElement link in links)
{
    diagram.Factory.CreateDiagramLink(
        nodeMap[link.GetAttribute("origin")],
        nodeMap[link.GetAttribute("target")]);
}

Visual Basic

' Load link data
Dim links As XmlNodeList = document.SelectNodes("/Graph/Links/Link")
For Each link As XmlElement In links
    diagram.Factory.CreateDiagramLink(nodeMap(link.GetAttribute("origin")), nodeMap(link.GetAttribute("target")))
Next

8、使用LayeredLayout類安排圖。

C＃

// Arrange the graph
LayeredLayout layout = new LayeredLayout();
layout.LayerDistance = 12;
layout.Arrange(diagram);

Visual Basic

' Arrange the graph
Dim layout As New LayeredLayout()
layout.LayerDistance = 12
layout.Arrange(diagram)

生成并運行項目。如果一切正常，您應(yīng)該看到該圖的表示形式：