在Xamarin.Forms中建立排列图教程

MindFusion.Diagramming for WinForms是一个能帮助你建立工做流和进程图表的.NET控件；数据库实体关系图表；组织图表；对象层次和关系图表；图表和树。它是基于对象－图表框，表格和箭头类型，将其归类分派给其余并结合成复杂的结构。该控件提供超过预先定义的50多种图表框，如自定义设计样式和对图表框着色等。

下载MindFusion.Diagramming for WinForms最新试用版慧都网

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

I.项目设置

咱们启动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="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>
咱们将映射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代码中：
<StackLayout
Orientation="Horizontal"
HorizontalOptions="Center"
Spacing="5" Padding="5">
<Button
Text="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。顾名思义，他们试图使连接遵循一个方向并拉直那些跨层的连接。

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

Xamarin的图表：图表组件为全部Xamarin应用程序提供了完整的功能集，以建立，编辑和自定义流程图，图表，图形，层次结构，方案等。控件的API直观且易于使用，具备许多属性，可以让您控制图表外观和行为的各个方面。您有一组丰富的预约义节点和连接可供选择，还有表节点，复合节点，不一样的画笔和笔类型以及各类布局算法。在https://mindfusion.eu/xamarin-diagram.html上了解有关Xamarin图表的更多信息。

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