wp8小钟表

前台代码加布局   

 <!--LayoutRoot 是包含所有页面内容的根网格-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

 

        <!--TitlePanel 包含应用程序的名称和页标题-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Text="Horologe" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
            <TextBlock Text="小钟表" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - 在此处放置其他内容-->
        <Grid x:Name="ContentGrid" Grid.Row="1">
            <Grid Width="400" Height="400">
                <Ellipse x:Name="ClockFaceEllipse" Stroke="Black" StrokeThickness="10">
                </Ellipse>
                <Image Source="images/1.png"/>
                <Canvas x:Name="ClockHandsCanvas">
                    <Canvas.Resources>
                        <Storyboard x:Name="ClockStoryboard">
                            <DoubleAnimation x:Name="HourAnimation"
                                             Storyboard.TargetName="HourHandTransform"
                                             Storyboard.TargetProperty ="Angle"
                                             Duration="12:0:0" RepeatBehavior="Forever" To="360" />
                            <DoubleAnimation x:Name="MinuteAnimation"
                                             Storyboard.TargetName="MinuteHandTransform"
                                             Storyboard.TargetProperty="Angle"
                                             Duration="1:0:0" RepeatBehavior="Forever" To="360" />
                            <DoubleAnimation x:Name="SecondAnimation"
                                             Storyboard.TargetName="SecondHandTransform"
                                             Storyboard.TargetProperty="Angle"
                                             Duration="0:1:0" RepeatBehavior="Forever" To="360" />
                        </Storyboard>
                    </Canvas.Resources>

                    <!--秒针-->
                    <Rectangle Width="4" Height="230" RadiusX="2" RadiusY="2" Canvas.Left="198" Canvas.Top="20" Fill="Red">
                        <Rectangle.RenderTransform>
                            <TransformGroup>
                                <RotateTransform CenterX="2" CenterY="180" x:Name="SecondHandTransform" />
                            </TransformGroup>
                        </Rectangle.RenderTransform>
                    </Rectangle>

                    <!--分针-->
                    <Rectangle Width="8" Height="145" RadiusX="3" RadiusY="3"  Canvas.Left="196" Canvas.Top="60" Fill="Blue">
                        <Rectangle.RenderTransform>
                            <TransformGroup>
                                <RotateTransform CenterX="4" CenterY="140" x:Name="MinuteHandTransform" />
                            </TransformGroup>
                        </Rectangle.RenderTransform>
                    </Rectangle>

                    <!--时针-->
                    <Rectangle Width="10" Height="105" RadiusX="5" RadiusY="5"  Canvas.Left="195" Canvas.Top="100" Fill="Black">
                        <Rectangle.RenderTransform>
                            <TransformGroup>
                                <RotateTransform CenterX="5" CenterY="100" x:Name="HourHandTransform" />
                            </TransformGroup>
                        </Rectangle.RenderTransform>
                    </Rectangle>
                    <Ellipse Width="10" Height="10"  Canvas.Left="195" Canvas.Top="195" />
                </Canvas>
            </Grid>
        </Grid>
        <Canvas HorizontalAlignment="Left" Height="100" Margin="555,211,-175,0" Grid.Row="1" VerticalAlignment="Top" Width="100"/>
    </Grid>
   后台代码

  public partial class MainPage : PhoneApplicationPage
    {
        // 构造函数
        public MainPage()
        {
            InitializeComponent();
            load();
        }
        public void load()
        {
            var now = DateTime.Now;
            //计算角度
            //时
            double hourAngle = ((float)now.Hour) / 12 * 360 + now.Minute / 2;
            //分
            double minuteAngle = ((float)now.Minute) / 60 * 360 + now.Second / 10;
            //秒
            double secondAngle = ((float)now.Second) / 60 * 360;

            HourAnimation.From = hourAngle;
            HourAnimation.To = hourAngle + 360;

            MinuteAnimation.From = minuteAngle;
            MinuteAnimation.To = minuteAngle + 360;

            SecondAnimation.From = secondAngle;
            SecondAnimation.To = secondAngle + 360;

            ClockStoryboard.Begin();//启动与此 Storyboard 关联的那组动画
        }
    }