RadialGauge for ASP.NET Web Forms主な特長主な特長 C1RadialGauge は、以下の独特な主な特長を備えています。スタイル設定を簡素化スタイル設定を簡素化

RadialGauge for ASP.NET WebForms

2018.04.11 更新

グレープシティ株式会社グレープシティ株式会社

目次

製品の概要 2

ComponentOne for ASP.NET Web Forms のヘルプ 2

主な特長 3

クイックスタート 4

手順 1：ページへの C1RadialGauge の追加 4-5

手順 2：コントロールの外観のカスタマイズ 5-7

手順 3：コントロールの動作のカスタマイズ 7-8

RadialGauge for ASP.NET Web Forms の使い方 9

Gauge コントロールを使用する理由 9

C1RadialGauge の値 9-10

C1RadialGauge の StartAngle と SweepAngle 10

C1RadialGauge のインジケータ 10-12

C1RadialGauge のポインタとポインタキャップ 12-13

C1RadialGauge の表面とカバー 13-14

タスク別ヘルプ 14

コードによる C1RadialGauge の作成 14-15

コントロールのサイズ変更 15-16

開始値の設定 16-17

最小値と最大値の設定 17-18

RadialGauge for ASP.NET Web Forms

1 Copyright © GrapeCity Inc. All rights reserved.

製品の概要製品の概要

RadialGauge for ASP.NET Web Forms では、正確でグラフィカルな表示が提供されています。円、らせん、円弧、クラム

シェル、または半円形の放射型ゲージから選択することができます。

ComponentOne for ASP.NET Web Forms のヘルプのヘルプ

ComponentOne for ASP.NET Web Forms の各コントロールで共通したトピック、アセンブリの追加、テーマの適用、クライア

ント側情報などについては「ASP.NET Web Forms ユーザーガイド」を参照してください。



http://docs.grapecity.com/help/c1/aspnet/aspnet_gettingstarted/

主な特長主な特長

C1RadialGauge は、以下の独特な主な特長を備えています。

スタイル設定を簡素化スタイル設定を簡素化

すべてのゲージ要素はニーズに合わせてカスタマイズできます。ComponentOne のゲージコントロールのスタイル変

更は、プロパティを単に変更するだけです。ゲージの主な要素はすべて表面に実装されています。カスタムの色、塗り

つぶし、フォントなどを設定したゲージを作成できます。

範囲範囲

色付きの範囲をゲージに追加し、特定の値範囲に注目させます。単純なプロパティを使用し、開始点と終了点や、位

置、サイズ、および外観をカスタマイズします。開始と終了の幅を指定して非線形範囲を作成し、成長を表示したり視覚

的なアピール力を任意のゲージに追加したりできます。

目盛記号とラベル目盛記号とラベル

目盛記号とラベルを定義します。単純なプロパティを使用し、間隔、位置、および外観をカスタマイズします。書式を

ゲージラベルに適用します。たとえば、標準 .NET書式文字列を使用し、ラベルを通貨やパーセント書式に書式設定し

ます。

豊富なカスタマイズ豊富なカスタマイズ

使用可能なスタイル属性の豊富なセットを使用し、ゲージの表面とカバーの形状をカスタマイズして希望する任意の外

観を作成します。単純な形状を使用してガラス効果をシミュレートすることさえ可能です。形状が十分でない場合、画像

を追加できます。回転、反転や、色相、彩度、輝度、不透明度の変更など、さまざまな効果を画像に適用できます。

スケールのカスタマイズスケールのカスタマイズ

単純なプロパティを使用し、ゲージスケールの開始と終了角度を設定します。

ポインタのカスタマイズポインタのカスタマイズ

多くの定義済みポインタ形状から選択したり、形状をカスタマイズしたり、独自のカスタム画像をインポートしたりして、

ポインタとして使用します。放射型と線形ゲージのポインタの起点の正確な位置を指定します。これによって、ポインタ

をゲージの左右や下部に移動できます。

アニメーションアニメーション

ゲージでは簡単ににスムーズなアニメーションを使用できます。アニメーションをカスタマイズすることも可能です。たと

えば、ポインタアニメーションの場合、値が変化する際のアニメーションの時間間隔を設定できます。また、ソース値が

