Windows Phone 7 时钟实例编程

 

 

实例中Silverlight相关控件的介绍：

1、DoubleAnimation 在指定的 Duration 内使用线性内插对两个目标值之间的 Double 值进行动画处理。

（1）XAML 语法
<DoubleAnimation .../>
（2）说明

动画在一段时间内更新属性值。动画的效果可能十分微小，例如将 Shape 对象左右移动几个像素；也可能十分显著，例如将对象放

大到其原始大小的 200 倍，同时对其进行旋转并更改其颜色。若要创建动画，请将动画与对象的属性值关联。

DoubleAnimation 对象可创建两个目标值之间的过渡。若要设置目标值，请使用对象的 From、To 和 By 属性。下表概括了如何将

From、To 和 By 属性一起使用或单独使用来确定动画的目标值。

（3）属性
名称 说明
AutoReverse 获取或设置一个值，该值指示时间线在完成向前迭代后是否按相反的顺序播放。 （继承自 Timeline。）
BeginTime 获取或设置此 Timeline 将要开始的时间。 （继承自 Timeline。）
By 获取或设置动画更改其起始值时所依据的总量。
Dispatcher 获取与此对象关联的 Dispatcher。 （继承自 DependencyObject。）
Duration 获取或设置此时间线播放的时间长度，而不是计数重复。 （继承自 Timeline。）
FillBehavior 获取或设置一个值，该值指定动画在活动周期结束后的行为方式。 （继承自 Timeline。）
From 获取或设置动画的起始值。
RepeatBehavior 获取或设置此时间线的重复行为。 （继承自 Timeline。）
SpeedRatio 获取或设置此 Timeline 的时间相对于其父级的前进速率。 （继承自 Timeline。）
To 获取或设置动画的结束值。

2、Storyboard 通过时间线控制动画，并为其子动画提供对象和属性目标信息。

（1）XAML 语法
<Storyboard ...>
oneOrMoreChildTimelines
</Storyboard>

（2）说明

在对象加载或要启动、暂停、继续和停止动画时，可以使用 Storyboard 对象的交互式方法来自动启动演示图板。

Storyboard 是 Resources 属性唯一支持的资源类型。

（3）属性

名称 说明
AutoReverse 获取或设置一个值，该值指示时间线在完成向前迭代后是否按相反的顺序播放。 （继承自 Timeline。）
BeginTime 获取或设置此 Timeline 将要开始的时间。 （继承自 Timeline。）
Children 获取子 Timeline 对象的集合。
Dispatcher 获取与此对象关联的 Dispatcher。 （继承自 DependencyObject。）
Duration 获取或设置此时间线播放的时间长度，而不是计数重复。 （继承自 Timeline。）
FillBehavior 获取或设置一个值，该值指定动画在活动周期结束后的行为方式。 （继承自 Timeline。）
RepeatBehavior 获取或设置此时间线的重复行为。 （继承自 Timeline。）
SpeedRatio 获取或设置此 Timeline 的时间相对于其父级的前进速率。 （继承自 Timeline。）

附加属性
名称 说明
TargetName 获取或设置要进行动画处理的对象的名称。
TargetProperty 获取或设置应进行动画处理的属性的名称。

3、Rectangle属性RenderTransform 获取 UIElement 的最终呈现大小。 （继承自 UIElement。）

4、RotateTransform 在二维 x-y 坐标系内围绕指定点顺时针旋转对象。

RotateTransform 对象由以下属性定义：Angle 围绕点 CenterX,CenterY 将对象旋转指定的角度。

在使用 RotateTransform 时，变换将围绕点 (0,0) 旋转某个特定对象的坐标系。因此，根据对象的位置，对象可能不会就地（围绕其中心）旋转。例如，如果对象位于 x 轴上距 0 点 200 个单位的位置，则旋转 30 度可以让该对象沿着以原点为圆心、半径为 200 的圆摆动 30 度。若要就地旋转对象，请将 RotateTransform 的 CenterX 和 CenterY 值设置为对象的旋转中心。

可以使用 Canvas.Left 和 Canvas.Top 属性在 Canvas 上偏移对象的本地 (0,0) 位置，但不会将此视为变换；如果是变换，在这种情况下该对象会保留在它自己的本地 (0,0) 位置。

实例源代码

MainPage.xaml

 

View Code

<phone:PhoneApplicationPage
    x:Class="PedroLamas.WP7.AnalogClock.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    shell:SystemTray.IsVisible="True"
    Loaded="PhoneApplicationPage_Loaded">

    <!--LayoutRoot contains the root grid where all other page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="24,24,0,12">
            <TextBlock x:Name="PageTitle" Text="时钟" Margin="-3,-8,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentGrid" Grid.Row="1">
            <Grid Width="400" Height="400">
                <Ellipse x:Name="ClockFaceEllipse" Style="{StaticResource ClockFace}">
                </Ellipse>
                <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" Style="{StaticResource ClockHand}" Canvas.Left="198" Canvas.Top="20">
                        <Rectangle.RenderTransform>
                            <TransformGroup>
                                <RotateTransform CenterX="2" CenterY="180" x:Name="SecondHandTransform" />
                            </TransformGroup>
                        </Rectangle.RenderTransform>
                    </Rectangle>

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

                    <!--时针-->
                    <Rectangle Width="10" Height="105" RadiusX="5" RadiusY="5" Style="{StaticResource ClockHand}" Canvas.Left="195" Canvas.Top="100">
                        <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>
</phone:PhoneApplicationPage>

MainPage.xaml.cs

 

View Code

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;
using Microsoft.Phone.Controls;

namespace PedroLamas.WP7.AnalogClock
{
    public partial class MainPage : PhoneApplicationPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        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;

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