バージョン

ダイアグラム項目の内容の視覚化の構成 (xamDiagram)

トピックの概要

目的

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

前提条件

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

トピック 目的

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

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

概要

ダイアグラムの項目テンプレートの概要

ダイアグラムの項目には、項目の内容に適用できる、表示テンプレートと編集テンプレートの 2 つのテンプレートがあります。表示テンプレートはコンテンツの表現を定義し、編集テンプレートは項目の内容を編集する場合に適用します。

以下のスクリーンショットは、デフォルトの項目内容とダイアグラムのノードに適用された編集テンプレートを示しています。

表示テンプレート 編集テンプレート
xamDiagram Configuring the Diagram Items Content Visualization 1.png
xamDiagram Configuring the Diagram Items Content Visualization 2.png

ダイアグラム項目の内容の可視化構成の概要

表示テンプレートを使用して、ダイアグラム項目の内容 (ノードおよび接続) の視覚的表現を管理します。また、ノード レベルの一連のプロパティは、水平方向の配置や余白、コンテナー要素 (はめ込み / オーバーラップ) に関連する要素のフローなどと言った、コンテンツの可視化の細かな要素の処理に大変便利です。

表示テンプレートは定義済みで提供され、デフォルトでダイアグラムの項目に適用されます。デフォルトのデータ テンプレートは、コンテンツ コンテナー用のテンプレートを指定します。ノードおよび接続の両方で同じテンプレートを使用します。Text プロパティが DiagramItem.Content 値にバインドされた TextBlock コントロール (ノードの場合のみ、テキスト ブロックの周囲の余白は 2 ピクセル)。

ノードには、コンテンツ コンテナー内でノードのコンテンツの配置を制御する、一連の明示的なプロパティがあります。これらのプロパティによって、配置をテンプレートで定義せずに構成できます。これらのプロパティは、以下のとおりです。

ダイアグラム接続の場合、コンテンツは常に接続線の中央に配置します。

Note
注:

データ テンプレートに定義されているコンテンツ コンテナーと、ダイアグラム ノードの図形を混同しないでください。これらは、2 つの異なるエンティティです。一般的なダイアグラム作成ソフトウェアにおけるノードとは異なり、ノード図形そのものがコンテンツを表します。コンテンツ コンテナーは、ノード図形は同じではありませんが、高度なシナリオではノード コンテナーをノード図形の代わりとして、テンプレートで構成できます。

Note
注:

ダイアグラム ノードの場合、DisplayTemplate は、 ShapeType プロパティおよび Geometry プロパティの設定に関係なく、常に適用されます。ノードの図形の設定では、これらのプロパティが使用されることを前提としています。DisplayTemplate でコンテンツのプレゼンテーションを定義し、必要に応じて、前述のプロパティを使用してこのプレゼンテーションを微調整してください。(ノード図形を構成する方法の詳細は、 ダイアグラム ノードの図形の構成を参照してください。)

ダイアグラム項目の内容の可視化構成の概要表

以下の表は、ダイアグラムのノードおよび接続のコンテンツの構成可能な要素を簡単に説明し、それらを構成するプロパティにマップします。

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

表示

コンテンツの水平方向の余白

水平方向の余白 (コンテンツの左端と右端の間およびコンテナーの端の空白スペース) は、個別のプロパティを使用して左の余白と右の余白を構成します。

コンテンツの配置

水平方向および垂直方向の配置は、個別のプロパティを使用して構成します。

  • HorizontalContentAlignment

  • VerticalContentAlignment

コンテンツ レイアウトの動作

コンテンツ サイズがノード サイズよりも大きい場合は、コンテナーが収まるようにトリミングする、または (DisplayTemplate に基づいて) 調整なしの状態で表示します。調整なしの状態で表示する場合、コンテンツは重なるコンテナーの外側にはみ出します。

すべての要素 (テンプレート)

DataTemplate を使用して、ダイアグラムのノードまたは接続のコンテンツの表示方法を設定します。DisplayTemplate が明示的に設定されていない場合、前述のデフォルトのテンプレートが適用されます。

編集

すべての要素 (テンプレート)

DataTemplate を使用して、編集モードでのダイアグラムのノードまたは接続のコンテンツの表示方法を設定できます。EditTemplate が明示的に設定されていない場合、前述のデフォルトのテンプレートが適用されます。

カスタム表示テンプレートの構成

概要

ダイアグラムのノードまたは接続用のカスタム テンプレートを適用するには、 DisplayTemplate プロパティを、  Content プロパティの値がデータ テンプレートの DataContext として内部で設定されている DataTemplate に設定します。

プロパティ設定

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

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

カスタム表示テンプレートの設定

目的の DataTemplate

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

プロパティ

「ボタンのコンテンツ テンプレート」

XAML の場合:

<DataTemplate>
    <Button Content="{Binding}" />
</DataTemplate>

Orange

XAML の場合:

<DataTemplate>
    <Ellipse
        Fill="{Binding}"
        Stroke="{Binding Stroke, RelativeSource={RelativeSource AncestorType=ig:DiagramConnection}}"
        Width="20" Height="20"/>
