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

 

 
 
  1. View Code   
  2.  
  3. <phone:PhoneApplicationPage   
  4.     x:Class="PedroLamas.WP7.AnalogClock.MainPage" 
  5.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  6.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  7.     xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" 
  8.     xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" 
  9.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  10.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  11.     FontFamily="{StaticResource PhoneFontFamilyNormal}" 
  12.     FontSize="{StaticResource PhoneFontSizeNormal}" 
  13.     Foreground="{StaticResource PhoneForegroundBrush}" 
  14.     SupportedOrientations="Portrait" Orientation="Portrait" 
  15.     mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768" 
  16.     shell:SystemTray.IsVisible="True" 
  17.     Loaded="PhoneApplicationPage_Loaded"> 
  18.  
  19.     <!--LayoutRoot contains the root grid where all other page content is placed--> 
  20.     <Grid x:Name="LayoutRoot" Background="Transparent"> 
  21.         <Grid.RowDefinitions> 
  22.             <RowDefinition Height="Auto"/> 
  23.             <RowDefinition Height="*"/> 
  24.         </Grid.RowDefinitions> 
  25.  
  26.         <!--TitlePanel contains the name of the application and page title--> 
  27.         <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="24,24,0,12"> 
  28.             <TextBlock x:Name="PageTitle" Text="时钟" Margin="-3,-8,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> 
  29.         </StackPanel> 
  30.  
  31.         <!--ContentPanel - place additional content here--> 
  32.         <Grid x:Name="ContentGrid" Grid.Row="1"> 
  33.             <Grid Width="400" Height="400"> 
  34.                 <Ellipse x:Name="ClockFaceEllipse" Style="{StaticResource ClockFace}"> 
  35.                 </Ellipse> 
  36.                 <Canvas x:Name="ClockHandsCanvas"> 
  37.                     <Canvas.Resources> 
  38.                         <Storyboard x:Name="ClockStoryboard"> 
  39.                             <DoubleAnimation x:Name="HourAnimation" 
  40.                                              Storyboard.TargetName="HourHandTransform" 
  41.                                              Storyboard.TargetProperty ="Angle" 
  42.                                              Duration="12:0:0" RepeatBehavior="Forever" To="360" /> 
  43.                             <DoubleAnimation x:Name="MinuteAnimation" 
  44.                                              Storyboard.TargetName="MinuteHandTransform"   
  45.                                              Storyboard.TargetProperty="Angle" 
  46.                                              Duration="1:0:0" RepeatBehavior="Forever" To="360" /> 
  47.                             <DoubleAnimation x:Name="SecondAnimation" 
  48.                                              Storyboard.TargetName="SecondHandTransform"   
  49.                                              Storyboard.TargetProperty="Angle" 
  50.                                              Duration="0:1:0" RepeatBehavior="Forever" To="360" /> 
  51.                         </Storyboard> 
  52.                     </Canvas.Resources> 
  53.  
  54.                     <!--秒针--> 
  55.                     <Rectangle Width="4" Height="230" RadiusX="2" RadiusY="2" Style="{StaticResource ClockHand}" Canvas.Left="198" Canvas.Top="20"> 
  56.                         <Rectangle.RenderTransform> 
  57.                             <TransformGroup> 
  58.                                 <RotateTransform CenterX="2" CenterY="180" x:Name="SecondHandTransform" /> 
  59.                             </TransformGroup> 
  60.                         </Rectangle.RenderTransform> 
  61.                     </Rectangle> 
  62.  
  63.                     <!--分针--> 
  64.                     <Rectangle Width="8" Height="145" RadiusX="3" RadiusY="3" Style="{StaticResource ClockHand}" Canvas.Left="196" Canvas.Top="60"> 
  65.                         <Rectangle.RenderTransform> 
  66.                             <TransformGroup> 
  67.                                 <RotateTransform CenterX="4" CenterY="140" x:Name="MinuteHandTransform" /> 
  68.                             </TransformGroup> 
  69.                         </Rectangle.RenderTransform> 
  70.                     </Rectangle> 
  71.                       
  72.                     <!--时针--> 
  73.                     <Rectangle Width="10" Height="105" RadiusX="5" RadiusY="5" Style="{StaticResource ClockHand}" Canvas.Left="195" Canvas.Top="100"> 
  74.                         <Rectangle.RenderTransform> 
  75.                             <TransformGroup> 
  76.                                 <RotateTransform CenterX="5" CenterY="100" x:Name="HourHandTransform" /> 
  77.                             </TransformGroup> 
  78.                         </Rectangle.RenderTransform> 
  79.                     </Rectangle> 
  80.                     <Ellipse Width="10" Height="10" Style="{StaticResource ClockCenter}" Canvas.Left="195" Canvas.Top="195" /> 
  81.                 </Canvas> 
  82.             </Grid> 
  83.         </Grid> 
  84.     </Grid> 
  85. </phone:PhoneApplicationPage> 

