ノブ型コントロールで数値を操作できる
Silverlightのカウントダウンタイマーアプリケーションを作る

ComponentOne Studio for SilverlightのC1Knobコントロールを使ったWebページの作成

　ComponentOne Studio for SilverlightのC1Knobコントロールは、カセットコンロのノブのような形状をしたコントロールで、ノブを回すことで数値の増減を行うことができます。今回はこのC1Knobコントロールと、.NET FrameworkクラスライブラリのDispatcherTimerクラスを組み合わせ、カウントダウンタイマーを持ったWebページを作成してみました。

はじめに

　Silverlightの特徴の1つは、アニメーションを使って視覚的に操作をすることができる点です。これにより、ユーザーはこれまでにない操作感で、Webページを操作できるようになりました。ComponentOne Studio for SilverlightのC1Knobコントロールは、カセットコンロのノブのような形状をしたコントロールで、ノブを回すことで数値の増減を行うことができます。マウスポインタをドラッグすることでノブを操作することができるため、ユーザーは手でノブを回すのと同じような感覚で、コントロールを操作できます。

　そこで、今回はこのC1Knobコントロールと、.NET FrameworkクラスライブラリのDispatcherTimerクラスを組み合わせ、カウントダウンタイマーを持ったWebページを作成してみました。

ノブをマウスでドラッグして回し、タイマー動作時間を設定する

Startボタンを押すと1秒ごとにカウントダウンを始める

対象読者

　Visual Basic/Visual C# 2008を使ってプログラムを作ったことのある人。また、SilverlightおよびXAMLに対する基礎的な知識が必要になります。

必要な環境

　Visual Basic 2008、Visual C# 2008、Visual Studio 2008でプログラムが作れる環境。また、Visual Studio 2008 Silverlight Tools 3.0をインストールしていることが必須条件です。なお、本プログラムはWindows Vista上で動作するVisual Studio 2008およびVisual Studio 2008 Silverlight Tools 3.0を使用して作成し、Intenet Explorer 8で動作確認を行っています。

コンポーネントのインストール

　ComponentOne Studio for Silverlightを使用する方は、Visual Studio、Visual Basic、Visual C#の開発環境にComponentOne Studio Enterprise 2010Jをインストールする必要があります。インストーラは、グレープシティのWebページからダウンロードできます。

　製品ページの［申込フォーム］をクリックし、グレープシティのWebサイトへ必要情報を登録すると、添付トライアルライセンスキーファイルとダウンロードサイトを記載したE-Mailが送られてきますので、ここからダウンロードします。制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。

ComponentOne Studio for SilverlightのC1Knobコントロールについて

　ComponentOne Studio for SilverlightのC1Knobコントロールは、ユーザーがポインタを回転して数値を選択できるコントロールです。音楽プレイヤーのボリュームつまみなど、ノブを回転させて数値を入力する処理などに最適です。

　「Maximum」「Minimum」プロパティでノブを動かした時の数値の範囲を設定し、「Value」プロパティに現在のノブの位置が格納されます。ノブそのものの動作範囲は、「StartAngle」「SweepAngle」の2つのプロパティで決定します。

　ちょっと分かりづらいのですが、ノブの実際の動作範囲とコントロールが返す値の範囲は別々に設定します。例えば、次のC1Knobコントロールは「0」から「120」までの値の範囲で数値の増減を行いますが、実際にノブが動作するのは12時位置を0度として時計回りに200度の位置を開始位置とし、270度の位置まで動作します。

<c1gauge:C1Knob x:Name="c1kb1" Width="200" Minimum="0" Maximum="120" StartAngle="200" 
                SweepAngle="270" InteractionMode="Drag">

ノブの動きと返してくる数値の範囲

　また、C1Knobコントロール単体では数値目盛りや目盛り線は付いていません。これらは、「C1GaugeLabel」「C1GaugeMark」クラスを使って設定します。目盛り線は、「DataTemplate」を使用してカスタマイズすることができます。

C1Knobコントロールの各要素（※ヘルプファイルから抜粋）

　また、C1Knobコントロールの動作を「InteractionMode」プロパティを使って設定することができます。設定値は「KnobInteractionMode列挙体」のメンバで、次の値を使うことができます。

InteractionModeのプロパティ

値	説明
Drag	ユーザーがドラッグすることでポインタが移動します。
Click	ユーザーがノブ内をクリックすることでポインタが移動します。
ClickOrDrag	ユーザーがノブ内をクリックするか、ポインタをドラッグすることでポインタが移動します。

　C1Knobコントロールのデフォルトのイベントは「ValueChanged」で、ノブを動かすとこのイベントハンドラが呼び出されます。