頻繁に変化しすぎて確認できない場合は、ゲージコントロールの再描画の頻度を減らせます。

対数マーカ対数マーカ

Islogarithmic と LogarithmicBase プロパティによって、対数マーカを取得できます。

ライブデータライブデータ

ゲージはライブデータのストリーミング用に最適化されています。ゲージはデータが変化するとアニメーション表示され

ます。



クイックスタートクイックスタート

このクイックスタートでは、C1RadialGauge コントロールの機能について学びます。C1RadialGauge は、独自のビューにデー

タを表示する機能を提供します。

手順手順 1：ページへの：ページへの C1RadialGauge の追加の追加

この手順では、Web サイトを作成して設定し、空の C1RadialGauge コントロールを追加します。C1RadialGauge コントロー

ルを Web サイトに追加するには、以下の手順を実行します。

1. Visual Studio の［ファイルファイル］メニューから、［新規作成新規作成］→［プロジェクトプロジェクト］を選択します。［新しいプロジェクト新しいプロジェクト］ダイアログ

ボックスが表示されます。

2. ［新しいプロジェクト新しいプロジェクト］ダイアログボックスの左ペインで、言語を展開して、［Web］を選択します。右ペインで、

［ASP.NET 空の空の Web アプリケーションアプリケーション］を選択し、自分のアプリケーションの［名前名前］を入力して、〈OK〉をクリックしま

す。新しいアプリケーションが作成されます。

3. ソリューションエクスプローラで、プロジェクトを右クリックして［参照の追加参照の追加］を選択します。

4. ［参照の追加参照の追加］ダイアログボックスで、C1.Web.Wijmo.Controls アセンブリを探して選択し、〈OK〉をクリックします。参照

が追加されます。

5. ソリューションエクスプローラでプロジェクトを右クリックして、コンテキストメニューから［新しい項目の追加新しい項目の追加］を選択しま

す。

6. ［新しい項目の追加新しい項目の追加］ダイアログボックスで、テンプレートのリストから［Web フォームフォーム］を選択し、項目 Default.aspx に名前を付けて、〈追加追加〉をクリックします。新しいページが開きます。

7. ソースソースビューで、次のマークアップをページの上部に追加し、C1RadialGauge アセンブリを登録します。

ソースビュー

<%@ Register Assembly="C1.Web.Wijmo.Controls.4" Namespace="C1.Web.Wijmo.Controls.C1RadialGauge" TagPrefix="cc1" %>

追加したアセンブリに応じて、上記で C1.Web.Wijmo.Controls.4 を C1.Web.Wijmo.Controls.3 に置き換える必要があ

る場合があります。

8. マウスをページの最初の <div></div>タグの間に入れて、次のマークアップを追加して、C1RadialGauge コント

ロールをページに追加します。

ソースビュー

<cc1:C1RadialGauge ID="C1RadialGauge1" runat="server"></cc1:C1RadialGauge>

9. アプリケーションを実行し、ページが次のような表示になったことを確認します。



この手順では、C1RadialGauge コントロールをフォームに追加しました。ここでは、コントロールは書式設定されていません。

クイックスタートの次の手順では、コンテンツをコントロールに追加します。

手順手順 2：コントロールの外観のカスタマイズ：コントロールの外観のカスタマイズ

この手順では、C1RadialGauge コントロールの外観をカスタマイズします。以下の手順では、「手順 1：ページへの

C1RadialGauge の追加」トピックが完了して、C1RadialGauge コントロールがページに追加されていると想定しています。

C1RadialGauge コントロールをカスタマイズするには、以下の手順を実行します。

1. ソースソースビューで、<cc1:C1RadialGauge></cc1:C1RadialGauge> タグを編集して、次のような表示にします。

ソースビュー

<cc1:C1RadialGauge ID="C1RadialGauge1" runat="server" Value="50" Max="100" StartAngle="-45" SweepAngle="270">

これによって、コントロールの Value と Max 値、およびゲージの StartAngle と SweepAngle が設定されます。

2. マウスを<cc1:C1RadialGauge></cc1:C1RadialGauge> タグの間に入れて、次のマークアップを追加し

て、C1RadialGauge コントロールの各側面をスタイル設定します。

ソースビュー

