Silverlight 制作的时钟

下面是Silverlight制作的时钟演示：

代码简单介绍：

旋转一个对象的中心点是可以定义在这个对象之外的。这个演示中， 时针，分针，秒针，盘上的格子，就是把旋转的中心点定义在盘面的中心，然后定义旋转转换而实现的。

比如盘面的格子部分，我们在样式中有如下定义：

<Style x:Key="MarkersBig" TargetType="Rectangle">
    <Setter Property="RenderTransformOrigin" Value="0.5,12.8"/>
    <Setter Property="Fill" Value="White"/>
    <Setter Property="StrokeThickness" Value="0"/>
    <Setter Property="Width" Value="4"/>
    <Setter Property="Height" Value="10"/>
    <Setter Property="Canvas.Left" Value="158"/>
    <Setter Property="Canvas.Top" Value="32"/>

   Style>

在MainPage.xaml的定义就简单成下面方式：

<Rectangle x:Name="MarkersBig00" Style="{StaticResource MarkersBig}"/>
<Rectangle x:Name="MarkersBig30" Style="{StaticResource MarkersBig}" >
	<Rectangle.RenderTransform>
		<TransformGroup>
			<RotateTransform Angle="30"/>
		
   TransformGroup>
	 Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersBig60" Style="{StaticResource MarkersBig}" > <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="60"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> ............ <Rectangle x:Name="MarkersBig330" Style="{StaticResource MarkersBig}" > <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="330"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle>

巧妙利用故事板的Seek来实现按需播放，以秒针为例，MainPage.xaml 中我们的定义如下：

   
<Path x:Name="SecondHand" Data="M1.75,100 L-0.5,100 L-0.5,0 L2,0 z" Fill="Red" Canvas.Left="158.494" Stretch="Fill"
      RenderTransformOrigin="0.51,1.199" StrokeThickness="0" Canvas.Top="40.05" UseLayoutRounding="False" Height="100" 
      Width="2.888">
	<Path.RenderTransform>
		<TransformGroup>
			<RotateTransform Angle="0"/>
		
   TransformGroup>
	 Path.RenderTransform> <Path.Resources> <Storyboard x:Name="SecondsHandStoryboard" > <DoubleAnimation From="0" To="360" Duration="00:01:00" RepeatBehavior="Forever" Storyboard.TargetProperty="(Path.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)" Storyboard.TargetName="SecondHand"/>  Storyboard>  Path.Resources>  Path> 我们在 Canvas_Loaded 事件中只需要简单的如下代码就完成了秒针位置的播放。

SecondsHandStoryboard.Begin();
SecondsHandStoryboard.Seek(DateTime.Now.TimeOfDay);
原因何在呢？

