バージョン

XamLinearGauge 概要

トピックの概要

概要

XamLinearGauge 概要

XamLinearGauge は、データをリニア ゲージの形で視覚化する Ultimate UI for WPF コントロールです。スケールおよび 1 つ以上の比較範囲と比較した主要な値をシンプルで簡潔に表示します。

XamLinearGauge 17 1.png

XamLinearGauge コントロールは、データを魅力的な表現にするための機能を提供し、複数のアプリケーションを使用するシナリオも準備されています。

主要機能

主要機能の概要

XamLinearGauge の機能には構成可能な向きや方向、視覚要素などがあります。このコントロールには、アニメーション化されたトランジションのサポートも組み込まれています。

主要な機能の概要表

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

機能 説明

構成可能な向きと方向

XamLinearGauge コントロールでは、スケールの向きと方向の状態を設定する API が公開され、ゲージの外観を大幅にカスタマイズすることができます。(詳細は、 向きと方向の構成のトピックを参照してください。)

構成可能な視覚要素

リニア ゲージの各視覚要素は、さまざまな形で構成できます。(詳細は、XamLinearGauge の構成可能な視覚要素と関連プロパティを参照してください。)

アニメーション化されたトランジション

XamLinearGauge コントロールには、その TransitionDuration プロパティによるアニメーションの組み込みサポートが提供されています。アニメーション効果は、コントロール読み込み時および任意のプロパティの値が変更された時に発生します。(詳細は、アニメーション トランジションの構成のトピックを参照してください。)

ツールチップのサポート

XamLinearGauge コントロールに組み込まれたツールチップは、針を作成するための値、または異なる範囲に対応したそれぞれの値を示します。コントロールのデフォルト ルックに合わせて初期スタイル設定がされていますが、その外観はテンプレートでカスタマイズできます。デフォルトでは、ツールチップは無効になっています。(詳細は、 ツールチップの構成を参照してください)

論理領域と構成可能な視覚要素の概要

論理領域

XamLinearGauge コントロールの表示領域は、論理的に以下の領域に分割されます: タイトル領域、予約領域、グラフ領域。

水平方向 垂直方向
XamLinearGauge Overview 1.png
XamLinearGauge Overview 2.png

各領域は XamLinearGauge コントロールの一部の視覚要素に関連して異なる目的があります。

  • タイトル領域 (0) - タイトル領域は、リニア ゲージのタイトル / サブタイトルを表示する領域です。この領域はスケール (予約領域 グラフ領域) と重ねることはできません。

デフォルト設定ではありませんが、水平方向のリニア ゲージの場合、タイトル領域はその幅をタイトルとサブタイトルの両方またはいずれか長い方に合わせて自動的に設定します。さらにタイトル領域の幅を明示的に設定することもできます。この機能は、互いに接するようには位置した複数の XamLinearGauge コントロールのタイトル領域を同じ幅にして、統一性のあるルック アンド フィールにする場合に役立ちます。

予約領域の主な目的は、スケールの番号ラベルに対して、水平方向にも垂直方向にも十分なスペースを与えることにあります。(方向が変化した場合、番号ラベルを表示するための各方向へのスペース要求に対応するために、予約領域はサイズを自動的に調整します。水平方向ではラベルの高さ、垂直方向では最大幅に合わせます。)これは、必ずしも番号ラベルを予約領域に配置する必要があることを意味しません。実際、ラベル行はスケール全域で、グラフ領域内のどこにでも配置できます。しかし、ラベル行を予約領域の外に配置しても、予約領域自体のスプレッドおよび位置にはまったく影響はありません。予約領域は変化せず、番号ラベルの高さと幅により (方向に従い) 決定されます。

さらに予約領域が重要なのは、内側の端がスケール全体のディメンションにおいてグラフ領域の最初の端を特定する点です。この端が、スケール全域に構成可能な視覚要素および視覚要素の一部を配置する範囲関連プロパティの参照マークの役割を果たします。(最も一般的な場合、これらのプロパティの正の値は視覚要素をグラフ領域の内部に置き、負の値は視覚要素を予約領域の内部に配置します。)

グラフ領域のスプレッド:

  • スケールに沿った方向 - グラフ領域はタイトル領域が存在しない場合に、コントロールの端または上の図に示すようにタイトル領域の端のいずれかより開始され、コントロールの端で終了します。スケールの開始位置および終了位置は両方とも、グラフ領域の始点側の端 (水平方向の左端または垂直方向の下端) に対して測定されます。

  • スケール全域 - グラフ領域は、予約領域の端 (水平方向でグラフ領域の下端または垂直方向でグラフ領域の左端) から開始されます。予約領域の境界線で接しているグラフ領域の端は、スケールの一部の視覚要素の範囲関連プロパティに対する、スケール全域に視覚要素を配置するための参照点としての役割を果たします。

