RadialGauge for ASP.NET Web Forms - ComponentOne

RadialGauge for ASP.NET Web
Forms
2015.05.20 更新
グレープシティ株式会社
RadialGauge for ASP.NET Web Forms
目次
製品の概要
ComponentOne Studio for ASP.NET Web Forms のヘルプ
2
主な特長
3
クイックスタート
4
手順 1：ページへの C1RadialGauge の追加
4-5
手順 2：コントロールの外観のカスタマイズ
5-7
手順 3：コントロールの動作のカスタマイズ
7-8
RadialGauge for ASP.NET Web Forms の使い方
Gauge コントロールを使用する理由
C1RadialGauge の値
C1RadialGauge の StartAngle と SweepAngle
9
9
9-10
10
C1RadialGauge のインジケータ
10-12
C1RadialGauge のポインタとポインタキャップ
12-13
C1RadialGauge の表面とカバー
13-14
タスク別ヘルプ
1
2
14
コードによる C1RadialGauge の作成
14-15
コントロールのサイズ変更
15-16
開始値の設定
16-17
最小値と最大値の設定
17-18
Copyright © GrapeCity inc. All rights reserved. RadialGauge for ASP.NET Web Forms
製品の概要
RadialGauge for ASP.NET Web Forms では、正確でグラフィカルな表示が提供されています。円、らせん、円弧、クラム
シェル、または半円形の放射型ゲージから選択することができます。
ComponentOne Studio for ASP.NET Web Forms のヘルプ
ComponentOne Studio for ASP.NET Web Forms の各コントロールで共通したトピック、アセンブリの追加、テーマの適用、ク
ライアント側情報などについては「ComponentOne Studio for ASP.NET Web Formsユーザーガイド」を参照してください。
2
Copyright © GrapeCity inc. All rights reserved. RadialGauge for ASP.NET Web Forms
主な特長
C1RadialGauge は、以下の独特な主な特長を備えています。
スタイル設定を簡素化
すべてのゲージ要素はニーズに合わせてカスタマイズできます。ComponentOne のゲージコントロールのスタイル変
更は、プロパティを単に変更するだけです。ゲージの主な要素はすべて表面に実装されています。カスタムの色、塗り
つぶし、フォントなどを設定したゲージを作成できます。
範囲
色付きの範囲をゲージに追加し、特定の値範囲に注目させます。単純なプロパティを使用し、開始点と終了点や、位
置、サイズ、および外観をカスタマイズします。開始と終了の幅を指定して非線形範囲を作成し、成長を表示したり視覚
的なアピール力を任意のゲージに追加したりできます。
目盛記号とラベル
目盛記号とラベルを定義します。単純なプロパティを使用し、間隔、位置、および外観をカスタマイズします。書式を
ゲージラベルに適用します。たとえば、標準 .NET書式文字列を使用し、ラベルを通貨やパーセント書式に書式設定し
ます。
豊富なカスタマイズ
使用可能なスタイル属性の豊富なセットを使用し、ゲージの表面とカバーの形状をカスタマイズして希望する任意の外
観を作成します。単純な形状を使用してガラス効果をシミュレートすることさえ可能です。形状が十分でない場合、画像
を追加できます。回転、反転や、色相、彩度、輝度、不透明度の変更など、さまざまな効果を画像に適用できます。
スケールのカスタマイズ
単純なプロパティを使用し、ゲージスケールの開始と終了角度を設定します。
ポインタのカスタマイズ
多くの定義済みポインタ形状から選択したり、形状をカスタマイズしたり、独自のカスタム画像をインポートしたりして、
ポインタとして使用します。放射型と線形ゲージのポインタの起点の正確な位置を指定します。これによって、ポインタ
をゲージの左右や下部に移動できます。
アニメーション
ゲージでは簡単ににスムーズなアニメーションを使用できます。アニメーションをカスタマイズすることも可能です。たと
えば、ポインタアニメーションの場合、値が変化する際のアニメーションの時間間隔を設定できます。また、ソース値が
頻繁に変化しすぎて確認できない場合は、ゲージコントロールの再描画の頻度を減らせます。
対数マーカ
Islogarithmic と LogarithmicBase プロパティによって、対数マーカを取得できます。
ライブデータ
ゲージはライブデータのストリーミング用に最適化されています。ゲージはデータが変化するとアニメーション表示され
ます。
3
Copyright © GrapeCity inc. All rights reserved. RadialGauge for ASP.NET Web Forms
クイックスタート
このクイックスタートでは、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. アプリケーションを実行し、ページが次のような表示になったことを確認します。
4
Copyright © GrapeCity inc. All rights reserved. RadialGauge for ASP.NET Web Forms
この手順では、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"
5
Copyright © GrapeCity inc. All rights reserved. RadialGauge for ASP.NET Web Forms
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. アプリケーションを実行し、ゲージが次のような表示になったことを確認します。
6
Copyright © GrapeCity inc. All rights reserved. RadialGauge for ASP.NET Web Forms
加えたスタイル変更がコントロールに反映されていることに注意してください。
この手順では、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) {
7
Copyright © GrapeCity inc. All rights reserved. RadialGauge for ASP.NET Web Forms
$("#<%= C1RadialGauge1.ClientID %>").c1radialgauge("option",
"value", ui.value);
}
});
});
</script>
これで、スライダの値が変化すると、ゲージの値も変化して新しい値を反映するようになりました。
4. アプリケーションを実行し、次のように、加えた変更がコントロールに表示されることを確認します。
5. スライダのつまみボタンをクリックして、ドラッグ＆ドロップ操作を実行します。C1RadialGauge コントロールの値が変
わって、スライダコントロールの値を反映することに注意してください。
この手順では、コントロールの動作をカスタマイズしました。おめでとうございます、これでクイックスタートは終了です。
8
Copyright © GrapeCity inc. All rights reserved. RadialGauge for ASP.NET Web Forms
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 プロパティを使用して、使用可能な範囲とその範囲内で選択された
値を指定できます。
9
Copyright © GrapeCity inc. All rights reserved. RadialGauge for ASP.NET Web Forms
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 = 0
SweepAngle = 90
StartAngle = 0
SweepAngle = -90
StartAngle = 45
SweepAngle = 270
StartAngle = -160
SweepAngle = 180
StartAngle = -160
SweepAngle = -180
StartAngle = -140
SweepAngle = 280
10
Copyright © GrapeCity inc. All rights reserved. RadialGauge for ASP.NET Web Forms
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"
11
Copyright © GrapeCity inc. All rights reserved. RadialGauge for ASP.NET Web Forms
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">
12
Copyright © GrapeCity inc. All rights reserved. RadialGauge for ASP.NET Web Forms
<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>
13
Copyright © GrapeCity inc. All rights reserved. RadialGauge for ASP.NET Web Forms
</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 コードの書き方
Visual Basic
' 新しい C1RadialGauge を作成します。
Dim C1RG As New C1RadialGauge
' コントロールのサイズと値を設定します。
C1RG.Height = 200
C1RG.Width = 200
C1RG.Min = 0
C1RG.Max = 100
C1RG.Value = 60
' C1RadialGauge を PlaceHolder コントロールに追加します。
Dim PlaceHolder1 As New PlaceHolder
PlaceHolder1.Controls.Add(C1RG)
form1.Controls.Add(PlaceHolder1)
14
Copyright © GrapeCity inc. All rights reserved. RadialGauge for ASP.NET Web Forms
C# コードの書き方
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 プロパティを変更しま
す。
15
Copyright © GrapeCity inc. All rights reserved. RadialGauge for ASP.NET Web Forms
1. C1RadialGauge をクリックして選択します。
2. プロパティウィンドウに移動し、必要な場合は Layout ノードを拡張して、Height プロパティと Width プロパティを探し
ます。
3. Height の横に、コントロールの高さにするサイズの値（200px など）を入力します。
4. Width の横に、コントロールの幅にするサイズの値（300px など）を入力します。
5. ［Enter］キーを押すか、プロパティ
プロパティウィンドウの外でクリックして、設定した高さと幅を C1RadialGauge コントロールに
適用します。
コードの場合
次のコードを Page_Load イベントに追加し、Height と Width プロパティを高さ 200 ピクセルと幅 300 ピクセルに設定しま
す。
Visual Basic コードの書き方
Visual Basic
Me.C1RadialGauge1.Height = 200
Me.C1RadialGauge1.Width = 300
C# コードの書き方
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 コードの書き方
16
Copyright © GrapeCity inc. All rights reserved. RadialGauge for ASP.NET Web Forms
Visual Basic
C1RadialGauge1.Value = 20
C# コードの書き方
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 コードの書き方
Visual Basic
C1RadialGauge1.Minimum = -50 C1RadialGauge1.Maximum = 50
C# コードの書き方
C#
17
Copyright © GrapeCity inc. All rights reserved. RadialGauge for ASP.NET Web Forms
C1RadialGauge1.Minimum = -50; C1RadialGauge1.Maximum = 50;
このトピックの作業結果
実行時、ゲージは選択された範囲に制限されます。
18
Copyright © GrapeCity inc. All rights reserved.

Download Report