目盛の数値ラベルの変更
せっかくなので、目盛の数字も変更してみましょう。これは、GaugeLabelクラスのメンバプロパティを使用します。ラベルの変更といえば、フォントや文字色の変更が主な操作になります。
プロパティウィンドウでLabelsプロパティをクリックして展開し、次のプロパティを設定します。
| プロパティ | 設定値 | |
|---|---|---|
| Label Style | ||
| Font Size | 12 | |
| Font Weight | 800 | |
| Fill Color | #FF6699 | |
「FontWeight」プロパティは、フォントの太さを決定します。
背景色のデザイン
最後に、ゲージの背景色を変更します。ここでは、グリーン系のグラデーションで塗りつぶします。
プロパティウィンドウの「Face－FaceStyle－Fill」プロパティを順番に展開し、「Fill」にある次のプロパティを設定します。
| プロパティ | 設定値 |
|---|---|
| ColorBegin | #009933 |
| ColorEnd | #99FF99 |
| LinearGradientAngle | 90 |
| Type | LinearGradient |
これらのプロパティは、塗りつぶし色のグラデーションを設定します。「ColorBegin」「ColorEnd」プロパティはグラデーションの開始・終了色を設定します。「Type」プロパティはグラデーションの塗りつぶし方法を設定するプロパティで、「LinearGradient」は線形グラデーションを指定しています。「LinearGradientAngle」プロパティは、線形グラデーションの塗りつぶし方向を設定します。
これで、ゲージのカスタマイズは終了です。
出来上がったゲージ
スライダの作成
次に、ゲージを操作するスライダを作成します。
これで、スライダを動かすと連動してゲージのポインタが動作します。
- ツールボックスからC1Sliderコントロールをゲージの下側にドラッグ＆ドロップします。
- Widthプロパティを「500」に設定し、ゲージと同じ幅にします。
- スライダの動作範囲は、Max/Minプロパティで設定します。デフォルトではMaxプロパティが「100」に、Minプロパティが「0」に設定されていますので、今回はこのままデフォルト値を使用します。
- Visual Studioのデザイナを「ソース」に切り替え、C1Sliderタグの下に次のJavaScriptを入力します。このコードは、スライダの動作によって変化したValueプロパティの値を、ゲージのValueプロパティに代入します。
<script type="text/javascript">
$(document).ready(function () {
$("#<%= C1Slider1.ClientID %>").c1slider({
value: $("#<%= C1LinearGauge1.ClientID %>").c1lineargauge("option", "value"),
change: function (event, ui) {
$("#<%= C1LinearGauge1.ClientID %>").c1lineargauge("option", "value", ui.value);
}
});
});
</script>
スライダと連動するゲージが出来上がる