<Animation Duration="2000" Easing="EaseOutBack"></Animation><Labels Offset="30"></Labels><TickMajor Position="Inside" Factor="2" Visible="True" Offset="27" Interval="25"></TickMajor><TickMinor Position="Inside" Visible="True" Offset="30" Interval="5"></TickMinor><Pointer Length="0.8" Width="4" Offset="0.15"></Pointer><Ranges> <cc1:GaugelRange EndDistance="0.58" EndValue="10" EndWidth="5"



StartDistance="0.6" StartValue="0" StartWidth="2"> <RangeStyle Stroke="#7BA0CC" StrokeWidth="0"> <Fill Color="#7BA0CC"></Fill> </RangeStyle> </cc1:GaugelRange> <cc1:GaugelRange EndDistance="0.54" EndValue="75" EndWidth="20" StartDistance="0.58" StartValue="10" StartWidth="5"> <RangeStyle Stroke="White" StrokeWidth="0"> <Fill ColorBegin="#B4D5F0" ColorEnd="#B4D5F0" Type="LinearGradient"></Fill> </RangeStyle> </cc1:GaugelRange> <cc1:GaugelRange EndDistance="0.5" EndValue="100" EndWidth="25" StartDistance="0.54" StartValue="175" StartWidth="20"> <RangeStyle Stroke="#7BA0CC" StrokeWidth="0"> <Fill Color="#7BA0CC"></Fill> </RangeStyle> </cc1:GaugelRange></Ranges>

次の項目のスタイルを設定することに注意してください。

Animation：アニメーションのオプションを設定します。ここでは、アニメーションの Duration と Easingを設定

します。

Labels：ゲージラベルのオプションとスタイルを設定します。ここでは、ラベルの Offset を設定します。

TickMajor：主目盛線のオプションとスタイルを設定します。ここでは、主目盛線の

Position、Offset、Interval、および Factor、さらに表示／非表示を設定します。

TickMinor：補助目盛線のオプションとスタイルを設定します。ここでは、補助目盛線の Position、Offset、および表示／非表示を設定します。

Pointer：ゲージポインタのオプションとスタイルを設定します。ここでは、色とストロークを含むポインタのスタイスタイ

ルルを設定します。

GaugelRange：ゲージ範囲のオプションとスタイルを設定します。ここでは、範囲の位置関係とスタイルを設定

します。

3. アプリケーションを実行し、ゲージが次のような表示になったことを確認します。



加えたスタイル変更がコントロールに反映されていることに注意してください。

この手順では、C1RadialGauge コントロールの外観をカスタマイズしました。次の手順では、コントロールの動作をカスタマイ

ズします。

手順手順 3：コントロールの動作のカスタマイズ：コントロールの動作のカスタマイズ

この手順では、スライダコントロールを追加します。実行時にスライダのつまみボタンが移動すると、ゲージコントロールの値が

変化します。次の手順では、「手順 2：コントロールの外観のカスタマイズ」トピックが完了していると想定しています。

以下の手順を実行します。

1. ソースソースビューで、次のマークアップを</cc1:C1RadialGauge> タグのすぐ下に追加して、テキストを追加します。

ソースビュー

<p>スライダのつまみボタンをドラッグ＆ドロップして、ゲージの値を変更する： </p>

2. ソースソースビューで、直前に追加した

タグのすぐ下に次のマークアップを追加して、スライダコントロールをページに追加します。

ソースビュー

<div id="slider" style="width: 400px"></div>

これで、ページにスライダコントロールが含まれました。

3. ソースソースビューで、直前に追加した </div> タグのすぐ下に次のマークアップを追加して、スライダコントロールを有効に

します。

ソースビュー

<script type="text/javascript"> $(document).ready(function () { $("#<%= C1Slider1.ClientID %>").c1slider({ value: $("#<%= C1RadialGauge1.ClientID %>").c1radialgauge("option", "value"), change: function (event, ui) {



$("#<%= C1RadialGauge1.ClientID %>").c1radialgauge("option", "value", ui.value); } }); });</script>

これで、スライダの値が変化すると、ゲージの値も変化して新しい値を反映するようになりました。

4. アプリケーションを実行し、次のように、加えた変更がコントロールに表示されることを確認します。