タイトル領域およびグラフと予約領域の配置は、位置の入れ替え (水平方向にグラフおよび予約領域が左側、タイトル領域が右側など) で設定できることに注意してください。この場合、タイトル領域はスケールの終点から開始されるため、グラフと予約領域はコントロールの端から始まりタイトル領域が始まる所で終わります。(詳細は、 タイトル / サブタイトルの構成トピックを参照)

構成可能な視覚要素

XamLinearGauge コントロールは、以下の視覚要素が特徴です(下の図を参照)。

  • 針 (3) - コントロールにより表示される主要なメジャーで、バーとして視覚化されます。

  • 比較範囲 (4) - 範囲は、スケール上で指定した値の領域を強調表示する視覚的な要素です。その目的は、パフォーマンス バー メジャーの質的状態を視覚で伝えると同時に、その状態をレベルとして示すことにあります。

  • 目盛 (5) - 目盛は、リニア ゲージを読み取りやすくするために、目盛の間隔でスケールを分割して見せる役割を果たします。

    • 主目盛 - 主目盛は、スケールの主要な区切りとして使用されます。表示間隔、範囲、およびスタイルは、対応するプロパティを設定し制御できます。

    • 副目盛 - 副目盛は主目盛を補助し、スケールの数値を読み取りやすくするために追加して使用します。主目盛と同じ方法でカスタマイズできます。

  • スケール ラベル (6) - このラベルはスケールのメジャーを示します。

  • 境界線 (7) - コントロールのディメンションを視覚的に区切る線です。

  • 背景 (8) – 視覚要素が配置された背景のパターンおよび色を設定できます。

  • タイトル / サブタイトル (9) – グラフのタイトル、およびサブタイトルの形で示す追加の詳細。両方の要素ともタイトル領域に表示されます。コントロール上の位置はその領域に対して調整されます。

XamLinearGauge Overview 3.png
  • ツールチップ - 針を作成するための値、または異なる範囲に対応したそれぞれの値を示します。

構成可能な視覚要素および関連プロパティ

構成可能な視覚要素および関連プロパティの概要

各要素は複数の項目で構成することができます。

以下の表は、XamLinearGauge コントロールの視覚要素で構成できる項目を示します。構成できる項目の詳細は、この表の次に示す各視覚要素の説明で、図および構成するプロパティと一緒に参照できます。

視覚要素 構成できる主な項目
  • タイトル領域の幅 (水平方向のみ)

  • テキスト

  • テキストの開始位置

  • 位置

  • 目盛

  • ラベル

  • 表示値

  • 幅と位置

  • ルックアンドフィール (図形)

  • グラフに表示する範囲の数値

  • 長さ、幅、位置

  • ルックアンドフィール

  • サイズと位置

  • ルックアンドフィール

  • 表示遅延

タイトル / サブタイトル

以下の図は、下の表にリストされたタイトル領域関連の範囲を示しています。

XamLinearGauge Overview 4.png

以下の表は、リニア ゲージのタイトル / サブタイトルの構成できる項目を示し、管理に使用する XamLinearGauge プロパティにマップします。

構成可能な点 プロパティ デフォルト値

タイトル領域の幅 (水平方向のみ)

設定なし

グラフ領域に対する タイトル領域の位置

TitlesPosition.ScaleStart

タイトル テキスト

null

ルック アンド フィール (スタイルによって構成可能)

設定なし

サブタイトル テキスト

null

ルック アンド フィール (スタイルによって構成可能)

設定なし

スケーリング

以下の図は、下の表にリストされたスケール関連の範囲を示しています。

グラフ領域内でスケールを配置する範囲 ラベルの位置を設定する範囲
XamLinearGauge Overview 5.png
XamLinearGauge Overview 6.png
スケールに沿って主目盛を設定する範囲 スケール全域で主目盛を設定する範囲
XamLinearGauge Overview 7.png
XamLinearGauge Overview 8.png
スケール全域で副目盛を設定する範囲
XamLinearGauge Overview 9.png

以下の表は、リニア ゲージのスケールで構成できる項目を示し、管理に使用する XamLinearGauge プロパティにマップします。

構成可能な点 プロパティ デフォルト値

位置

0.05

0.95

最小値

0

最大値

100

主目盛

設定なし

0

0

0.02

0.2

デフォルトのテーマで定義済み

