バージョン

ダイアグラム接続の開始および終了の構成 (xamDiagram)

トピックの概要

目的

このトピックでは、 xamDiagram™ でダイアグラム接続の始点および終点を構成する場合に使用する 2 つの方法について説明します。1 つは、接続先のノードを指定し、もう 1 つは、ダイアグラムのスペースに接続の始点と終点の座標を指定します。

前提条件

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

トピック 目的

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

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

概要

ダイアグラム スペースの座標系

ダイアグラム項目 (ノードまたは接続) の位置は、ダイアグラムの座標系に対して相対的に決定されます。この座標系では左上隅を原点 (0、0) とします。座標値は、原点からのオフセット (単位はピクセル) を表します。最初の数値は垂直方向のオフセット、2 番目の数値は垂直方向のオフセットを表します。 ノードの座標値は左上隅の位置を表します。接続の場合の座標は、接続の始点と終点の個別のプロパティで管理、またはスナップ ポイントの位置によって決定されます。 以下の画像は、ダイアグラムの座標系と座標 (100, 100) にあるノードを示します。

xamDiagram Configuring the Position and Size of Diagram Nodes 1.png

接続の始点および終点の構成の概要

xamDiagram コントロールでダイアグラム接続の始点および終点は、以下の 2 つの方法で構成されます。

  • 相対 - 接続するノード、すなわち開始ノードと終了ノードを指定します。

この方法を使用する場合は、接続を開始ノードと終了ノードに関連付ける必要があります。この方法では、接続の始点と終点がこれらのノードによって制御され、ノードが移動すると自動的に接続が調整されます。 * 絶対 - ダイアグラム上の接続の始点および終点の座標を指定します。

接続の一端にノードを指定し、もう一端に座標を指定する方法もあります

構成は、接続プロパティを介して前述のどちらかの方法で管理します。いずれの方法も、異なるプロパティのセットを使用します (接続の始点および終点の構成の概要表を参照)。以前の設定は最新のプロパティ構成でオーバーライドされます。

接続の始点および終点の構成の概要表

以下の表は、ダイアグラムの接続の開始および終了に関連する構成可能な要素を簡単に説明し、それらを構成するプロパティにマップします。

構成アプローチ 詳細 プロパティ

接続の始点および終点を、開始ノードと終了ノードを指定して構成します。

接続の始点および終点を、ダイアグラムのスペース上の始点と終点の座標を指定することで、接続の始点と終点を構成します。

接続の始点および終点の相対位置による構成 (開始ノードと終了ノードの指定)

概要

接続のいずれかの終点を DiagramNode に関連付けると、終点はノードの位置に関連して配置されます。接続をノードに関連付けるには、その StartNodeKey / EndNodeKey プロパティをターゲット ノードの DiagramNode.Key プロパティに設定された値に設定、またはその StartNode / EndNode プロパティをターゲット ノードに設定します。

接続端のノードの指定に加え、ノードの ConnectionPoints コレクションの特定の DiagramConnectionPoint を、 StartNodeConnectionPointName および EndNodeConnectionPointName プロパティで接続に割り当てることができます。

接続ロジックは、接続対象のノードに対して指定された接続ポイントが存在するかどうかに基づきます。以下に接続ロジックを示します。

1. ノードに接続ポイントが存在し、そのいずれかが接続に対して明示的に選択されている場合は、その接続ポイントを使用します。

2. ノードに接続ポイントが存在し、そのいずれに対しても特定の接続ポイントが設定されいない場合は、最も近いポイントを使用します。

3. 接続ポイントがない場合は、境界四角形のいずれかの辺の中央を使用します。

ノードに対する接続ポイントの構成の詳細は、 ダイアグラム ノードの接続ポイントの構成を参照してください。

プロパティ設定

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

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

接続の終点とノードの関連付け

ターゲット ノードの名前

対象とする DiagramNode

接続の終点とノードの特定の接続ポイントの関連付け

以下のスクリーンショットは、以下の設定の結果、 xamDiagram の接続がどのように表示されるかを示しています。

プロパティ

Node1

Node2

Right

xamDiagram Configuring the Start and End of Diagram Connections 1.png

以下のコードはこの例を実装します。

XAML の場合:

<ig:XamDiagram x:Name="Diagram">
      <ig:DiagramConnection StartNodeKey="Node1" EndNodeKey="Node2" EndNodeConnectionPointName="Right"/>
      <ig:DiagramNode Name="Node1"/>
      <ig:DiagramNode Name="Node2" Position="200,200"/>
</ig:XamDiagram>

接続の始点および終点の絶対位置による構成 (始点と終点の座標の指定)

概要

スタンドアロンの接続を表示するには、始点と終点の座標を指定します。接続の始点または終点を設定すると、各ターゲット ノード (存在する場合) からの接続が切断されます。同様に開始ノードと終了ノードを設定すると、絶対ポイントの構成がオーバーライドされます。

プロパティ設定

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

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

接続の開始 / 終了ポイントを絶対位置として設定

目的のポイントの座標 (ピクセル数)

以下のスクリーンショットは、以下の設定の結果、ダイアグラムの接続がどのように表示されるかを示します。

プロパティ

20,20

200,200

xamDiagram Configuring the Start and End of Diagram Connections 2.png

以下のコードはこの例を実装します。

XAML の場合:

<ig:XamDiagram x:Name="Diagram">
      <ig:DiagramConnection StartPosition="20,20" EndPosition="200,200" />
</ig:XamDiagram>

関連コンテンツ

トピック

このトピックの追加情報については、以下のトピックも合わせてご参照ください。

トピック 目的

このトピックでは、 xamDiagram コントロールでダイアグラム ノードの接続ポイントを構成する方法を説明します。これは、カスタム ノードを使用する場合や、標準ノードの事前設定された接続ポイントをカスタマイズする場合に必要です。