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

點(diǎn)擊下載MindFusion.Diagramming for WinForms最新試用版

在本教程中，我們演示如何創(chuàng)建示例圖并使用LayeredLayout對(duì)其進(jìn)行排列。該圖是使用Xamarin流程圖庫(kù)生成的。這是Android手機(jī)上最終應(yīng)用程序的屏幕截圖：

我們啟動(dòng)Visual Studio，然后在項(xiàng)目模板的搜索框中鍵入“ Xamarin.Forms”。在搜索結(jié)果中，我們選擇“移動(dòng)應(yīng)用程序（Xamarin.Forms）”，然后按“下一步”。

• 心靈融合
• 思維融合圖
• 思維融合許可

然后，在Android中，您需要添加對(duì)以下內(nèi)容的引用：

• 心靈融合
• MindFusion.Common.Android
• 思維融合圖
• MindFusion.Diagramming.Android

• 心靈融合
• MindFusion.Common.iOS
• 思維融合圖
• iOS版MindFusion.Diagramming

• 心靈融合
• 思維融合通用
• 思維融合圖
• 思維融合，作圖，通用

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:diag="clr-namespace:MindFusion.Diagramming;assembly=MindFusion.Diagramming"
             mc:Ignorable="d"
             x:Class="LayeredLayout.MainPage"></ContentPage>

> diag：DiagramView x：Name =“ diagramView”
HorizontalOptions =“ FillAndExpand”
VerticalOptions =“ FillAndExpand”>

在公共項(xiàng)目中MainPage的代碼隱藏文件中，我們聲明一個(gè)類變量Diagram。我們將其分配給與DiagramView相關(guān)的圖

Diagram diagram;
public MainPage()
{
InitializeComponent();
diagram = diagramView.Diagram;
...........................
...........................
...........................
}

<StackLayout
Orientation="Horizontal"
HorizontalOptions="Center"
Spacing="5" Padding="5">
<Button
Text="Random"
BorderColor="Black"
BackgroundColor="Silver"
Clicked="OnRandomClick"
/>

  private void RandomGraph()
  {
     diagram.ClearAll();
     ....................
}

ShapeNode node = diagram.Factory.CreateShapeNode(0, 0, 40, 40);
node.AnchorPattern = AnchorPattern.TopInBottomOut;

節(jié)點(diǎn)構(gòu)造函數(shù)將節(jié)點(diǎn)的位置和大小及其四個(gè)值作為參數(shù)：頂部，左側(cè)，寬度和高度。我們不在乎位置，因?yàn)槲覀儗⑹褂貌季炙惴ㄗ詣?dòng)排列節(jié)點(diǎn)。

所述AnchorPattern屬性是重要的并且確定所述點(diǎn)，其中鏈接可以停靠到該節(jié)點(diǎn)。我們使用AnchorPattern枚舉的值之一。成員TopInBottomOut表示傳入鏈接將通過(guò)節(jié)點(diǎn)的頂部進(jìn)入，傳出鏈接將從其底部開始。

private void RandomGraph()
 {
      diagram.ClearAll();

      for (int i = 0; i < 30; ++i)
      {
            int c = diagram.Nodes.Count;
            int g = 2 + random.Next(15);
            for (int j = 0; j < g; ++j)
            {
             ShapeNode node = diagram.Factory.CreateShapeNode(0, 0, 40, 40);
             node.AnchorPattern = AnchorPattern.TopInBottomOut;
               if (j > 0)
                   diagram.Factory.CreateDiagramLink(diagram.Nodes[diagram.Nodes.Count - 2], node);
              }
              if (i > 0)
              {
                  for (int j = 0; j < 1 + random.Next(3); ++j)
                      diagram.Factory.CreateDiagramLink(
                       diagram.Nodes[random.Next(c)],
                       diagram.Nodes[c + random.Next(g)]);
           }
       }
  }

三.安排圖

我們選擇自動(dòng)布局的LayeredLayout。像所有其他算法一樣，它是Layout名稱空間的成員，并通過(guò)一個(gè)方法應(yīng)用：ranging方法是Diagram類的成員。用您要應(yīng)用的布局實(shí)例調(diào)用它：

layout.Arrange（diagram）;

我們將應(yīng)用另外兩個(gè)特定于布局的屬性：EnforceLinkFlow和StraightenLongLinks。顧名思義，他們?cè)噲D使鏈接遵循一個(gè)方向并拉直那些跨層的鏈接。

至此，我們的教程結(jié)束了。