最初のゲージの作成
まずは、ASP.NETアプリケーション用プロジェクトを用意します。マスターページを使う場合は、適宜不要な部分を削除するなど編集しておきます。
① ツールボックスからC1LinearGaugeコントロールをドラッグ＆ドロップします。デフォルトで、0から100までの目盛を持ったゲージが作成されます。
今回は、とりあえず動作範囲はこのままでゲージのデザインを変更していきます。
② プロパティウィンドウを使用して、「Height」プロパティを"100px"に、「Width」プロパティを"500px"に変更します。ゲージのサイズはこの2つのプロパティで行います。
目盛のデザイン
デザインの手始めは目盛のカスタマイズです。これは、TickMajor/TickMinorプロパティを使用します。
① 最初に大きな値の目盛表示をカスタマイズします。プロパティウィンドウで「TickMajor」プロパティを展開すると、GaugeTickクラスのメンバプロパティが表示されるので、これらを操作して目盛のデザインを設定します。
また、この中のTickStyleプロパティを展開することで、さらに細かな設定を行うことができます。
ここでは、次のプロパティの値を変更します。
| プロパティ | 設定値 | |
|---|---|---|
| Factor | 8 | |
| Visible | True | |
| Offset | -11 | |
| Interval | 20 | |
| TickStyle | Width | 2 |
「Factor」プロパティは、目盛の棒線の長さを決定するプロパティです。「Visible」プロパティは、目盛の表示・非表示を決定します。「Offset」は縦方向の目盛の位置を決定します。「Interval」は目盛の間隔を設定します。「20」と設定すると、値が20の間隔で目盛が設定されます。
「TickStyle－Width」は目盛の線の太さを決定します。
② 次に、大きな目盛の間隔を埋める小さな目盛を設定します。これは、TickMinorプロパティを使用します。TickMinorプロパティはChartStyleクラスを継承しており、このクラスのメンバプロパティを使用します。
ここでは、次のプロパティの値を変更します。
| プロパティ | 設定値 | |
|---|---|---|
| Visible | True | |
| Offset | -11 | |
| Interval | 5 | |
| factor | 7 | |
| TickStyle | Width | 1 |
各プロパティの役割はTickMajorプロパティと同じで、それぞれ棒線の長さや位置、太さなどを設定します。
ここでは、大きな目盛よりも少し短く細い線で、4等分になる間隔で線を設定します。
ポインタ（針）の設定
目盛が出来上がったら、今度はポインタを設定します。これは、GaugePointerクラスのメンバプロパティを使用します。
プロパティウィンドウのPointerプロパティをクリックして展開し、次のプロパティを設定します。
| プロパティ | 設定値 | |
|---|---|---|
| Length | 0.5 | |
| Width | 8 | |
| Offset | 0 | |
| PointerStyle | Fill Color | Yellow |
「Length」プロパティはポインタの長さを設定します。「Width」はポインタの幅、「Offset」は縦方向の位置、「PointerStyle－Fill Color」はポインタの塗りつぶし色を設定します。
また、「Shape」プロパティを使用するとポインタの形状を変えることができます。今回は、デフォルトの三角形のままを使用しますので、プロパティ値は「tri」のままにしておきます。
