バージョン

ダイアグラム項目のルック アンド フィールの構成 (xamDiagram)

トピックの概要

目的

このトピックでは、 xamDiagram™ コントロールでダイアグラム項目の基本的なルック アンド フィール プロパティを構成する方法を説明します。

前提条件

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

トピック 目的

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

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

ダイアグラム項目のルック アンド フィールの構成の概要

ダイアグラム項目のルック アンド フィールの構成の概要表

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

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

塗りつぶし

項目を塗りつぶす色

ストローク

ノード図形 / 接続線、ストロークの色、太さ、ダッシュ配列

フォント

使用可能なフォントに関連した設定

不透明度

項目の不透明度

接続線のタイプ (接続のみ)

接続に対して描画される線のタイプ (直線または直角)

ダイアグラム項目のルック アンド フィールの構成

概要

ダイアグラム項目の外観をカスタマイズするには、ルック アンド フィールに関連するプロパティを使用します。

プロパティ設定

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

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

ノード図形 / 接続線の塗りつぶしに使用する色の設定

目的のブラシ

ノード図形 / 接続線のストロークに使用する色の設定

目的のブラシ

ストロークの太さの設定

目的の太さ

フォントの色の設定

目的のブラシ

フォント ファミリの設定

目的のフォント ファミリ

フォント サイズの設定

目的のサイズ

フォント スタイルの設定

目的のスタイル

フォント ウェイトの設定

目的のフォント ウェイト

不透明度の設定

0~1 の範囲内の目的の値

接続の種類の設定

直線 または 直角

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

プロパティ

Azure

Aquamarine

5

5 1

Chocolate

Comic Sans MS

30

Italic

Bold

0.7

Straight

xamDiagram Configuring The Look And Feel Of Diagram Items 1.png

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

XAML の場合:

<ig:XamDiagram>
    <ig:DiagramNode
        Fill="Azure"
        Stroke="Aquamarine"
        StrokeThickness="5"
        StrokeDashArray="5 1"
        Foreground="Chocolate"
        FontFamily="Comic Sans MS"
        FontSize="30"
        FontStyle="Italic"
        FontWeight="Bold"
        Opacity="0.7"
        Content="Hi!"/>
    <ig:DiagramConnection
        Fill="Azure"
        Stroke="Aquamarine"
        StrokeThickness="5"
        StrokeDashArray="5 1"
        Foreground="Chocolate"
        FontFamily="Comic Sans MS"
        FontSize="30"
        FontStyle="Italic"
        FontWeight="Bold"
        Opacity="0.7"
        Content="Hi!"
        ConnectionType="Straight"
        StartPosition="0,200"
        EndPosition="200,200"/>
</ig:XamDiagram>

関連コンテンツ

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

トピック 目的

このトピックでは、 xamDiagram コントロールのダイアグラム ノードのサイズと位置を制御する方法を説明します。

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

このトピックでは、ダイアグラム ノードの接続ポイントを構成する方法を説明します。

このトピックでは、ダイアグラムの接続を開始する位置と終了する位置を構成する方法について説明します。

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

このトピックでは、 xamDiagram コントロールをデータにバインドする方法を説明します。