バージョン

概要 (xamDiagram)

トピックの概要

目的

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

このトピックの内容

このトピックは、以下のセクションで構成されます。

xamDiagram の概念的な概要

xamDiagram の概念的な概要

xamDiagram コントロールは、スタンドアロンのダイアグラム作成ツールと同等のユーザー インタラクション機能を提供するダイアグラム作成コンポーネントです。

xamDiagram Overview 1.png

xamDiagram は、ノードおよび接続の 2 つのタイプの項目を表示します。ノードは、四角形、楕円形、三角形など、さまざまな図形で表示できます。接続できるのは 2 つのノード、ダイアグラム上の任意の 2 つの点、または 1 つのノードと 1 つの点です。接続は必要に応じて、矢印、円、ダッシュなどのキャップを持つ、開始と終了の線として表示されます。

ユーザーは、マウスおよびキーボードを使用して簡単に xamDiagram を操作することができます。コピー、切り取り、貼り付けなど、最もポピュラーな操作はどのアプリケーションにも共通に設定されたキーボード ショートカット (Ctrl+C、Ctrl+X、Ctrl+V) によりアクセスできます。さらに、ダイアグラム領域に新しいノードや接続を追加する場合に役立つ、ツールボックス ( xamDiagramToolbox コントロール) が使用できます (前述の図を参照)。

以下のスクリーンショットは、シンプルなフロー図が表示された xamDiagram を示しています。 xamDiagramToolbox コントロールも表示されています。

xamDiagram の機能

xamDiagram 機能の概要

xamDiagram は、ダイアグラム作成ツールに必要なさまざまな機能を提供します。MVVM に対応するデータ バインドやコマンドをサポートし、複数のナビゲーション モードも利用できます。ユーザーは、ダイアグラム項目とそのビジュアル要素の選択、移動、サイズ変更、および編集ができます。 Infragistics® Undo Redo Framework の最上部にビルドされた元に戻す / やり直し機能を使用できます。また、ナビゲーション ペインとツールボックス コントロールも提供されています。

xamDiagram 機能の概要表

以下の表で、 xamDiagram コントロールの主な機能を簡単に説明します。各機能の詳細は、このヘルプで確認できます。

機能 説明

多くのデータ モデルに対応する、柔軟なデータ バインディング メカニズムを使用できます。

パンとズームはどちらも、コードとユーザー インタラクションを使用して実行できます。

選択は複数の項目に対応し、コードまたはユーザー インタラクションを使用して変更できます。

ダイアグラムのノードは、移動やサイズ変更が可能です。接続の始点と終点は移動できます。ノードおよび接続のコンテンツ (ラベル テキスト) を編集できます。

xamDiagram は、すべてのフィッティング インタラクションのコマンドが定義済みです。

xamDiagram は、すべてのユーザー インタラクションおよびコードを使用したプロパティ変更に対して、元に戻す / やり直しをサポートしています。

コンテキスト オプション ペインを使用して、選択したノードや接続の外観を変更できます。

xamDiagram は、 xamOverviewPlusDetailsPane コントロールを統合してダイアグラムの概要を表示します。

xamDiagram コントロールは、もっとも人気の高い形状を備えたツールボックス コントロールを提供します。これらの形状は、ドラッグしてダイアグラムに入力できます。

ダイアグラム ノードにより、カスタム図形を指定できます。

xamDiagram のノードおよび接続は、その内容の表示や編集が可能なカスタム テンプレートをサポートしています。

xamDiagram は高性能で、数千の項目を処理できます。使用されている技術の 1 つは、現在表示されていない項目を仮想化する技術です。

xamDiagram の視覚要素

視覚要素の概要

xamDiagram コントロールは、以下の基本的な視覚要素を公開します。

  • ダイアグラムの領域

  • ダイアグラムのノード

  • ダイアグラム ノードの接続

ノードおよび接続は、「ダイアグラムの項目」と総称され、ダイアグラム領域内にレンダリングされます。

追加の視覚要素は以下の通りです。

  • ナビゲーション ペイン - ダイアグラムのスペース内 (デフォルトでは右下隅) に配置された個別のペインに、コンテンツ全体が縮小表示されます。ナビゲーション ペインは、内部コントロール ( xamOverviewPlusDetailPane™) により実装されます。

  • ツールボックス - ドラッグ アンド ドロップによるダイアグラムへの項目追加ができるコントロールです。ツールボックスは、 xamDiagramToolbox™ コントロールにより実装されます。

ユーザー インタラクションと操作性

ユーザー インタラクションの概要表

