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

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

コードによるタイマー処理

　Webページが出来上がったら、コードタイマー処理を作成します。

タイマーの作成

　この処理は、「System.Windows.Threading」名前空間の「DispatcherTimer」クラスを使用するので「System.Windows.Threading」名前空間をインポートし、「DispatcherTimer」クラスのインスタンスをモジュールレベル変数で作成しておきます。

Visual Basic

Imports System.Windows.Threading

Partial Public Class MainPage
    Inherits UserControl

    Private WithEvents timer As New DispatcherTimer()

C#

using System.Windows.Threading;
namespace sl_timer_cs
{
    public partial class MainPage : UserControl
    {
        private DispatcherTimer timer = new DispatcherTimer();

　「DispatcherTimer」クラスは、指定した時間の間隔でイベントを発生するタイマーです。WindowsフォームのTimerコントロールと同様、Intervalプロパティでイベント発生の時間間隔を設定し、イベント「Tick」を発生させます。

　そこで、Webページのコンストラクタで、Intervalプロパティを1000ミリ秒に設定し、C#ではイベントハンドラを作成しておきます。

Visual Basic

Public Sub New()
	InitializeComponent()
    Timer.Interval = New TimeSpan(0, 0, 0, 0, 1000)
End Sub

C#

 public MainPage()
{
    InitializeComponent();
    timer.Interval = new TimeSpan(0, 0, 0, 0, 1000);
    timer.Tick += new EventHandler(timer_Tick);
}

ノブを動かした処理の作成

　次に、C1Knobコントロールのノブをユーザーが動かした時の処理を作成します。ユーザーがノブを動かすと、C1Knobコントロールには「ValueChanged」イベントが発生するので、このイベントハンドラでC1KnobコントロールのValueプロパティから設定値を取得します。ただし、Valueプロパティの値はdouble型なので一度整数に変換し、TextBlockに設定値を表示します。

Visual Basic

Private Sub c1kb1_ValueChanged(ByVal sender As System.Object, ByVal e As C1.Silverlight.PropertyChangedEventArgs(Of System.Double))
    Dim i As Int16
    i = c1kb1.Value
    text1.Text = i.ToString()
End Sub

C#

private void c1kb1_ValueChanged(object sender, C1.Silverlight.PropertyChangedEventArgs<double> e)
{
    Int16 i;
    i = (Int16)c1kb1.Value;
    text1.Text = i.ToString();
}

タイマー動作によるカウントダウン処理の作成

　次に、タイマーのTickイベントハンドラで、カウントダウンの処理を行います。

　まず、C1Knobコントロールの現在のノブの値をValueプロパティで取得して整数に変換します。そして、その数値から1を差し引き、C1KnobコントロールのValueプロパティに再設定します。こうすると、タイマーの動作に合わせてノブも自動的に数値が下がる方向に動くようになります。TextBlockにも数値を表示します。これで、1秒ごとにノブで設定した数値が1つずつ減っていきカウントダウンしていきます。

　もし、このノブの値が「0」になったら、タイマーを停止させます。これは、「DispatcherTimer」クラスのStopメソッドを実行します。

Visual Basic

Public Sub timer_Tick(ByVal sender As Object, ByVal e As EventArgs) Handles timer.Tick
	Dim i As Int16

    i = c1kb1.Value
    i -= 1
    If i < 0 Then
        timer.Stop()
    Else
        c1kb1.Value = i
        text1.Text = i.ToString
    End If
End Sub

C#

void timer_Tick(object sender, EventArgs e)
{
    Int16 i;

    i = (Int16)c1kb1.Value;
    i -= 1;
    if (i < 0)
    {
        timer.Stop();
    }
    else
    {
        c1kb1.Value = i;
        text1.Text = i.ToString();
    }
}

スタート・ストップボタンの処理

　2つのButtonコントロールでは、タイマーの停止と開始を実行します。これは、それぞれ「DispatcherTimer」クラスのStart・Stopメソッドを実行します。

Visual Basic

Private Sub button1_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
    timer.Start()
End Sub

Private Sub button2_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
    timer.Stop()
End Sub

C#

private void button1_Click(object sender, RoutedEventArgs e)
{
    timer.Start();
}

private void button2_Click(object sender, RoutedEventArgs e)
{
    timer.Stop();
}

xamlコード全文

<UserControl xmlns:c1gauge="clr-namespace:C1.Silverlight.Gauge;assembly=C1.Silverlight.Gauge"  x:Class="sl_timer_cs.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
    
    <Grid x:Name="LayoutRoot" ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="300"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        
        <!-- ゲージマークを表示するためのテンプレート -->
        <Grid.Resources>
            <DataTemplate x:Key="MyMarkTemplate">
                <Rectangle Width="4" Height="18" Fill="BlueViolet" Stroke="Black" StrokeThickness=".5"/>
            </DataTemplate>
        </Grid.Resources>

        <StackPanel Grid.Column="0">
            <c1gauge:C1Knob x:Name="c1kb1" Width="200" ValueChanged="c1kb1_ValueChanged"
                        VerticalAlignment="Center" Minimum="0" Maximum="120" StartAngle="200" 
                        SweepAngle="270" Margin="0,30,0,0" InteractionMode="Drag">

                <c1gauge:C1GaugeLabel Interval="20" Location="1.5" />
                <c1gauge:C1GaugeMark Interval="10" />
                <c1gauge:C1GaugeMark Interval="5" Location="1.15" />
            </c1gauge:C1Knob>

            <Button x:Name="button1" Click="button1_Click" Content="Start" Width="100" Margin="0,30,0,0" />
            <Button x:Name="button2" Click="button2_Click" Content="Stop" Width="100" Margin="0,30,0,0" />
        </StackPanel>

        <TextBlock Grid.Column="1" x:Name="text1" FontSize="70" Text="00" Margin="50,100,0,0">
    	    <TextBlock.Foreground>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                  <GradientStop Color="Yellow" Offset="0.0" />
                  <GradientStop Color="LimeGreen" Offset="1.0" />
                </LinearGradientBrush>
            </TextBlock.Foreground>
                     
            <TextBlock.Effect>
                <DropShadowEffect Color="Black"></DropShadowEffect>
            </TextBlock.Effect>
        </TextBlock>
    </Grid>
</UserControl>

まとめ

　アニメーションを使ったGUIは、ユーザーに直感的な操作を提示でき、「使いやすいページ」の印象を与えるとともに、新鮮で高度な技術を使ったページという印象も与えます。今回は、簡単なカウントダウンタイマーを作成しましたが、C1Knobコントロールはアイデア次第で色々な入力インターフェイスに使用できるコントロールと言えます。

参考文献

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

関連記事

• データをゲージ表示するSilverlightアプリケーションの作成
• コンテンツに反射表現を加えたSilverlightアプリケーションの作成

製品情報

• ComponentOne Studio