</DataTemplate>
xamDiagram Configuring the Diagram Items Content Visualization 3.png

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

XAML の場合:

<ig:XamDiagram>
    <ig:DiagramNode Content="Button Content Template" Width="160">
        <ig:DiagramNode.DisplayTemplate>
            <DataTemplate>
                <Button Content="{Binding}" />
            </DataTemplate>
        </ig:DiagramNode.DisplayTemplate>
    </ig:DiagramNode>
    <ig:DiagramConnection Content="Orange" StartPosition="0,150" EndPosition="120,150">
        <ig:DiagramConnection.DisplayTemplate>
            <DataTemplate>
                <!-- Binding the ellipse's fill to the connection's
                Content and the Stroke to the connection's Stroke -$$->$$
                <Ellipse
                    Fill="{Binding}"
                    Stroke="{Binding Stroke, RelativeSource={RelativeSource AncestorType=ig:DiagramConnection}}"
                    Width="20" Height="20"/>
            </DataTemplate>
        </ig:DiagramConnection.DisplayTemplate>
    </ig:DiagramConnection>
</ig:XamDiagram>

カスタム編集テンプレートの構成

概要

ダイアグラム ノードまたはダイアグラム接続用にカスタム編集テンプレートを適用するには、 EditTemplate プロパティを DataTemplate に設定します。Content プロパティの値は、データ テンプレートの DataContext として内部で設定されています。

プロパティ設定

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

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

カスタム コンテンツ編集テンプレートの設定

目的の DataTemplate

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

プロパティ

New Content?

XAML の場合:

<DataTemplate>
    <StackPanel>
        <TextBlock Text="Enter Display Text:" Foreground="WhiteSmoke" />
        <TextBox Text="{Binding Content, RelativeSource={RelativeSource AncestorType=ig:DiagramNode}}"/>
    </StackPanel>
</DataTemplate>

Orange

XAML の場合:

<DataTemplate>
    <ComboBox SelectedItem="{Binding .}">
        <sys:String>Orange</sys:String>
        <sys:String>Green</sys:String>
        <sys:String>Blue</sys:String>
        <sys:String>Red</sys:String>
        <ComboBox.ItemTemplate>
            <DataTemplate>
                <Ellipse Fill="{Binding Content, RelativeSource={RelativeSource AncestorType=ig:DiagramConnection}}" Width="20" Height="20"/>
            </DataTemplate>
        </ComboBox.ItemTemplate>
    </ComboBox>
</DataTemplate>
xamDiagram Configuring the Diagram Items Content Visualization 4.png

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

XAML の場合:

<ig:XamDiagram xmlns:sys="clr-namespace:System;assembly=mscorlib">
    <ig:DiagramNode Content="Button Content Template" Width="160">
        <ig:DiagramNode.EditTemplate>
            <DataTemplate>
                <StackPanel>
                    <TextBlock Text="Enter Display Text:" Foreground="WhiteSmoke" />
                    <TextBox Text="{Binding Content, RelativeSource={RelativeSource AncestorType=ig:DiagramNode}}"/>
                </StackPanel>
            </DataTemplate>
        </ig:DiagramNode.EditTemplate>
        <ig:DiagramNode.DisplayTemplate>
            <DataTemplate>
                <Button Content="{Binding}" />
            </DataTemplate>
        </ig:DiagramNode.DisplayTemplate>
    </ig:DiagramNode>
    <ig:DiagramConnection Content="Orange" StartPosition="0,150" EndPosition="120,150">
        <ig:DiagramConnection.EditTemplate>
            <DataTemplate>
                <!-- ComboBox の SelectedItemを接続のコンテンツにバインドします複合オブジェクトを接続のコンテンツとして設定する場合は、編集対象のプロパティのプロパティのパスに設定されたパスへの単純なバインディングだけで十分です。-$$->$$
                <ComboBox SelectedItem="{Binding Content, RelativeSource={RelativeSource AncestorType=ig:DiagramConnection}}">
                    <sys:String>Orange</sys:String>
                    <sys:String>Green</sys:String>
                    <sys:String>Blue</sys:String>
                    <sys:String>Red</sys:String>
                    <ComboBox.ItemTemplate>
                        <DataTemplate>
                            <Ellipse Fill="{Binding}" Width="20" Height="20"/>
                        </DataTemplate>
                    </ComboBox.ItemTemplate>
                </ComboBox>
            </DataTemplate>
        </ig:DiagramConnection.EditTemplate>
        <ig:DiagramConnection.DisplayTemplate>
            <DataTemplate>
                <!-- 楕円の塗りつぶしを接続のコンテンツに、
                ストロークを接続のストロークにバインドします-$$->$$
                <Ellipse
                    Fill="{Binding}"
                    Stroke="{Binding Stroke, RelativeSource={RelativeSource AncestorType=ig:DiagramConnection}}"
                    Width="20" Height="20"/>
            </DataTemplate>
        </ig:DiagramConnection.DisplayTemplate>
    </ig:DiagramConnection>
</ig:XamDiagram>

関連コンテンツ

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

トピック 目的

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