バージョン

ツールボックスの構成 (xamDiagram)

トピックの概要

目的

このトピックでは、 xamDiagram™ のダイアグラム ツールボックスの構成方法と使用方法について説明します。

前提条件

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

トピック 目的

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

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

このトピックの内容

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

概要

ツールボックスの構成の概要

xamDiagram コントロールは、定義済みの図形セットから直接ダイアグラム領域にダイアグラム項目をドラッグ アンド ドロップできる機能を提供します。この機能は、 xamDiagramToolbox コントロールにより提供されます。デフォルトでは、2 つの事前構成済みの図形カテゴリ (ラベルを表すノードなど、現在サポートされているすべてのダイアグラム ノード タイプ、および 2 つのタイプのダイアグラム接続を含む Basic Shapes と Connections ) があります。

xamDiagram Configuring the Toolbox 1.png

ダイアグラムのツールボックスの図形カテゴリは、オーバーライドまたは拡張できます。ツールボックスに表示された図形のデフォルト サイズは 30, 30 または 30, 40 (ピクセル単位で幅、高さ) で、図形のタイプに応じて異なります。

ツールボックスは、アプリケーション関連のロジックの実装に使用できる、 CategoryAdding と CategoryAdded の 2 つのイベントを公開します。

ツールボックスの構成の概要表

以下の表は、ダイアグラムのツールボックスの構成可能な要素を簡単に説明し、それらを構成するプロパティにマップします。

構成可能な項目 詳細 プロパティ/イベント

ヘッダー

ヘッダーはツールボックスのカテゴリの上に表示され、表示状態、背景や前景などの視覚要素での構成、または Header プロパティを使用して完全なオーバーライドができます。

ツールボックスのカテゴリ

ダイアグラム項目の図形が表示されるカテゴリ。上書きまたは拡張できます。

ツールボックスの定義済み図形セットのフィルタリング

CategoryAdding イベントの処理で、追加操作のキャンセルや、構成済みのカテゴリまたはカスタムで作成したカテゴリで表示する図形のフィルタリングができます。

作成済みのカテゴリの変更

CategoryAdded イベントの処理で、ビューの縮小など作成されたカテゴリを変更することができます。

ツールボックスのカテゴリの拡張

概要

新しいカテゴリをダイアグラムのツールボックスに追加するには、1 つのカテゴリを作成し、 xamDiagramToolbox の CustomCategories コレクションに追加する必要があります。DiagramToolboxItem クラスのインスタンスを追加して、新しいカテゴリを項目に事前設定する必要があります。これらの項目をツールボックスに適切に表示するには、それらのサイズを明示的に構成する必要があります。以下の例では、ツールボックスの図形の既存のセットに逆三角形を含む新しいカテゴリを追加して、拡張する方法を説明します。

Note
注:

xamDiagramToolbox コントロールの既存のカテゴリのコレクションをオーバーライドする場合は、新しい DiagramToolboxCategoryCollection インスタンスを作成して、ツールボックスの Categories プロパティに割り当てる必要があります。

プロパティ設定

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

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

ツールボックスに追加する新しいカテゴリの構成

DiagramToolboxCategoryCollection クラスのインスタンス。

例

以下のスクリーンショットは、以下の設定の結果、オプション ペインの構成がどのように表示されるかを示します。

プロパティ 値

XAML の場合:

<ig:DiagramToolboxCategory Name="カスタムな図形"
                           IsExpanded="True">
      <ig:DiagramToolboxCategory.Items>
            <ig:DiagramToolboxItem Title="カスタム">
                  <ig:DiagramToolboxItem.Item>
                                <ig:DiagramNode Width="30" Height="30">
                                    <ig:DiagramNode.ConnectionPoints>
                                        <ig:DiagramConnectionPointCollection>
                                            <ig:DiagramConnectionPoint Name="Point" Point="0.5,0.5" />
                                        </ig:DiagramConnectionPointCollection>
                                    </ig:DiagramNode.ConnectionPoints>

                                    <ig:DiagramNode.Geometry>
                                        <PathGeometry>
                                            <PathGeometry.Figures>
                                        <PathFigure IsClosed="True" StartPoint="0,0">
                                            <PathFigure.Segments>
                                              <PathSegmentCollection>
                                                <LineSegment Point="100,0" />
                                                <LineSegment Point="50,100" />
                                              </PathSegmentCollection>
                                            </PathFigure.Segments>
                                          </PathFigure>
                                            </PathGeometry.Figures>
                                        </PathGeometry>
                                    </ig:DiagramNode.Geometry>
                                </ig:DiagramNode>
                  </ig:DiagramToolboxItem.Item>
            </ig:DiagramToolboxItem>
      </ig:DiagramToolboxCategory.Items>
</ig:DiagramToolboxCategory>
xamDiagram Configuring the Toolbox 2.png

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

XAML の場合:

<ig:XamDiagramToolbox x:Name="Toolbox">
            <ig:XamDiagramToolbox.CustomCategories>
                <ig:DiagramToolboxCategory Name="カスタムな図形"
                                           IsExpanded="True">
                    <ig:DiagramToolboxCategory.Items>
                        <ig:DiagramToolboxItem Title="カスタム">
                            <ig:DiagramToolboxItem.Item>
                                <ig:DiagramNode Width="30" Height="30">
                                    <ig:DiagramNode.ConnectionPoints>
                                        <ig:DiagramConnectionPointCollection>
                                            <ig:DiagramConnectionPoint Name="Point" Point="0.5,0.5" />
                                        </ig:DiagramConnectionPointCollection>
                                    </ig:DiagramNode.ConnectionPoints>
                                    <ig:DiagramNode.Geometry>
                                        <PathGeometry>
                                            <PathGeometry.Figures>
                                        <PathFigure IsClosed="True" StartPoint="0,0">
                                            <PathFigure.Segments>
                                              <PathSegmentCollection>
                                                <LineSegment Point="100,0" />
                                                <LineSegment Point="50,100" />
                                              </PathSegmentCollection>
                                            </PathFigure.Segments>
                                          </PathFigure>
                                            </PathGeometry.Figures>
                                        </PathGeometry>
                                    </ig:DiagramNode.Geometry>
                                </ig:DiagramNode>
                            </ig:DiagramToolboxItem.Item>
                        </ig:DiagramToolboxItem>
                    </ig:DiagramToolboxCategory.Items>
            </ig:DiagramToolboxCategory>
      </ig:XamDiagramToolbox.CustomCategories>
</ig:XamDiagramToolbox>

関連コンテンツ

トピック

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

トピック 目的

このトピックでは、 xamDiagram コントロールで実行されるユーザー インタラクションのすべてのタスクの概要を説明します。