データをゲージ表示するSilverlightアプリケーションの作成

ComponentOne StudioのGauges for Silverlightを使ったWebページの作成

ゲージのイベント処理

　C1Knobコントロールのイベント処理を作成します。まず、2つの名前空間への参照を設定し、イベントハンドラを作成します。

Visual Basic

Imports C1.Silverlight
Imports C1.Silverlight.Gauge

    Private Sub c1kb1_ValueChanged(ByVal sender As System.Object, ByVal e As C1.Silverlight.PropertyChangedEventArgs(Of System.Double)) Handles c1kb1.ValueChanged
    
    End Sub
End Class

C#

using C1.Silverlight;
using C1.Silverlight.Gauge;

         private void c1kb1_ValueChanged(object sender, PropertyChangedEventArgs<double> e)
        {

        }
    }

　イベントハンドラの中身は、c1kb1コントロールのValueプロパティを参照し、TextBlockのTextプロパティと2つのC1RadialGaugeコントロールのValueプロパティに代入します。摂氏の値を華氏に変換し、TextBlockでは整数に変え、文字列にして代入します。

Visual Basic

Me.c1rg1.Value = Me.c1kb1.Value
Me.txt1.Text = "摂氏（C）" + Convert.ToInt16(Me.c1kb1.Value).ToString()
Me.c1rg2.Value = (Me.c1kb1.Value * 9 / 5) + 32
Me.txt2.Text = "華氏（F）" + (Convert.ToInt16(Me.c1kb1.Value * 9 / 5) + 32).ToString()

C#

this.c1rg1.Value = this.c1kb1.Value;
this.txt1.Text = "摂氏（C）" + Convert.ToInt16(this.c1kb1.Value).ToString();
this.c1rg2.Value = (this.c1kb1.Value * 9 / 5) + 32;
this.txt2.Text = "華氏（F）" + (Convert.ToInt16(this.c1kb1.Value * 9 / 5) + 32).ToString();

　以上で完成です。

まとめ

　数値データを視覚的に表示するにはグラフを使うのが一般的ですが、ゲージを使うとスピードメーターや時計をモチーフにしたデータ表示ができ、高い視覚効果を得ることができます。

　Gauges for Silverlightは、記述するコードがとても少ない割に動的にデータを見せることができ、塗りつぶしもXAMLならではのグラデーションを使うことができるので、立体的で綺麗なゲージを作成できます。

　XAMLは、使い慣れてくればどれも同じような記述方法なのでプログラミング言語よりも早く習得できます。ぜひ、Webページに導入してみてはいかがでしょう。

参考文献

• Microsoft Silverlightデベロッパーセンター

製品情報

• ComponentOne Studio