以下の表に、 xamDiagram コントロールの主な機能を簡単に説明します。

目的 方法 詳細 構成方法

ダイアグラムのパン

  • Ctrl + マウス ドラッグ

  • キーボードの矢印キー

ナビゲーション ペインのコントロール

ダイアグラムの現在表示されている部分の変更。

ズームインとズームアウト

  • マウス ホイール

  • ズーム ドラッグ操作を使用したマウス ドラッグ

  • Ctrl + Shift + マウス ドラッグ

ナビゲーション ペイン ナビゲーター

ズーム レベルの変更。

1 つ以上の項目の選択

  • マウス ドラッグ

  • 項目をクリック

  • Ctrl + A

ドラッグして選択する場合、矩形の選択領域に完全に含まれている項目がすべて選択されます。

項目をクリックすると、クリックした項目が選択され、選択されていた項目がクリアされます。

すべての項目の選択は、キーボード ショートカット (Ctrl + A) で実行します。

項目の移動

項目の上にマウスをドラッグ

何かが選択された状態であれば、選択された項目の 1 つをドラッグすると、選択されたすべての項目を移動します。

ノードのサイズ変更

サイズ変更ハンドルをマウス ドラッグ

1 つのノードを選択すると、サイズ変更インジケーターが端や辺に表示されます。ノードの一辺からドラッグすると、ノードの選択された辺のサイズが変更されます。ノードのいずれかのコーナーからドラッグすると、ノードのサイズは縦横均等に変更されます。

Shift キーを押すと、これらの動作が逆になります。

接続の始点および終点を移動

始点 / 終点ハンドルをマウス ドラッグ

1 つの接続を選択すると、ドラッグ可能なインジケーターがその両端に表示されます。これらのインジケーターは、ダイアグラム上の 1 つのポイントまたは 1 つのノードにドラッグできます。

接続の描画

  • ノードの接続ポイントからマウス ドラッグ

  • コネクタ ツールの使用時に、ダイアグラム上の任意のポイントからマウス ドラッグ

項目の内容を編集

  • マウス ダブルクリック

  • F2 キー

ノードまたは接続の内容編集操作を開始します。

現在値の確認または改行の追加

Enter キー

ノードが編集モードのときにユーザーが Enter キーを押した場合、EnterKeyBehavior プロパティに設定された値に基づいて動作が異なります。CommitChanges 値の場合、現在値を確認し、編集モードを終了します。AddNewLineFeed 値の場合、編集モードに残り、改行を挿入します。

Note
注

ユーザーは、Shift+Enter を使用して "CommitChanges" モードで改行を挿入できます。

オプション ペインの表示 / 非表示

  • 選択された項目の隣の "設定" アイコン (xamDiagram_Overview_16.png) をクリック

  • ダイアグラム領域上で Esc キーを押下 / マウス クリック

ダイアグラムの項目の外観と内容を編集するオプションを備えたコンテキスト メニューを表示または非表示にします。

変更を元に戻す / やり直す

  • Ctrl + Z

  • Ctrl + U

元に戻す / やり直しの操作を実行します。

項目のコピー、切り取り、貼り付け、削除

  • Ctrl + C

  • Ctrl + X

  • Ctrl + V

  • Delete

ダイアグラム内の項目では、標準のクリップボード操作がサポートされます。

xamDiagram コマンド

コマンドの概要

xamDiagram コントロールは、ダイアグラム項目で実行されるアクションや、コントロールの UI とのインタラクションを表す複数のコマンドや、元に戻す / やり直し操作の履歴に影響を与える複数のコマンドをサポートします。コマンドは、キーボード ショートカット、他のコントロールとのインタラクションなどを使用して呼び出すことができます。

多くのコマンドは、一般的なインターフェイスの規格に従って、キーボードのキーやキーの組み合わせに関連付けられています (コピーする場合の Ctrl+Cなど)。キーボード ショートカット (またはキーの組み合わせ) は、プログラムによってオーバーライドできます。(詳細は、 キーボード ショートカットの構成を参照してください。)

xamDiagram の構成

xamDiagram 構成の概要

xamDiagram の構成要素は、以下のカテゴリに分割できます。

  • ダイアグラムの構成

  • 項目の構成 – ノードおよび接続に適用可能な構成

  • ノードの構成

  • 接続の構成

  • ユーザー インタラクションの構成

XamDiagram 構成の概要表

以下の表は、 xamDiagram コントロールの構成可能な要素を簡単に説明し、それらを構成するプロパティにマップします。詳細は、表の後に記載されています。

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

ノードの配置

