バージョン

ゲージ デザイナを使用して基本的な WebGauge を作成

始める前に

ゲージ デザイナを使用してラジアル ゲージを作成すると以下が可能になります。

  • ゲージをプリセットとして保存して、将来のアプリケーションのために使用することができる。

  • インタラクティブなプレビュー領域でゲージが作成されているときにゲージを確認することができる。

  • ゲージのプロパティの編集プロセスを簡略化できる。

達成すること

ゲージ デザイナを使用して基本的なラジアル ゲージを作成することによって、ゲージ デザイナの基本を理解できます。

次の手順を実行します

  1. ツールボックスから、UltraGauge コントロールをフォームにドラッグします。ゲージ デザイナが開きます。

Gauge Creating a Radial Gauge Using the Gauge Designer 01.png
  1. ゲージ エクスプローラで、[ゲージ] を展開します。

  2. [ゲージの追加…​] をクリックして、[新しいラジアル ゲージ] を選択します。

  3. [ラジアル ゲージ] を展開して、[目盛盤] を選択します。

  4. [プロパティ パネル]で、 [外観 タブ]をクリックします。 [ブラシ ペイン]で、プロパティを以下のとおり指定したブラシ エレメントを追加します。

  1. [外観] タブの [ストローク ペイン]で、以下のプロパティを設定します。

    • タイプ — 単色

    • 詳細 — シルバー

    • スタイル — 単色

    • 太さ — 1

    • 配置 — 中央

Gauge Creating a Radial Gauge Basic Walkthrough Using the Gauge Designer 02.png
  1. ゲージ エクスプローラで、[スケール] を展開します。

  2. [スケールの追加…​] をクリックして、[新しいスケール] を選択します。

  3. [プロパティ] パネルで、 [スケール レイアウト タブ]をクリックします。 [スイープ角度 ペイン]で、以下のプロパティを設定します。

    • 開始 — 135

    • 終了 — 405

  1. [スケール レイアウト] タブの [軸 ペイン]をクリックして、[終了値] を 100.00 に設定します。

  2. ゲージ エクスプローラで、新しく作成したスケールを展開して、[ラベル] を選択します。

  3. [プロパティ] パネルで、 [ラベル レイアウト タブ]をクリックします。 [方向 ペイン]で、以下のプロパティを設定します。

    • 範囲 — 55

    • 方向 — 外側

  1. [ラベル レイアウト] タブの [フォーマッティング ペイン]をクリックして、以下のプロパティを設定します。

    • 頻度 — 20.00

    • スパン最大 — 18

  1. [ラベル外観] タブをクリックします。[ブラシ] ペインで、以下のプロパティを設定します。

    • タイプ — 単色

    • 色 — 白

  1. [ラベル外観] タブの [フォント ペイン]をクリックして、以下のプロパティを設定します。

    • フォント サイズ — 12

    • タイプ — ピクセル

    • スタイル — 太字

Gauge Creating a Radial Gauge Basic Walkthrough Using the Gauge Designer 03.png
  1. ゲージ エクスプローラで、[主目盛] を展開します。

  2. [プロパティ] パネルで、 [目盛レイアウト タブ]をクリックします。 [範囲 ペイン]で、以下のプロパティを設定します。

    • 開始 — 67

    • 終了 — 79

  1. [目盛レイアウト] タブの [幅 ペイン]をクリックして、以下のプロパティを設定します。

    • 開始 — 3

    • 終了 — 3

  1. [目盛レイアウト] タブの [方向 ペイン]をクリックして、以下のプロパティを設定します。

    • 頻度 — 10.00

  1. [外観] タブをクリックします。[ブラシ] ペインで、以下のプロパティを設定します。

    • タイプ — 単色

    • 色 — 189, 189, 189

  1. ゲージ エクスプローラで、[副目盛] を選択します。

  2. [プロパティ] パネルで、[目盛レイアウト] タブをクリックします。[範囲] ペインで、以下のプロパティを設定します。

    • 開始 — 73

    • 終了 — 78

  1. [目盛レイアウト] タブの [幅] ペインで、以下のプロパティを設定します。

    • 開始 — 1

    • 終了 — 1

  1. [目盛レイアウト] タブの [方向] ペインで、以下のプロパティを設定します。

    • 頻度 — 2.00

  1. [外観] タブをクリックします。[ブラシ] ペインで、以下のプロパティを設定します。

    • タイプ — 単色

    • 色 — 240, 240, 240

  1. [外観] タブの [ストローク] ペインで、以下のプロパティを設定します。

    • タイプ — 単色

    • 色 — 135, 135, 135

Gauge Creating a Radial Gauge Basic Walkthrough Using the Gauge Designer 04.png
  1. ゲージ エクスプローラで、[マーカー] を展開します。

  2. [マーカーの追加…​] をクリックして、[新しい針] を選択します。

  3. [プロパティ] パネルで、 [針マーカー レイアウト タブ]をクリックします。 [幅と範囲 ペイン]で、以下のプロパティを設定します。

      • 開始 — 3

      • 中間 — 3

      • 終了 — 1

    • 範囲

      • 開始 — -20

      • 中間 — 0

      • 終了 — 65

  1. [針マーカー レイアウト] タブの [値と単位 ペイン]で、以下のプロパティを設定します。

    • 値 — 95.00

    • 精度 — 1.00

    • 単位 — パーセント

  1. [外観] タブをクリックします。[ブラシ] ペインで、以下のプロパティを設定します。

    • タイプ — 単色

    • 色 — 255, 61, 22

  1. ゲージ エクスプローラで、新しく作成した針マーカーを展開して、[アンカー] を選択します。

  2. [プロパティ] パネルで、[外観] タブをクリックします。[ブラシ] ペインで、以下のプロパティを設定します。

    • タイプ — SimpleGradient

    • 開始色 — Gainsboro

    • 終了色 — 64, 64, 64

    • グラデーション スタイル — BackwardDiagonal

  1. [外観] タブの [ストローク] ペインで、以下のプロパティを設定します。

    • タイプ — RadialGradient

    • 周囲の色 — グレー

    • 中央の色 — WhiteSmoke

    • フォーカス スケール — 0,0

    • 中心点 — 75, 25

  1. これでゲージ デザイナを使用して、基本的なラジアル ゲージの作成に成功しました。ゲージは、以下のスクリーンショットのゲージのようになります。

Gauge Creating Basic Gauge Using Gauge Designer 01.png