MainPage.xaml.cs

 

 
 
  1. View Code   
  2.  
  3. using System;  
  4. using System.Collections.Generic;  
  5. using System.Linq;  
  6. using System.Net;  
  7. using System.Windows;  
  8. using System.Windows.Controls;  
  9. using System.Windows.Documents;  
  10. using System.Windows.Input;  
  11. using System.Windows.Media;  
  12. using System.Windows.Media.Animation;  
  13. using System.Windows.Shapes;  
  14. using Microsoft.Phone.Controls;  
  15.  
  16. namespace PedroLamas.WP7.AnalogClock  
  17. {  
  18.     public partial class MainPage : PhoneApplicationPage  
  19.     {  
  20.         public MainPage()  
  21.         {  
  22.             InitializeComponent();  
  23.         }  
  24.  
  25.         private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)  
  26.         {  
  27.             var now = DateTime.Now;  
  28.             //计算角度  
  29.             //时  
  30.             double hourAngle = ((float)now.Hour) / 12 * 360 + now.Minute / 2;  
  31.             //分  
  32.             double minuteAngle = ((float)now.Minute) / 60 * 360 + now.Second / 10;  
  33.             //秒  
  34.             double secondAngle = ((float)now.Second) / 60 * 360;  
  35.  
  36.             HourAnimation.From = hourAngle;  
  37.             HourAnimation.To = hourAngle + 360;  
  38.  
  39.             MinuteAnimation.From = minuteAngle;  
  40.             MinuteAnimation.To = minuteAngle + 360;  
  41.  
  42.             SecondAnimation.From = secondAngle;  
  43.             SecondAnimation.To = secondAngle + 360;  
  44.  
  45.             ClockStoryboard.Begin();//启动与此 Storyboard 关联的那组动画  
  46.         }  
  47.     }  

 

本文转自linzheng 51CTO博客,原文链接:http://blog.51cto.com/linzheng/1079211



相关文章
|
5月前
|
消息中间件 C++ Windows
02 MFC - Windows 编程模型
02 MFC - Windows 编程模型
22 0
|
6月前
|
监控 编译器 API
[笔记]Windows核心编程《二十二》注入DLL和拦截API(一)
[笔记]Windows核心编程《二十二》注入DLL和拦截API
137 0
|
1月前
|
弹性计算 安全 数据安全/隐私保护
远程桌面连接Windows实例,提示“为安全考虑,已锁定该用户账户,原因是登录尝试或密码更改尝试过多”错误解决方案
远程桌面连接Windows实例,提示“为安全考虑,已锁定该用户账户,原因是登录尝试或密码更改尝试过多”错误解决方案
136 0
|
2月前
|
Windows
火山中文编程 -- 第一个windows程序
火山中文编程 -- 第一个windows程序
11 0
|
2月前
|
编译器 API Windows
windows编程基础
windows编程基础
12 0
|
2月前
|
Windows
win32编程 -- windows绘图操作
win32编程 -- windows绘图操作
18 0
|
6月前
|
C++ Windows
[笔记]Windows核心编程《番外篇》几种常见的执行命令行方法
[笔记]Windows核心编程《番外篇》几种常见的执行命令行方法
|
2月前
|
弹性计算 编解码 监控
ECS实例问题之ECS实例无法选择Windows操作系统如何解决
ECS实例指的是在阿里云ECS服务中创建的虚拟计算环境,用户可在此环境中运行应用程序和服务;本合集将介绍ECS实例的创建、管理、监控和维护流程,及常见问题处理方法,助力用户保障实例的稳定运行。
|
3月前
|
弹性计算 Windows
Windows系统的ECS实例如何配置RAID10
Windows系统的ECS实例如何配置RAID10
|
3月前
|
网络协议 Linux C语言
005.在Windows下编程让效率起飞
windows开发Linux方式: 先用编辑器编写源代码 然后进入Linux 系统,使用gcc编译器(后面会讲),对源代码进行编译运行。 熟练后推荐使用VS2019 开发Linux C++ 程序 将自己的Ip地址设为静态IP
38 1