windows phone 第一站:时钟

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

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

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

时钟案例的重点就是DoubleAnimation,

<DoubleAnimation x:Name="HourAnimation"
Storyboard.TargetName="HourHandTransform"
Storyboard.TargetProperty="Angle"
Duration="12:0:0" RepeatBehavior="Forever" To="360" />

但是在这个案例中我还了解到了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();
        }
结果:

作者: 61Mobile,参考地址: http://www.61ic.com/Mobile/WindowsPhone/201103/30098.html 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值