表示させるダイアグラムの部分

XamDiagram 項目の構成の概要表

以下の表は、 xamDiagram コントロールのダイアグラム項目 (ノードおよび接続) の構成可能な要素を簡単に説明し、それらを構成するプロパティにマップします。詳細は、表の後に記載されています。

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

ダイアグラムのノードおよび接続の構成可能な要素に関連するルック アンド フィール。

ダイアグラム項目の内容を提示および編集する場合に使用されるテンプレート。

XamDiagram ノードの構成の概要表

以下の表は、ダイアグラム ノードの構成可能な要素を簡単に説明し、それらを構成するプロパティにマップします。詳細は、表の後に記載されています。

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

ダイアグラム ノードの位置とサイズ

ダイアグラム ノードの図形

ノードに関連付けられた接続が開始および終了する接続ポイント

xamDiagram 接続の構成の概要表

以下の表は、ダイアグラム ノードの構成可能な要素を簡単に説明し、それらを構成するプロパティにマップします。詳細は、表の後に記載されています。

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

接続が開始され終了するポイント

接続の開始および終了に表示するキャップ

xamDiagram ユーザー インタラクションの構成の概要表

以下の表は、ダイアグラム ノードの構成可能な要素を簡単に説明し、それらを構成するプロパティにマップします。詳細は、表の後に記載されています。

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

xamDiagram は、多数のコマンドを提供します。

xamDiagram は、項目のプロパティを編集するためのコンテキスト メニューを提供します。

マウスを使用して簡単に xamDiagram を操作する方法です。

xamDiagram は、ダイアグラム全体のナビゲーション ペインを提供します。

xamDiagram は、項目の選択機能を提供します。

xamDiagram の操作で使用されるキーボード ショートカットです。

xamDiagram は、項目をドラッグ アンド ドロップするための追加のツールボックス コントロールを提供します。

xamDiagram は、元に戻す / やり直し機能を提供します。

大規模データの最適化

xamDiagram のパフォーマンスの最適化に関する候補の一覧表

以下の表は、 xamDiagram のパフォーマンスの最適化に関連した可能な構成を簡単に説明しています。

最適化要素 説明

レイアウト

xamDiagram の Layout プロパティを使用すると、すべてのノードに対して追加の反復が実行されます。適用するレイアウトにより大量の計算が実行されると、さらにパフォーマンスに影響を与えます。その場合は、できるだけ、 DiagramNode.Position プロパティを事前に計算した位置に設定することを検討してください。

表示項目数

たとえば、 MinimumZoomLevel を増加させ、同時に表示する項目の数を制限してみてください。

ナビゲーション ペイン

ナビゲーション ペインを表示すると、項目を表示するための追加のオーバーヘッドが発生します。そのため、 NavigationPaneVisibility を Collapsed に設定することを検討してください。

選択

項目の操作で待機時間がある場合は、同時に多数の項目の操作が発生しないように、 SelectionMode を Single または None に設定することを検討してください。

項目テンプレート

レンダリング時間を短くするために、 DiagramItem.DisplayTemplate には小さなサイズの DataTemplate を使用してください。データ テンプレートに含める要素およびバインドは、できる限り少なくする必要があります。

ノードの図形

ノードのカスタム図形を作成するには、 DiagramItem.DisplayTemplate に対して DiagramNode.Geometry プロパティを使用します。

接続の種類

接続で DiagramConnection.ConnectionType を Straight に設定すると、 RightAngle に設定した場合より、明らかにパフォーマンスが向上します。

接続キャップ

DiagramConnection.StartCapStyle プロパティおよび EndCapStyle プロパティでカスタム キャップを設定し、各キャップのビジュアル ツリーに新しいコントロールを貼り付けます。データ集約型のアプリケーションの場合は、定義済みのキャップ タイプのいずれかを DiagramConnection.StartCapType および EndCapType で使用することを検討してください。可能な場合は、キャップ タイプに None を設定し、キャップを使用しないでください。

接続の始点および終点

接続の両端をターゲット ノード上の特定のポイントに関連付け、最も近い接続ポイントを決定するルーチンをスキップするために、 DiagramConnection.StartNodeConnectionPointName プロパティおよび EndNodeConnectionPointName プロパティを設定することを検討してください。

関連コンテンツ

トピック

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

トピック 目的

このトピックでは、 xamDiagram コントロールの主要な機能の詳細を説明します。

このトピックでは、 xamDiagram コントロールの視覚要素の概要を説明します。

このトピックでは、 xamDiagram コントロールで使用できるコマンドの動作ロジックを説明します。