バージョン

ダイアグラム ノードの位置およびサイズの構成 (xamDiagram)

トピックの概要

目的

このトピックでは、 xamDiagram™ コントロールのダイアグラムの各ノードのサイズと位置を制御する方法を説明します。ノードのサイズと位置をまとめて管理する方法の詳細は、 レイアウトの構成のトピックを参照してください。

前提条件

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

トピック 目的

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

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

ノードの位置とサイズの構成の概要

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

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

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

ノードの位置とサイズの構成の概要

xamDiagram ノードは、ダイアグラムの領域の任意の位置に個別に配置、またはレイアウト アルゴリズム ( Layout プロパティを介して使用可能な設定) を適用して配置します。(レイアウト アルゴリズムの詳細は、 レイアウトの構成のトピックを参照してください。)

デフォルトでは、明示的なオーバーライドが適用されていない場合、座標系の原点 (0、0) に新たに作成されたノードが表示されます。

ダイアグラムのノードのサイズは、幅と高さを設定すると明示的に制御できます。デフォルトのサイズはノードの図形に依存します。(デフォルトのサイズの参照については、 ノードのデフォルト サイズを参照してください。)

Note

注:

ノードの Content プロパティの値がノードの境界線内に収まらない場合、コンテンツはオーバーフローします。

ノードの位置とサイズの構成の概要表

以下の表は、ダイアグラムのノードの位置とサイズに関連して構成可能な項目を簡単に説明し、それらを構成するプロパティにマップします。

構成可能な項目 詳細 プロパティ

ノードの位置

ダイアグラムの左上隅からのノードの左上隅までのオフセット (ピクセル数) を示す複素数として表される、ダイアグラム上のノードの位置 (例: (5,25) __ )。

ノードのサイズ

ノードのサイズは、幅と高さの設定から導き出されます。幅と高さは、各プロパティで個別に管理されます。

  • Width

  • Height

サイズ変更時のノードの動作

ノードのサイズ変更では、ノードの水平方向および垂直方向の縦横比を維持 (ノードは縦横均等に伸縮)することも、水平方向または垂直方向へのマウスの動きに応じた任意のサイズにすることもできます (新しい縦横比になります)。

ダイアグラム ノードの位置の構成

概要

ノードの位置は、ダイアグラム領域上のノードの水平方向および垂直方向の配置に対応するピクセル値を、ノードの Position プロパティに設定することで指定します。値の形式は、 「X ,Y (例: 75,125 ) です。

プロパティ設定

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

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

ノード位置の構成

ダイアグラムの左上端からの目的の X 座標および Y 座標 (ピクセル数で指定)

以下のスクリーンショットは、以下の設定の結果のノードの配置を示します。

プロパティ

5, 125

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

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

XAML の場合:

<ig:XamDiagram x:Name="diagram"
               Width="300"
               Height="250"
               Background="#F9F9F9">
    <ig:DiagramNode x:Name="node0"
                    Position="5,125"/>
</ig:XamDiagram>

ダイアグラム ノードのサイズの構成

概要

ダイアグラムのノードのサイズは、Width プロパティおよび Height プロパティの値を設定すると明示的に制御できます。デフォルトのサイズはノードの図形に依存します (定義済みのノード図形の場合)。

サイズ変更時にダイアグラム ノードの縦横比を維持するかどうかを指定するには、 MaintainAspectRatio プロパティを設定する必要があります。四角、円、菱形を除くすべてのノード タイプの縦横比は、デフォルトで維持されていません。ダイアグラムのノードの現在の縦横比は、 ResizeRatio プロパティの値から取得できます。

プロパティ設定

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

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

ノードの幅

Width

目的の幅 (ピクセル数)

ノードの高さ

Height

目的の高さ (ピクセル数)

サイズ変更モード

  • True - サイズ変更時に、図形の縦横比を維持します。

  • False - サイズ変更時に、図形の縦横比を維持しません (サイズ変更時の実際のサイズ変更に応じて、縦横比が変化します)。

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

プロパティ

Width

65

Height

75

True

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

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

XAML の場合:

<ig:XamDiagram x:Name="diagram"
               Width="300"
               Height="250"
               Background="#F9F9F9">
    <ig:DiagramNode x:Name="node0"
                    Width="65"
                    Height="75"
                    MaintainAspectRatio="True"
/>
</ig:XamDiagram>

関連コンテンツ

トピック

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

トピック 目的

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

このトピックでは、定義済みの図形を選択、またはカスタム図形を適用して、 xamDiagram コントロールのダイアグラム ノードの図形を構成する方法を説明します。

このトピックでは、ダイアグラムの項目の内容についてDataTemplates を設定する方法、およびこれらの内容を編集するために DataTemplates を設定する方法を説明します。