2.0

副目盛

3.0

0.06

0.2

デフォルトのテーマで定義済み

1.0

位置とスペース

0

設定なし

0

0

数値書式

設定なし

デフォルトのテーマで定義済み

関連トピック

以下の図は、下の表にリストされた針関連の範囲を示しています。

XamLinearGauge Overview 10.png

以下の表は、リニア ゲージの針の構成できる基本項目を示し、管理に使用する XamLinearGauge プロパティにマップします。

構成可能な点 プロパティ デフォルト値

表示値

設定なし

10.0

塗りつぶし色

デフォルトのテーマで定義済み

境界線の色

デフォルトのテーマで定義済み

境界線の線幅

1.0

図形

Needle

関連トピック

比較範囲

以下の図は、下の表にリストされた比較範囲関連の範囲を示しています。

XamLinearGauge Overview 11.png

以下の表は、リニア ゲージの比較範囲の構成できる項目を示し、管理に使用する XamLinearGauge プロパティにマップします。

構成可能な点 プロパティ デフォルト値

グラフに表示する範囲の数

設定なし

長さ、幅、位置

設定なし

設定なし

設定なし

設定なし

設定なし

設定なし

塗りつぶし色

デフォルトのテーマで定義済み

境界線の色

デフォルトのテーマで定義済み

境界線の線幅

1.0

ツールチップ

ハイフン (-) で区切られた範囲の開始値と終了値です。

背景

以下の図は、下の表にリストされた背景関連の範囲を示しています。

XamLinearGauge Overview 12.png

以下の表は、リニア ゲージの背景で構成できる項目を示し、管理に使用する XamLinearGauge プロパティにマップします。

構成可能な点 プロパティ デフォルト値

スケール全域のスプレッドおよび位置

0

1.0

デフォルトのテーマで定義済み

境界線の色

デフォルトのテーマで定義済み

境界線の線幅

2.0

関連トピック

ツールチップ

以下の表は、ツールチップに関する XamLinearGauge コントロールで構成できる項目と管理に使用するプロパティをマップしています。

構成可能な項目2 詳細 プロパティ/イベント デフォルト値

可視性

XamLinearGauge コントロールのツールチップを有効または無効にできます。

False

遅延

視覚要素にマウスを合わせたときにツールチップが表示されるまでのタイムアウトを、ミリ秒数単位で設定します。

500

ツールチップのプロパティでカスタムに値を設定できます。値は次のとおりです:

  • テンプレート

  • 文字列

  • UI 要素

NeedleName の初期化状態による ( 針のカスタム ツールチップの構成を参照)

ハイフン (-) で区切られた範囲の開始値と終了値です。

関連トピック

アニメーション トランジションの構成

アニメーション トランジションの構成概要

XamLinearGauge コントロールには、その TransitionDuration プロパティによるアニメーションの組み込みサポートが提供されています。アニメーション効果は、コントロール読み込み時および任意のプロパティの値が変更された時に発生します。デフォルトで、アニメーション化されたトランジションは無効になっています。ミリ秒単位で値を設定できるコントロールの TransitionDuration プロパティにより、ビューでコントロールをスワイプする時間枠を定義します。視覚要素は左下から右上に移動するスライド効果によって、すべて滑らかに表示されます。値を 0 に設定するとアニメーション トランジションが無効になります。

デフォルトの構成

デフォルト構成の概要

デフォルトで、XamLinearGauge コントロールは水平方向です。表示するスケールの範囲は、0 から 100 までです。コントロールの主目盛は 10 の間隔で表示され、主目盛間は副目盛で 3 つに区切られています。 タイトルまたはサブタイトルが表示されていない場合、背景色は白になります。境界線は、2 ピクセルのダーク グレーの線です。針または範囲が表示されていません。アニメーション化されたトランジションが無効です。

以下の図は、デフォルト設定の XamLinearGauge を示します。

XamLinearGauge Overview 13 17 1.png

要件

要件の概要

XamLinearGauge コントロールは WPF コントロールの 1 つで、アセンブリとは別にコントロール自体を含んでいます。他のいくつかのアセンブリに依存します。リニア ゲージに針を表示するには、 Value プロパティの設定が必要です。

完全な要件の一覧については、 XamLinearGauge の追加を参照してください。

関連コンテンツ

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

トピック 目的

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

このトピック グループは、向きや方向および視覚要素を含む XamLinearGauge コントロールのさまざまな要素を構成する方法を説明します。

このトピックでは、XamLinearGauge コントロールに関連するキー クラスやプロパティに関する参考情報を提供します。