MindFusion.Diagramming for WinFormsは、ワークフローとプロセス図、データベースエンティティ関係図、組織図、オブジェクト階層と関係図、図とツリーの作成に役立つ.NETコントロールです。これは、オブジェクトのタイプ（チャートボックス、テーブル、矢印）に基づいており、分類されて他のオブジェクトに割り当てられ、複雑な構造に結合されます。このコントロールは、カスタムデザインスタイルやカラーチャートボックスなど、50を超える事前定義されたチャートボックスを提供します。
WinForms用のMindFusion.Diagrammingの最新の試用版をダウンロードするにはクリックしてください
このチュートリアルでは、サンプルグラフを作成し、LayeredLayoutを使用して配置する方法を示します。この図は、Xamarin ProcessGalleryを使用して生成されました。これは、Androidフォンでの最終的なアプリケーションのスクリーンショットです。
I.プロジェクト設定
Visual Studioを起動し、プロジェクトテンプレートの検索ボックスに「Xamarin.Forms」と入力します。検索結果で、「モバイルアプリケーション（Xamarin.Forms）」を選択し、「次へ」をクリックします。
次に、アプリケーションの名前を選択し、「作成」を押します。ターゲットにするプラットフォームを選択します：iOS、Android、UWP。サンプルアプリケーションは、これらすべてをサポートしています。
新しいアプリケーションを作成した後、Referencesという名前の新しいフォルダーを作成し、その中のプロジェクトに必要なすべてのアセンブリ参照をコピーします。これらは
、マインドフュージョン、
マインドフュージョンダイアグラム、
マインドフュージョンライセンスです。
主な一般的なプロジェクトでは、プラットフォーム上のすべてのプロジェクトで共有されます。
次に、Androidでは、以下への参照を追加する必要があります。
マインドフュージョン
MindFusion.Common.Android
マインドフュージョンダイアグラム
MindFusion.Diagramming.AndroidiOS
プロジェクトの場合は、以下を参照する必要があります。
マインドフュージョン
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”>
2.ダイアグラムの初期化
パブリックプロジェクトの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;
ノードコンストラクターは、ノードの位置とサイズ、およびその4つの値をパラメーターとして受け取ります：top、left、幅と高さ。レイアウトアルゴリズムを使用してノードを自動的に配置するため、位置は関係ありません。
AnchorPattern属性は重要であり、リンクがノードにドッキングできるポイントを決定します。AnchorPattern列挙の値の1つを使用します。メンバーTopInBottomOutは、着信リンクがノードの上部から入り、発信リンクが下部から始まることを示します。
最後に、ノード間にランダムなリンクを作成します。今回はCreateDiagramLinkメソッドでFactoryクラスを再度使用します。ランダムノードを選択し、メソッドのパラメーターとして提供します。
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)]);
}
}
}
3.アレンジメント
自動レイアウトのLayeredLayoutを選択します。他のすべてのアルゴリズムと同様に、これはLayout名前空間のメンバーであり、1つのメソッドによって適用されます。rangeingメソッドはDiagramクラスのメンバーです。適用するレイアウトインスタンスで呼び出します。
layout.Arrange（diagram）;
アルゴリズムが異なればオプションも異なり、配置されたグラフィックを微調整できます。「アンカーの再割り当て」タイプをグラフに適用します。これは、アルゴリズムが最も適切であると判断した場所にリンクが再割り当てされることを意味します。NodeDistanceおよびLayerDistance機能を使用すると、ノードとグラフのレイヤーの間の距離を制御できます。多くのアルゴリズムがそれらを使用します。
EnforceLinkFlowとStraightenLongLinksの2つのレイアウト固有の属性を適用します。名前が示すように、彼らはリンクを一方向にたどらせ、それらのクロスレイヤーリンクをまっすぐにしようとします。
この時点で、チュートリアルは終了です。
Xamarinチャート：チャートコンポーネントは、フローチャート、チャート、グラフ、階層、スキームなどを作成、編集、カスタマイズするためのすべてのXamarinアプリケーションの機能の完全なセットを提供します。コントロールのAPIは直感的で使いやすく、グラフの外観と動作のすべての側面を制御できる多くのプロパティを備えています。事前定義されたノードとリンクの豊富なセットから選択できるほか、テーブルノード、複合ノード、さまざまなペンとペンタイプ、およびさまざまなレイアウトアルゴリズムがあります。Xamarinダイアグラムの詳細については、https：//mindfusion.eu/xamarin-diagram.htmlをご覧ください。