5. スライダのつまみボタンをクリックして、ドラッグ＆ドロップ操作を実行します。C1RadialGauge コントロールの値が変

わって、スライダコントロールの値を反映することに注意してください。

この手順では、コントロールの動作をカスタマイズしました。おめでとうございます、これでクイックスタートは終了です。



RadialGauge for ASP.NET Web Forms の使い方の使い方

C1RadialGauge は、回転ポインタを使用して、カーブしたスケールに沿った値を表示します。値は Value プロパティによって

表され、範囲は Min と Max プロパティで定義されます。C1RadialGauge コントロールは、標準的な速度計に類似した表示

になります。

C1RadialGauge コントロールの作成と使用には通常、以下の手順が含まれます。

1. C1RadialGauge コントロールを作成して、メインプロパティであるMin、Max、StartAngle、および SweepAngle を設

定します。

2. TickMajor と TickMinor 装飾子を追加してスケールを表示し、GaugeLabel を追加してラベルをカスタマイズします。

3. オプションとして、GaugelRange 装飾子を追加して、スケールの部分をハイライトさせます。範囲は通常、「低すぎ

る」、「正常」、「高すぎる」の各範囲を示すために使用されます。また、範囲を動的にして、Value プロパティが変更され

たときに自動的に移動させることもできます。

4. オプションとして、テンプレートを用いてゲージ要素をカスタマイズします。

5. Value プロパティを設定して、表示したい値を表示させます。

Gauge コントロールを使用する理由コントロールを使用する理由

ゲージコントロールを使用する必要があるのか疑問に思うかもしれません。ゲージは１つの値を表示するだけであり、その値

はゲージの代わりに単純なラベルを使用しても表示できます。

ゲージがより優れているのは、範囲も表示する点です。これによって、ユーザーは現在の値が低い、高い、または適切かどう

かを瞬時に決定できます。確かに、２つの追加のラベルを使用すれば、範囲も現在の値も表示できますが、それによってユー

ザーインタフェースはさらに分かりにくいものになります。このため、多くのアプリケーションでは、進捗を単にラベルとして表示

する代わりに、単純な線形ゲージである進捗インジケータが使用されています。

また、ゲージには、単純なラベル（あるいはスライダやスクロールバー）よりも視覚的な魅力があり、アプリケーションの付加価

値が高まります。

C1RadialGauge の値の値

C1RadialGauge コントロールのMin、Max、およびValue プロパティを使用して、使用可能な範囲とその範囲内で選択された

値を指定できます。



Min と Max プロパティは、ゲージが表示するように設計されている値の範囲を指定します。たとえば、温度計は -40～100 度のスケール範囲、速度計は 0～140 マイル/時の範囲に設定できます。範囲は、Min と Max プロパティ（double 型）から指

定されます。C1RadialGauge コントロールのデフォルト範囲は 0～100です。

Value プロパティは、ゲージの現在の値を示します。C1RadialGauge コントロールでは、これはPointer 要素がポイントして

いる値によって視覚的に示されます。C1RadialGauge コントロールのデフォルトの Value は 0 です。

C1RadialGauge のの StartAngle とと SweepAngle範囲が定義されると、Min とMax 値に一致する角度を指定する必要があります。StartAngle は、Value プロパティが範囲の

Min 値に設定されたときのポインタの位置を定義します。SweepAngle は、Value プロパティが範囲の Max 値に設定された

ときに StartAngle に追加される角度を指定します。

すべての角度は、コントロールの上部から右回りに測定された度数で指定されます。負の角度は可能ですが、SweepAngleの絶対値は 360 度を超えることはできません。デフォルト値は、StartAngle では -140、SweepAngle では 280 です。

以下の図は、StartAngle と SweepAngle プロパティの効果を表示しています。

StartAngle = 0SweepAngle = 90

StartAngle = 0SweepAngle = -90

StartAngle = 45SweepAngle = 270

StartAngle = -160SweepAngle = 180

StartAngle = -160SweepAngle = -180

StartAngle = -140SweepAngle = 280



C1RadialGauge のインジケータのインジケータ

デフォルトでは、C1RadialGauge コントロールは、青灰色の背景、ポインタ、および非常に基本的なラベルと目盛記号を表示

