実行例

Microsoft ExpressionとVisual Studio 2008を駆使して、Silverlightデジタル時計を作ってみたいと思います。Visual Studio 2008だけでも作れないことはないですが、デザインに凝ったアプリケーションを作るには、Expressionは必須なのでぜひ準備しましょう。

参考：　チュートリアル : Silverlightによる時計の作成

↑こちらは、Microsoftのアナログ時計の例です。結構分かりやすかったです。

 

デザイン

まずは、Expressionで大まかなデザインを組み立てます。

 

1.　時計の枠を作る。

四角形ツールで長方形の枠を作ります。

設定は、

・名前：outerRimRectangle

・サイズ：172×87

・Fill：#FF939393～FFDEDEDEのグラデーション

・StrokeThickness:0

・Opacity：20%　半透明にするため

・RadiusX:10　丸みを持たせるため

・RadiusY:10

・グラデーションツール（左の中間にあるもの）でグラデーションの方向を斜めにする

 

2.　TextBlockで時計の文字パーツを作る。

TextBlockツールで、TextBlockを5つ作ってください。それぞれの設定を以下のようにして、画像のように移動させます。

時と分テキストの設定

・名前：それぞれ、hourTextBlock、minuteTextBlock

・サイズ：57×50

・Backgound：No blush

・Foregound:Black

・Opacity：40%　半透明にするため

・Text:00

・テキスト:Arial 48 bold

秒テキストの設定

・名前：secondTextBlock

・サイズ：30×22

・Backgound：No blush

・Foregound:Black

・Opacity：40%　半透明にするため

・Text:00

・テキスト:Arial 22 bold

コロンテキストの設定

・名前：colonTextBlock

・サイズ：46×50

・Backgound：No blush

・Foregound:Black

・Opacity：40%　半透明にするため

・Text: ：

・テキスト:Arial 22 bold

日付テキストの設定

・名前：dateTextBlock

・サイズ：142×25

・Backgound：No blush

・Foregound:Black

・Opacity：40%　半透明にするため

・Text: ：

・テキスト:Arial 22 bold italic

3.　テキストのアニメーションを入れる

やっぱり、Silverlightを使って何かを作ろうとするとアニメーションを入れたくなります。ここでは、簡単に、コロンと秒テキストが1秒ごとに点滅するアニメーションを入れようと思います。

　アニメーションは、XAMLにストーリーボード(Storyboard)を挿入します。この作業は、直接コードを書く必要があるので最初のうちはコピペでしのぐと良いでしょう。また、C#やVBなどで動的にアニメーションを変化させる（この時間になったらこんなアニメーションにする）こともできますが、ここでは触れません。

 

XAMLのタブに切り替えて、画像のように、次のコードを入れましょう。

<UserControl.Resources>
    <Storyboard x:Name="degitalClockStoryboard">
        <!-- コロンのアニメーション -->
        <DoubleAnimation x:Name="colonAnimation"
             Storyboard.TargetName="colonTextBlock" 
             Storyboard.TargetProperty="Opacity"
                 From="0.4" To="0.0" Duration="0:0:1.5"/>
            <!-- 秒のアニメーション -->
            <DoubleAnimation x:Name="secondAnimation"
             Storyboard.TargetName="secondTextBlock" 
             Storyboard.TargetProperty="Opacity"
                 From="0.4" To="0.0" Duration="0:0:1.5"/>    
        </Storyboard>
</UserControl.Resources>

特に、説明はしませんが、これで、２つの（コロンと、秒）のアニメーションが入っています。

　これで、デザイン部分の作成は終わりです。XAMLのコード量を見れば分かると思いますが、Visual Studioだけでやろうとすれば、これも全部入力しなくてはなりません；；

 

4.  Page.xaml.csに、時間の更新プログラム挿入

中身を次のように変更してください。ここでは、DispatcherTimerクラスで、1秒おきにテキストブロックの更新＋アニメーション(Storyboard)の実行をしています。コードが分からなければ、コピペでいいと思います。

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace HiSimpleDegitalClock
{
    public partial class Page : UserControl
    {
        private System.Windows.Threading.DispatcherTimer timer;

        public Page()
        {
            // 変数を初期化するときに必要となります
            InitializeComponent();

            // 時刻更新
            RefreshTimeText();

            // タイマー設定
            timer = new System.Windows.Threading.DispatcherTimer();
            timer.Interval = TimeSpan.FromSeconds(1);
            timer.Tick += new EventHandler(timer_Tick);
            timer.Start();
        }

        // タイマー動作
        private void timer_Tick(object sender, EventArgs e)
        {
            RefreshTimeText();
            degitalClockStoryboard.Begin();
        }

        // 時刻更新
        private void RefreshTimeText()
        {
            // 現時刻取得
            DateTime nowDate = DateTime.Now;

            // TextBlock更新
            hourTextBlock.Text = nowDate.Hour.ToString("d2");
            minuteTextBlock.Text = nowDate.Minute.ToString("d2");
            secondTextBlock.Text = nowDate.Second.ToString("d2");
            dateTextBlock.Text =
                nowDate.Year.ToString() + " / " +
                nowDate.Month.ToString("d2") + " / " +
                nowDate.Day.ToString("d2");
        }
    }
}

以上が完了したら、すべて保存し、Expressionの「ソリューションのテスト」か、Visual Studioの「デバッグ開始」で実行してみましょう。うまくいけばWEBブラウザが立ち上がり時計が表示されると思います。

完成品は、bin/debugフォルダかbin/releaseフォルダに入っています。中のhtmlを参考にホームページに貼り付けてみましょう。

ここからこのソースコードのダウンロードをすることができます。

トップの画像のようにちょっとアニメーションを追加していますが、基本的には同じです。

使用感など感想をもらえるとうれしいですｗ

C#版：　http://birthmarch.web.fc2.com/program/appli/SimpleDegitalClock.zip

write:2008/11/05

トップページへ