MindFusion.Diagramming for WinForms使用教程：在Xamarin.Forms中创建和排列图

在本教程中，我们演示如何创建示例图并使用LayeredLayout对其进行排列。该图是使用Xamarin流程图库生成的。

MindFusion.Diagramming for WinForms是一个能帮助你创建工作流和进程图表的.NET控件；数据库实体关系图表；组织图表；对象层次和关系图表；图表和树。它是基于对象－图表框，表格和箭头类型，将其归类分派给其他并结合成复杂的结构。该控件提供超过预先定义的50多种图表框，如自定义设计样式和对图表框着色等。MindFusion.Diagramming for WinForms现已加入在线订购，Standard Single Developer版本原价2848现在抢购立享优惠只需2345，立即查看详情>>

MindFusion.Diagramming for WinForms最新试用版

在本教程中，我们演示如何创建示例图并使用LayeredLayout对其进行排列。该图是使用Xamarin流程图库生成的。这是Android手机上最终应用程序的屏幕截图：

我们启动Visual Studio，然后在项目模板的搜索框中键入“ Xamarin.Forms”。在搜索结果中，我们选择“移动应用程序（Xamarin.Forms）”，然后按“下一步”。

然后，为应用程序选择一个名称，然后按“创建”。选择您要定位的平台：iOS，Android和UWP。我们的示例应用程序支持所有这些。

创建新应用程序后，我们将创建一个名为References的新文件夹，并在其中复制项目所需的所有程序集引用。这些是：

• 心灵融合
• 思维融合图
• 思维融合许可

对于主要的通用项目，由平台的所有项目共享。

然后，在Android中，您需要添加对以下内容的引用：

• 心灵融合
• MindFusion.Common.Android
• 思维融合图
• MindFusion.Diagramming.Android

对于iOS项目，您需要参考：

• 心灵融合
• MindFusion.Common.iOS
• 思维融合图
• iOS版MindFusion.Diagramming

对于UWP项目，您需要添加对以下内容的引用：

• 心灵融合
• 思维融合通用
• 思维融合图
• 思维融合，作图，通用

然后，在公共项目的xaml页面中，您需要添加对图形装配的引用：

<ContentPage              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>

我们将映射xmlns：diag添加到MindFusion.Diagramming程序集中的MindFusion.Diagramming命名空间。然后，我们需要声明DiagramView类的实例，然后在XAML中进行操作：

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

二.图初始化

在公共项目中MainPage的代码隐藏文件中，我们声明一个类变量Diagram。我们将其分配给与DiagramView相关的图

图解图;

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

我们将在单击按钮时创建一个图表，因此将按钮控件添加到XAML代码中：

<StackLayoutOrientation="Horizontal"HorizontalOptions="Center"Spacing="5" Padding="5"><ButtonText="Random"BorderColor="Black"BackgroundColor="Silver"Clicked="OnRandomClick"/>

我们将处理按钮的Click事件以生成图形。我们通过一种称为RandomGraph的方法进行此操作。首先，清除图中的所有项目（如果有）：

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

我们使用Factory类的CreateShapeNode方法生成节点，该方法可通过图表的属性访问。

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

节点构造函数将节点的位置和大小及其四个值作为参数：顶部，左侧，宽度和高度。我们不在乎位置，因为我们将使用布局算法自动排列节点。

所述AnchorPattern属性是重要的并且确定所述点，其中链接可以停靠到该节点。我们使用AnchorPattern枚举的值之一。成员TopInBottomOut表示传入链接将通过节点的顶部进入，传出链接将从其底部开始。

最后，我们在节点之间创建随机链接。我们再次使用Factory类，这次是CreateDiagramLink方法。我们选择随机节点并将其作为方法的参数提供：

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)]);           }       }  }

三.安排图

我们选择自动布局的LayeredLayout。像所有其他算法一样，它是Layout名称空间的成员，并通过一个方法应用：ranging方法是Diagram类的成员。用您要应用的布局实例调用它：

layout.Arrange（diagram）;

不同的算法具有不同的选项，可以微调排列的图形。我们将“重新分配锚定”类型应用于图，这意味着链接将被重新分配到算法认为最合适的位置。的NodeDistance和LayerDistance特性允许我们能够控制节点和该曲线图的层之间的间距。许多算法都使用它们。

我们将应用另外两个特定于布局的属性：EnforceLinkFlow和StraightenLongLinks。顾名思义，他们试图使链接遵循一个方向并拉直那些跨层的链接。

至此，我们的教程结束了。

想要购买该产品正版授权请点击【商城购买】，想了解更多产品信息请点击【咨询在线客服】

标签：