します。また、大部分のアプリケーションでは、カスタムのラベルと目盛記号で構成されるスケールを表示して、ユーザーが現

在の値とその値のゲージ範囲内の位置を読み取れるようにしたい場合があります。これを実行するに

は、TickMajor、TickMinor、GaugelRange、および GaugeLabel 要素を追加します。

上の図では、カスタマイズされた TickMajor と TickMinor 要素が表示されます。

ソースビュー

<!- 目盛り --><TickMajor Position="Inside" Factor="2" Visible="True" Offset="27" Interval="25"></TickMajor><TickMinor Position="Inside" Visible="True" Offset="30" Interval="5"></TickMinor>

OffSet も設定されます。

ソースビュー

<!- ラベルを追加します。--><Labels Offset="30"></Labels>

スケールの表示に加えて、スケール範囲の部分をハイライトしたい場合があります。たとえば、赤いマーカを追加して、その範

囲の値が低すぎる（売上）か高すぎる（費用）ことを示したい場合があります。これを実行するには、１つ以上の GaugelRange要素を追加します。

上の図では、色付きのGaugelRange 要素が表示されます。

ソースビュー

<!- 色付きの範囲を追加します。--><Ranges> <cc1:GaugelRange EndDistance="0.58" EndValue="10" EndWidth="5" StartDistance="0.6" StartValue="0" StartWidth="2"> <RangeStyle Stroke="#7BA0CC" StrokeWidth="0"> <Fill Color="#7BA0CC"></Fill> </RangeStyle> </cc1:GaugelRange> <cc1:GaugelRange EndDistance="0.54" EndValue="125" EndWidth="20"



StartDistance="0.58" StartValue="10" StartWidth="5"> <RangeStyle Stroke="White" StrokeWidth="0"> <Fill ColorBegin="#B4D5F0" ColorEnd="#B4D5F0" Type="LinearGradient"></Fill> </RangeStyle> </cc1:GaugelRange> <cc1:GaugelRange EndDistance="0.5" EndValue="150" EndWidth="25" StartDistance="0.54" StartValue="125" StartWidth="20"> <RangeStyle Stroke="#7BA0CC" StrokeWidth="0"> <Fill Color="#7BA0CC"></Fill> </RangeStyle> </cc1:GaugelRange></Ranges>

GaugelRange 要素は、３つの青色の範囲領域を表示します。各 GaugelRange 要素は、スケールに沿ってカーブした帯域を

表示します。帯域の色は RangeStyle プロパティによって決定され、位置は StartValue と EndValue プロパティによって決

定されます。範囲の幅を制御するには、StartWidth と EndWidth プロパティを使用します。

C1RadialGauge のポインタとポインタキャップのポインタとポインタキャップ

C1RadialGauge には、コントロールの選択された Value を示すポインタが含まれます。ポインタはPointer 要素と Cap 要素

で構成されます。

デフォルトでは Pointer 要素は青いテーパ要素として表示されます。Pointer 要素の外観をカスタマイズするに

は、GaugePointer クラスのいくつかのプロパティ（Length、Offset、Shape、PointerStyle、Template、Visible、およ

び Width プロパティを含む）を設定します。

上の図では、Pointer 要素がカスタマイズされています。

ソースビュー

<!- ポインタ--><Pointer Length="1" Width="4" Offset="0.15"> <PointerStyle Stroke="#BF551C">



<Fill Color="#BF551C"> </Fill> </PointerStyle></Pointer>

Cap 要素はデフォルトで青い丸として表示されます。Cap 要素の外観をカスタマイズするには、C1RadialGaugePointerCap クラスのいくつかのプロパティ（BehindPointer、Radius、PointerCapStyle、Template、および Visible プロパティなど）を設

定します。

上の図では、Cap 要素がカスタマイズされています。

ソースビュー

<!- ポインタキャップ --><Cap> <PointerCapStyle Stroke="#7F9CAD"> <Fill Color="#7F9CAD"> </Fill> </PointerCapStyle></Cap>

C1RadialGauge の表面とカバーの表面とカバー

時計と同様に、C1RadialGauge コントロールには、Face 要素が含まれます。Face は背景の上に表示されますが、ポインタ