SecondsHandStoryboard.Seek( 将故事板进行到指定的时间点位置，而我们 DoubleAnimation  故事板中，执行时间是1分钟，一直不间断执行。这样
DateTime.Now.TimeOfDay 的定位就是秒针正确的时间点。

代码：

App.xaml 中样式文件的定义：

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
             x:Class="SilverlightApp_Clock.App">
    <Application.Resources>
        
    	<Style x:Key="MarkersBig" TargetType="Rectangle">
    		<Setter Property="RenderTransformOrigin" Value="0.5,12.8"/>
    		<Setter Property="Fill" Value="White"/>
    		<Setter Property="StrokeThickness" Value="0"/>
    		<Setter Property="Width" Value="4"/>
    		<Setter Property="Height" Value="10"/>
			<Setter Property="Canvas.Left" Value="158"/>
			<Setter Property="Canvas.Top" Value="32"/>
    	
   Style>
    	<Style x:Key="MarkersSmall" TargetType="Rectangle">
    		<Setter Property="Width" Value="2"/>
    		<Setter Property="Height" Value="6"/>
    		<Setter Property="RenderTransformOrigin" Value="0.5,21.5"/>
    		<Setter Property="Fill" Value="White"/>
    		<Setter Property="StrokeThickness" Value="0"/>
			<Setter Property="Canvas.Left" Value="159"/>
			<Setter Property="Canvas.Top" Value="31"/>
    	 Style> <Style x:Key="TextBlockNum" TargetType="TextBlock"> <Setter Property="FontSize" Value="21.333"/> <Setter Property="FontWeight" Value="Bold"/> <Setter Property="TextAlignment" Value="Center"/> <Setter Property="Foreground" Value="White"/>  Style>  Application.Resources>  Application>

MainPage.xaml 文件内容 ：

<UserControl x:Class="SilverlightApp_Clock.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:DesignHeight="320" d:DesignWidth="320">
    <Canvas Loaded="Canvas_Loaded">
        
   
        <Ellipse Fill="Black" Height="300" Canvas.Left="10" Stroke="#FF3F4462" Canvas.Top="10" Width="300" StrokeThickness="15" />
    	
   
        <Ellipse Fill="Black" Height="30" Canvas.Left="145" Stroke="#FF0024F9" StrokeThickness="3" Canvas.Top="145" Width="30"/>
    	
   
        <Rectangle x:Name="MarkersBig00" Style="{StaticResource MarkersBig}"/>
		<Rectangle x:Name="MarkersBig30" Style="{StaticResource MarkersBig}" >
    		<Rectangle.RenderTransform>
    			<TransformGroup>
    				<RotateTransform Angle="30"/>
    			
   TransformGroup>
    		 Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersBig60" Style="{StaticResource MarkersBig}" > <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="60"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersBig90" Style="{StaticResource MarkersBig}" > <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="90"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersBig120" Style="{StaticResource MarkersBig}" > <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="120"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersBig150" Style="{StaticResource MarkersBig}" > <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="150"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersBig180" Style="{StaticResource MarkersBig}" > <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="180"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersBig210" Style="{StaticResource MarkersBig}" > <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="210"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersBig240" Style="{StaticResource MarkersBig}" > <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="240"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersBig270" Style="{StaticResource MarkersBig}" > <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="270"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersBig300" Style="{StaticResource MarkersBig}" > <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="300"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersBig330" Style="{StaticResource MarkersBig}" > <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="330"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle>   <Rectangle x:Name="MarkersSmall06" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="6"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall12" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="12"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall18" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="18"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall24" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="24"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall36" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="36"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall42" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="42"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall48" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="48"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall54" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="54"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall66" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="66"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall72" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="72"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall78" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="78"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall84" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="84"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall96" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="96"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall102" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="102"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall108" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="108"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall114" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="114"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall126" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="126"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall132" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="132"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall138" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="138"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall144" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="144"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall156" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="156"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall162" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="162"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall168" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="168"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall174" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="174"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall186" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="186"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall192" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="192"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall198" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="198"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall204" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="204"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall210" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="210"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall216" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="216"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall222" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="222"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall228" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="228"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall234" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="234"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall246" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="246"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall252" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="252"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall258" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="258"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall264" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="264"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall276" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="276"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall282" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="282"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall288" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="288"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall294" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="294"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall306" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="306"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall312" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="312"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall318" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="318"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall324" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="324"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall336" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="336"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall342" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="342"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall348" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="348"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle> <Rectangle x:Name="MarkersSmall354" Style="{StaticResource MarkersSmall}"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="354"/>  TransformGroup>  Rectangle.RenderTransform>  Rectangle>   <TextBlock x:Name="tb_1" Canvas.Left="207" Canvas.Top="64" Style="{StaticResource TextBlockNum}">1 TextBlock> <TextBlock x:Name="tb_2" Canvas.Left="241" Canvas.Top="102" Style="{StaticResource TextBlockNum}">2 TextBlock> <TextBlock x:Name="tb_3" Canvas.Left="253" Canvas.Top="145" Style="{StaticResource TextBlockNum}">3 TextBlock> <TextBlock x:Name="tb_4" Canvas.Left="240" Canvas.Top="194" Style="{StaticResource TextBlockNum}">4 TextBlock> <TextBlock x:Name="tb_5" Canvas.Left="205" Canvas.Top="227" Style="{StaticResource TextBlockNum}">5 TextBlock> <TextBlock x:Name="tb_6" Canvas.Left="153" Canvas.Top="238" Style="{StaticResource TextBlockNum}">6 TextBlock> <TextBlock x:Name="tb_7" Canvas.Left="106" Canvas.Top="227" Style="{StaticResource TextBlockNum}">7 TextBlock> <TextBlock x:Name="tb_8" Canvas.Left="71" Canvas.Top="194" Style="{StaticResource TextBlockNum}">8 TextBlock> <TextBlock x:Name="tb_9" Canvas.Left="54" Canvas.Top="145" Style="{StaticResource TextBlockNum}">9 TextBlock> <TextBlock x:Name="tb_10" Canvas.Left="64" Canvas.Top="96" Style="{StaticResource TextBlockNum}">10 TextBlock> <TextBlock x:Name="tb_11" Canvas.Left="99" Canvas.Top="63" Style="{StaticResource TextBlockNum}">11 TextBlock> <TextBlock x:Name="tb_12" Canvas.Left="145" Canvas.Top="50" Style="{StaticResource TextBlockNum}">12 TextBlock>   <TextBlock x:Name="tb_YearMonthDay" Height="19" Canvas.Left="123" TextWrapping="Wrap" Text="2010-01-20" Canvas.Top="204" Width="74" Style="{StaticResource TextBlockNum}" FontSize="10.667"/>   <Path x:Name="SecondHand" Data="M1.75,100 L-0.5,100 L-0.5,0 L2,0 z" Fill="Red" Canvas.Left="158.494" Stretch="Fill" RenderTransformOrigin="0.51,1.199" StrokeThickness="0" Canvas.Top="40.05" UseLayoutRounding="False" Height="100" Width="2.888"> <Path.RenderTransform> <TransformGroup> <RotateTransform Angle="0"/>  TransformGroup>  Path.RenderTransform> <Path.Resources> <Storyboard x:Name="SecondsHandStoryboard" > <DoubleAnimation From="0" To="360" Duration="00:01:00" RepeatBehavior="Forever" Storyboard.TargetProperty="(Path.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)" Storyboard.TargetName="SecondHand"/>  Storyboard>  Path.Resources>  Path>   <Path x:Name="MinuteHand" Data="M3.8847754,100.055 L-1.3659742,100.055 L-0.5036189,40.723522 L2.4733605,40.545193 z" Fill="#FFB9DA12" Canvas.Left="157.238" RenderTransformOrigin="0.545,1.333" Stretch="Fill" StrokeThickness="0" Canvas.Top="80.486" UseLayoutRounding="False" Height="59.511" Width="5.25"> <Path.RenderTransform> <TransformGroup> <RotateTransform Angle="30"/>  TransformGroup>  Path.RenderTransform> <Path.Resources> <Storyboard x:Name="MinuteHandStoryboard" > <DoubleAnimation From="0" To="360" Duration="01:00:00" RepeatBehavior="Forever" Storyboard.TargetProperty="(Path.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)" Storyboard.TargetName="MinuteHand"/>  Storyboard>  Path.Resources>  Path>   <Path x:Name="HourHand" Data="M3.8847754,100.055 L-1.3659742,100.055 L-0.62599868,41.085041 L2.9391243,41.085041 z" Fill="#FFB9DA12" Canvas.Left="156.393" RenderTransformOrigin="0.459,1.536" Stretch="Fill" StrokeThickness="0" Canvas.Top="102.667" UseLayoutRounding="False" Height="37.333" Width="7.855"> <Path.RenderTransform> <TransformGroup> <RotateTransform Angle="0"/>  TransformGroup>  Path.RenderTransform> <Path.Resources> <Storyboard x:Name="HourHandStoryboard" > <DoubleAnimation From="0" To="360" Duration="12:00:00" RepeatBehavior="Forever" Storyboard.TargetProperty="(Path.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)" Storyboard.TargetName="HourHand"/>  Storyboard>  Path.Resources>  Path>  Canvas>  UserControl>

MainPage.xaml.cs 文件内容：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverlightApp_Clock
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }


        private void Canvas_Loaded(object sender, RoutedEventArgs e)
        {
            DateTime dt = DateTime.Now;
            this.tb_YearMonthDay.Text = dt.ToString("yyyy-MM-dd");

            SecondsHandStoryboard.Begin();
            SecondsHandStoryboard.Seek(dt.TimeOfDay);
            MinuteHandStoryboard.Begin();
            MinuteHandStoryboard.Seek(dt.TimeOfDay);
            HourHandStoryboard.Begin();
            HourHandStoryboard.Seek(dt.TimeOfDay);
        }
    }
}

参考资料：

Clock C#
http://silverlight.net/community/samples/details.aspx?__itemid=15784

Hybrid Clock for Microsoft Silverlight 2.0
http://www.alexanderbell.us/HybridClock.htm

Developing Silverlight Analog Clock - pattern oriented approach
http://www.silverlightshow.net/items/Developing-Silverlight-Analog-Clock-pattern-oriented-approach.aspx

Developing Silverlight AnalogClock – part 2 – Enhancing the view
http://www.silverlightshow.net/items/Developing-Silverlight-AnalogClock-part-2-Enhancing-the-view.aspx