Windows Phone 7 アナログクロックを作ってみました

アナログ時計を作ろう! (プログラミングの知識がある方向け)

を見ながら、Windows Phone アナログクロックを作ってみました。

３０分ぐらいで、できてしまいました。

ストーリーボードで時計の秒針を描画しているので、秒針がとても滑らかに動きます。

解説ページのおわりの部分に、「このアナログ時計は、針を動かす部分は XAML に全て任せてしまう作りになっています。Windows Phone アプリケーションの開発では、こういった発想、閃きが大切になってくるのではないでしょうか。」とコメントしてありますが、その通りですね。XAML をいかに使いこなせるかが、すごく重要ですね。

それから、今回のアナログクロックを実機で動作させてみたところ、いったん別のアプリを起動して、もとのアナログクロックに制御を戻すと、時間がずれてしまう問題があることがわかりました。この原因は、他のアプリケーションに切り替わってDeactivate されると、ストーリーボードの更新が停止するためです。その後、Activate されて制御が戻ると、ストーリーボードの時計が止まったところから、描画が再開されるため、時間がずれたまま時計が表示されてしまいます。

対応としては、Windows Phone に画面制御が戻った段階で、LayoutUpdated イベントが発生しますので、そこでもう一度クロックをセットしなおしてあげればよいと思います。コードはつぎのようになります。

using System;
using Microsoft.Phone.Controls;

namespace ClaudiaAnanogClock
{
    public partial class MainPage : PhoneApplicationPage
    {
        // コンストラクター
        public MainPage()
        {
            InitializeComponent();
        }

        private void PhoneApplicationPage_Loaded(object sender, System.Windows.RoutedEventArgs e)
        {
            SecondMove.Begin();
            MinutesMove.Begin();
            HourMove.Begin();
        }

        private void PhoneApplicationPage_LayoutUpdated(object sender, EventArgs e)
        {
            SetClock();
        }

        private void SetClock()
        {
            int second = DateTime.Now.Second;
            SecondMove.Seek(new TimeSpan(0, 0, second));
            int minutes = DateTime.Now.Minute;
            MinutesMove.Seek(new TimeSpan(0, minutes, second));
            int hour = DateTime.Now.Hour;
            HourMove.Seek(new TimeSpan(hour, minutes, second));
        }
    }
}