やその他の要素の背後に表示されます。たとえば、下の図では、Face はゲージの要素の背後に表示される単純な灰色の円

です。

上の図では、Face 要素はカスタマイズされています。

ソースビュー

<!- 表面 --><Face> <FaceStyle Stroke="#E0E8EF"> <Fill Color="#E0E8EF"> </Fill>



</FaceStyle></Face>

デフォルトでは、Face 要素は青灰色の円として表示されます。Face 要素の外観をカスタマイズするには、GaugeFace クラス

のいくつかのプロパティ（FaceStyle と Template プロパティなど）を設定します。

タスク別ヘルプタスク別ヘルプ

タスク別ヘルプは、ASP.NET のプログラミングに精通し、コントロールの一般的な使用方法を理解しているユーザーを対象とし

ています。ヘルプに記述された手順に従うことによって、C1RadialGauge のさまざまな機能をデモンストレーションするプロ

ジェクトを作成して、C1RadialGauge の機能を理解できます。

各トピックでは、C1RadialGauge コントロールを使用した特定のタスクのソリューションを示します。タスク別ヘルプの各トピッ

クでは、新しい ASP.NET プロジェクトを作成し、必要なアセンブリへの参照を追加済みであることも前提となります。

コードによるコードによる C1RadialGauge の作成の作成

コードで C1RadialGauge コントロールを作成するのは、とても簡単です。以下の手順では、PlaceHolder コントロールをペー

ジに追加して、インポートステートメントを追加した後、C1RadialGauge を追加してカスタマイズし、そのコントロールを

PlaceHolder に追加します。

以下の手順を実行します。

1. デザインビューで、ページをダブルクリックして Page_Load イベントを作成し、コードビューに切り替えます。

2. 次のステートメントをコードエディタの上部に追加し、必要な名前空間をインポートします。

Visual Basic コードの書き方コードの書き方

Visual Basic

Imports C1.Web.Wijmo.Controls.C1Gauge

C# コードの書き方コードの書き方

C#

using C1.Web.Wijmo.Controls.C1Gauge;

3. 次のコードを Page_Load イベントに追加し、C1RadialGauge コントロールを作成してカスタマイズします。


Visual Basic

' 新しい C1RadialGauge を作成します。

Dim C1RG As New C1RadialGauge' コントロールのサイズと値を設定します。

C1RG.Height = 200C1RG.Width = 200C1RG.Min = 0C1RG.Max = 100C1RG.Value = 60' C1RadialGauge を PlaceHolder コントロールに追加します。

Dim PlaceHolder1 As New PlaceHolderPlaceHolder1.Controls.Add(C1RG)form1.Controls.Add(PlaceHolder1)




C#

// 新しい C1RadialGauge を作成します。

C1RadialGauge C1RG = new C1RadialGauge();// コントロールのサイズと値を設定します。

C1RG.Height = 200;C1RG.Width = 200;C1RG.Min = 0;C1RG.Max = 100;C1RG.Value = 60;// C1RadialGauge を PlaceHolder コントロールに追加します。

PlaceHolder PlaceHolder1 = new PlaceHolder();PlaceHolder1.Controls.Add(C1RG);form1.Controls.Add(PlaceHolder1);

このトピックの作業結果このトピックの作業結果

アプリケーションを実行し、C1RadialGauge コントロールが作成されたことを確認します。

コントロールのサイズ変更コントロールのサイズ変更

C1RadialGauge の高さと幅は、Height プロパティと Width プロパティを設定して簡単に変更できます。デフォルトでは、コン

トロールの高さは 400px に設定され、幅は 600px に設定されます。コントロールの高さと幅は、ソースビュー、プロパティプロパティウィ

ンドウ、またはコードを使用して容易に変更できます。

ソースビューの場合ソースビューの場合

ソースビューで、Height="200px" と Width="300px" を、<cc1:C1RadialGauge> タグ内でコントロールの高さと幅を設

定したいサイズに追加します。

ソースビュー

<cc1:C1RadialGauge ID="C1RadialGauge1" runat="server" Height="200px" Width="300px">

上記の設定によって、コントロールは高さ 200 ピクセル、幅 300 ピクセルにサイズ変更されます。

プロパティウィンドウの場合プロパティウィンドウの場合

