一起學Windows phone7開發（五.一個時鐘的例子）

Express blend工具是開發silverlight Ui的重要工具，在這裡有一個從silverlight移植過來的時鐘小例子可以看出在Phone7上這個工具一樣也很重要並且可以提高開發效率。

一．在blend工具中，可以用Ellipse繪製錶盤,通過在property中使用漸層色來產生立體效果。還可以能過gradient工具來調整漸層色。

二．用Ellipse工具繪製錶針軸，並設定圓的strokethickness來改變線的粗細。

三．用Rectangle工具來繪製三個錶針，並放好位置。

四．增加動畫效果

<Storyboard x:Name="clockStoryboard">

 

            <!-- This animation targets the hour hand transform -->

            <DoubleAnimation x:Name="hourAnimation"

      Storyboard.TargetName="HourHandTransform"

      Storyboard.TargetProperty="Angle"

      Duration="12:0:0" RepeatBehavior="Forever" To="360" />

 

            <!-- This animation targets the minute hand transform -->

            <DoubleAnimation x:Name="minuteAnimation"

      Storyboard.TargetName="MinuteHandTransform"

      Storyboard.TargetProperty="Angle"

      Duration="1:0:0" RepeatBehavior="Forever" To="360" />

 

            <!-- This animation targets the second hand transform -->

            <DoubleAnimation x:Name="secondAnimation"

      Storyboard.TargetName="SecondHandTransform"

      Storyboard.TargetProperty="Angle"

      Duration="0:1:0" RepeatBehavior="Forever" To="360" />

        </Storyboard>

 

這時運行一下，已經可以看到錶針在走了。

  

五．控製表針行為語句

void MainPage_Loaded(object sender, RoutedEventArgs e)

        {

            // The current date and time.

            System.DateTime currentDate = DateTime.Now;

 

            // Find the appropriate angle (in degrees) for the hour hand

            // based on the current time.

            double hourangle = (((float)currentDate.Hour) / 12) * 360 + currentDate.Minute / 2;

 

 

            // The same as for the minute angle.

            double minangle = (((float)currentDate.Minute) / 60) * 360;

 

            // The same for the second angle.

            double secangle = (((float)currentDate.Second) / 60) * 360;

 

            // Set the beginning of the animation (From property) to the angle

            // corresponging to the current time.

            hourAnimation.From = hourangle;

 

            // Set the end of the animation (To property)to the angle

            // corresponding to the current time PLUS 360 degrees. Thus, the

            // animation will end after the clock hand moves around the clock

            // once. Note: The RepeatBehavior property of the animation is set

            // to "Forever" so the animation will begin again as soon as it completes.

            hourAnimation.To = hourangle + 360;

 

            // Same as with the hour animation.

            minuteAnimation.From = minangle;

            minuteAnimation.To = minangle + 360;

 

            // Same as with the hour animation.

            secondAnimation.From = secangle;

            secondAnimation.To = secangle + 360;

 

            this.clockStoryboard.Begin();

        }

 

原始碼：

/Files/randylee/MyClock.rar