バージョン

レイアウトの構成 (xamDiagram)

トピックの概要

目的

このトピックでは、 xamDiagram™ のレイアウトを構成する方法、およびカスタム レイアウトのスキームを作成する方法を説明します。

前提条件

このトピックを理解するために、以下のトピックを参照することをお勧めします。

トピック 目的

このトピックでは、 xamDiagram コントロールおよびその主要機能の概念的な概要を説明します。

このトピックでは、 xamDiagram コントロールを WPF アプリケーションに追加する方法を説明します。

概要

ダイアグラムのレイアウト構成の概要

xamDiagram のノードを配置するには、 DiagramNode.Position プロパティを設定する、および XamDiagram.Layout プロパティを設定する 2 つの方法があります。現在、3 つの定義済みレイアウト ForceDirectedGraphDiagramLayoutTreeDiagramLayout 、 GridDiagramLayout が使用できます。カスタム レイアウトは、 IDiagramLayout インターフェイスを実装すると使用できます。IDiagramLayout インターフェイスには、単一の IEnumerable<DiagramNode> パラメーターを取得する単一の ArrangeNodes メソッドがあります。このメソッドでは、指定されたノードの Position プロパティを目的のレイアウト スキームに応じて設定する必要があります。

Note
注:

ダイアグラムにレイアウトが適用されるのは、最初の 1 回のみです。後で項目を追加 / 削除した場合、レイアウトは自動的に適用されません。ノードを後で再配置するには、 RefreshLayout メソッドを呼び出します。

ダイアグラムのレイアウト構成の概要表

以下の表は、 xamDiagram レイアウトの構成可能な要素を簡単に説明し、それらを構成する API にマップします。

目的: 使用する API メンバー: 操作:

レイアウトの適用

TreeDiagramLayout クラスのインスタンス、 ForceDirectedGraphDiagramLayout クラスまたは IDiagramLayout インターフェイスを実装するクラスのインスタンスに設定します

カスタム レイアウトの作成

このインターフェイスを実装するクラスを作成します

レイアウトの適用

概要

xamDiagram のレイアウトを設定するには、提供された ForceDirectedGraphDiagramLayoutTreeDiagramLayout または GridDiagramLayout クラス、またはカスタムの IDiagramLayout の実装に Layout プロパティを設定します。

プロパティ設定

以下の表は、任意の構成とそれを管理するプロパティ設定のマッピングを示します。

設定の目的: 使用するプロパティ: 設定値:

ダイアグラム ノードのレイアウト

IDiagramLayout インターフェイスを実装するクラスのインスタンス。

以下のスクリーンショットは、 Layout プロパティが ForceDirectedGraphDiagramLayout インスタンスに設定されると、 xamDiagram がどのように表示されるかを示しています。

xamDiagram Configuring The Layout 1.png

以下のコードを、ForceDirectedGraphDiagramLayout に適用します。

XAML の場合:

<ig:XamDiagram>
    <ig:XamDiagram.Layout>
        <ig:ForceDirectedGraphDiagramLayout />
    </ig:XamDiagram.Layout>
    …
</ig:XamDiagram>

カスタム レイアウトの作成

概要

以下の手順では、右下方向にダイアグラムのノードを順次配置するカスタム レイアウトの作成方法を説明します。

プレビュー

以下のスクリーンショットは結果のプレビューです。

xamDiagram Configuring The Layout 2.png

前提条件

この手順を実行するには、以下が必要です。

手順

以下の手順は、カスタムの対角線のレイアウトを作成する方法を示します。

1.IDiagramLayout インターフェイスの実装

IDiagramLayout インターフェイスを実装するクラスを作成します。

IDiagramLayout インターフェイスを実装する新しい DiagonalLayout クラスを作成します。ArrangeNodes メソッドでノードを繰り返し、各ノードの Position を、前のノードの Bounds 長方形の右下隅に設定します。 この例では、ノード間のスペースを制御する Offset プロパティを追加しています。実装の詳細は、全コードを参照してください。

2.対角線のレイアウトの適用

対角線のレイアウトを適用するには、DiagonalLayout クラスのインスタンスを設定します。

全コード

以下は、この手順の完全なコードです。

C# の場合:

namespace XamDiagramSample
{
    public class DiagonalLayout : IDiagramLayout
    {
        public double Offset { get; set; }
        public void ArrangeNodes(IEnumerable<DiagramNode> nodes)
        {
            Point nextPoint = new Point(0,0);
            foreach (DiagramNode node in nodes)
            {
                node.Position = nextPoint;
                nextPoint = new Point(node.Bounds.Right + Offset, node.Bounds.Bottom + Offset);
            }
        }
    }
}

Visual Basic の場合:

Namespace XamDiagramSample
    Public Class DiagonalLayout
        Implements IDiagramLayout
        Public Property Offset As Double
        Public Sub ArrangeNodes(nodes As IEnumerable(Of DiagramNode)) Implements IDiagramLayout.ArrangeNodes
            Dim nextPoint As New Point(0, 0)
            For Each node As DiagramNode In nodes
                node.Position = nextPoint
                nextPoint = New Point(node.Bounds.Right + Offset, node.Bounds.Bottom + Offset)
            Next
        End Sub
    End Class
End Namespace

XAML の場合:

<ig:XamDiagram x:Name="Diagram"
        xmlns:local="clr-namespace:XamDiagramSample">
    <ig:XamDiagram.Layout>
        <local:DiagonalLayout Offset="10"/>
    </ig:XamDiagram.Layout>
    <ig:DiagramNode Content="1"/>
    <ig:DiagramNode Content="2"/>
    <ig:DiagramNode Content="3"/>
    <ig:DiagramNode Content="4"/>
</ig:XamDiagram>

関連コンテンツ

トピック

以下のトピックでは、このトピックに関連する追加情報を提供しています。

トピック 目的

このトピックでは、 xamDiagram コントロールのダイアグラムの各ノードのサイズと位置を制御する方法を説明します。