プロパティプロパティウィンドウでコントロールの高さと幅を設定するには、次のように Height プロパティと Width プロパティを変更しま

す。



1. C1RadialGauge をクリックして選択します。

2. プロパティウィンドウに移動し、必要な場合は Layout ノードを拡張して、Height プロパティと Width プロパティを探し

ます。

3. Height の横に、コントロールの高さにするサイズの値（200px など）を入力します。

4. Width の横に、コントロールの幅にするサイズの値（300px など）を入力します。

5. ［Enter］キーを押すか、プロパティプロパティウィンドウの外でクリックして、設定した高さと幅を C1RadialGauge コントロールに

適用します。

コードの場合コードの場合

次のコードを Page_Load イベントに追加し、Height と Width プロパティを高さ 200 ピクセルと幅 300 ピクセルに設定しま

す。


Visual Basic

Me.C1RadialGauge1.Height = 200Me.C1RadialGauge1.Width = 300


C#

this.C1RadialGauge1.Height = 200;this.C1RadialGauge1.Width = 300;

開始値の設定開始値の設定

このトピックでは、C1RadialGauge コントロールのValue プロパティを変更します。Value プロパティは現在選択されている数

値を決定します。デフォルトでは、C1RadialGauge コントロールは 0 に設定された Value から開始しますが、デザイン時、お

よび XAML やコードでこの数値をカスタマイズできます。このトピックでは C1RadialGauge コントロールの Value を設定して

いますが、同じ手順を使用して、他のコントロールの Value もカスタマイズできることに注意してください。

デザイン時の場合デザイン時の場合

C1RadialGauge コントロールのValue をデザイン時に設定するには、以下の手順を実行します。

1. C1RadialGauge を１回クリックして選択します。

2. プロパティプロパティウィンドウに移動して、数値（20 など）を Value プロパティの横のテキストボックスに入力します。

これによって、Value プロパティが選択した数値に設定されます。

XAML の場合の場合

たとえば、Value プロパティを設定するには、Value="20" を<cc1:C1RadialGauge> タグに追加して、次のような記述に

します。

ソースビュー

<cc1:C1RadialGauge Value="20">


たとえば、Value プロパティを設定するには、次のコードをプロジェクトに追加します。




Visual Basic

C1RadialGauge1.Value = 20


C#

C1RadialGauge1.Value = 20;


最初にゲージのPointer は、選択したValue に設定されます。

最小値と最大値の設定最小値と最大値の設定

Min とMax プロパティを使用して、ゲージを制限する数値範囲を設定できます。デザイン時、および XAML やコードで、Minと Max 値をカスタマイズできます。

注意：注意：Min と Max プロパティを設定する場合、Min を Max より小さくする必要があります。また、Value プロパティ

は、Min と Max 範囲内に入る数値に設定してください（以下の例では、Value は以下で設定された範囲内に入る 0 に設定されています）。

デザイン時の場合デザイン時の場合

デザイン時にC1RadialGauge コントロールの Min とMax を設定するには、以下の手順を実行します。

1. C1RadialGauge を１回クリックして選択します。

2. プロパティプロパティウィンドウに移動して、Max プロパティの横に、数値（50 など）を入力します。

3. プロパティプロパティウィンドウで、Min プロパティの横に、数値（-50 など）を入力します。

これによって、Min と Max 値が設定されます。

XAML の場合の場合

XAML でC1RadialGauge コントロールの Min と Max を設定するには、 Maximum="50" Minimum="-50" を<cc1:C1RadialGauge> タグに追加して、次のような記述にします。

ソースビューソースビュー

<cc1:C1RadialGauge Name="C1RadialGauge1" Maximum="50" Minimum="-50">


C1RadialGauge コントロールの Min と Max を設定するには、次のコードをプロジェクトに追加します。


Visual Basic

C1RadialGauge1.Minimum = -50 C1RadialGauge1.Maximum = 50


C#



C1RadialGauge1.Minimum = -50; C1RadialGauge1.Maximum = 50;


実行時、ゲージは選択された範囲に制限されます。



Documents

RadialGauge for ASP.NET Web Forms主な特長主な特長 C1RadialGauge は、以下の独特な主な特長を備えています。スタイル設定を簡素化スタイル設定を簡素化