windows phone 第一站：时钟_时钟 wp8-优快云博客

本文链接：https://blog.youkuaiyun.com/xiaotanyu13/article/details/7525012

本文介绍了使用Windows Phone平台开发一款带有动态指针的时钟应用的过程。重点讲解了如何运用DoubleAnimation实现指针的旋转效果，并通过样式设置来美化界面元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学了wp开发，就想开发应用，于是网上搜了一下，发现时钟案例介绍的蛮多的，于是就决定是这个了。

时钟案例的重点就是DoubleAnimation，

但是在这个案例中我还了解到了style的用法（这个应该是这个应用的最大收获）

话不多说上代码：

<phone:PhoneApplicationPage.Resources>
        <Style x:Name="ClockFace" TargetType="Ellipse">
            <Setter Property="Width" Value="400"></Setter>
            <Setter Property="Height" Value="400"></Setter>
            <Setter Property="StrokeThickness" Value="9" />
        </Style>
        <Style x:Name="ClockHand" TargetType="Rectangle">
            <Setter Property="Stroke" Value="White"></Setter>
        </Style>
        <Style x:Name="ClockCenter" TargetType="Ellipse">
            <Setter Property="Stroke" Value="Red"></Setter>
            <Setter Property="Fill" Value="Blue" />
        </Style>
    </phone:PhoneApplicationPage.Resources>
    
    
    <!--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 x:Name="ApplicationTitle" Text="开发案例1" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Clock" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - 在此处放置其他内容-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid Width="400" Height="400">
                <Ellipse x:Name="ClockEllipse" Style="{StaticResource ClockFace}" Stroke="White" />
                <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>
                    
                    <!--seconde handler-->
                    <Rectangle Width="4" Height="230" RadiusX="2" RadiusY="2" Style="{StaticResource ClockHand}"
                               Canvas.Left="198" Canvas.Top="20" Fill="White">
                        <Rectangle.RenderTransform>
                            <TransformGroup>
                                <RotateTransform CenterX="2" CenterY="180" x:Name="SecondHandTransform" />
                            </TransformGroup>
                        </Rectangle.RenderTransform>
                    </Rectangle>
                    
                    <!--Minute-->
                    <Rectangle Width="8" Height="145" RadiusX="4" RadiusY="4" Style="{StaticResource ClockHand}"
                               Canvas.Left="196" Canvas.Top="60" Fill="White">
                        <Rectangle.RenderTransform>
                            <TransformGroup>
                                <RotateTransform CenterX="4" CenterY="140" x:Name="MinuteHandTransform" />
                            </TransformGroup>
                        </Rectangle.RenderTransform>
                    </Rectangle>
                    
                    <!--Hour-->
                    <Rectangle Width="10" Height="105" RadiusX="5" RadiusY="5" Style="{StaticResource ClockHand}"
                               Canvas.Left="195" Canvas.Top="100" Fill="White">
                        <Rectangle.RenderTransform>
                            <TransformGroup>
                                <RotateTransform CenterX="5" CenterY="100" x:Name="HourHandTransform" />
                            </TransformGroup>
                        </Rectangle.RenderTransform>
                    </Rectangle>
                    <Ellipse Width="10" Height="10" Style="{StaticResource ClockCenter}" Canvas.Left="195" Canvas.Top="195" />
                    
                </Canvas>
            </Grid>
        </Grid>
    </Grid>

MainPage.xaml.cs

 private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
        {
            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;

            this.ClockStoryboard.Begin();
        }

结果：