コードによるタイマー処理
Webページが出来上がったら、コードタイマー処理を作成します。
タイマーの作成
この処理は、「System.Windows.Threading」名前空間の「DispatcherTimer」クラスを使用するので「System.Windows.Threading」名前空間をインポートし、「DispatcherTimer」クラスのインスタンスをモジュールレベル変数で作成しておきます。
Imports System.Windows.Threading
Partial Public Class MainPage
Inherits UserControl
Private WithEvents timer As New DispatcherTimer()
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#ではイベントハンドラを作成しておきます。
Public Sub New()
InitializeComponent()
Timer.Interval = New TimeSpan(0, 0, 0, 0, 1000)
End Sub
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に設定値を表示します。
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
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メソッドを実行します。
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
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メソッドを実行します。
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
private void button1_Click(object sender, RoutedEventArgs e)
{
timer.Start();
}
private void button2_Click(object sender, RoutedEventArgs e)
{
timer.Stop();
}
<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コントロールはアイデア次第で色々な入力インターフェイスに使用できるコントロールと言えます。
参考文献
関連記事
製品情報
