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



相关文章
|
10月前
|
消息中间件 C++ Windows
02 MFC - Windows 编程模型
02 MFC - Windows 编程模型
45 0
|
1月前
|
安全 Windows
【Azure云服务 Cloud Service】Cloud Service的实例(VM)中的服务描述Software Protection 与 Windows Defender, 如何设置Windows Defender Antivirus服务
【Azure云服务 Cloud Service】Cloud Service的实例(VM)中的服务描述Software Protection 与 Windows Defender, 如何设置Windows Defender Antivirus服务
|
24天前
|
数据库 Windows
超详细步骤解析:从零开始,手把手教你使用 Visual Studio 打造你的第一个 Windows Forms 应用程序,菜鸟也能轻松上手的编程入门指南来了!
【8月更文挑战第31天】创建你的第一个Windows Forms (WinForms) 应用程序是一个激动人心的过程,尤其适合编程新手。本指南将带你逐步完成一个简单WinForms 应用的开发。首先,在Visual Studio 中创建一个“Windows Forms App (.NET)”项目,命名为“我的第一个WinForms 应用”。接着,在空白窗体中添加一个按钮和一个标签控件,并设置按钮文本为“点击我”。然后,为按钮添加点击事件处理程序`button1_Click`,实现点击按钮后更新标签文本为“你好,你刚刚点击了按钮!”。
79 0
|
1月前
|
编译器 开发工具 C语言
解锁QtCreator跨界神技!Windows下轻松驾驭OpenCV动态库,让你的跨平台开发如虎添翼,秒变视觉编程大师!
【8月更文挑战第4天】QtCreator是一款强大的跨平台IDE,便于创建多平台应用。本教程教你如何在Windows环境下集成OpenCV库至Qt项目。首先,下载匹配MinGW的OpenCV预编译版并解压。接着,在QtCreator中新建或打开项目,并在.pro文件中添加OpenCV的头文件和库文件路径。确保编译器设置正确。随后编写测试代码,例如加载和显示图片,并进行编译运行。完成这些步骤后,你就能在QtCreator中利用OpenCV进行图像处理开发了。
123 6
|
1月前
|
安全 Windows
【Azure 云服务】当Windows系统发布新的安全漏洞后,如何查看Azure云服务(Cloud Service)的实例是否也更新了安全补丁呢?
【Azure 云服务】当Windows系统发布新的安全漏洞后,如何查看Azure云服务(Cloud Service)的实例是否也更新了安全补丁呢?
|
2月前
|
弹性计算 缓存 网络安全
云服务器 ECS产品使用问题之远程桌面无法连接到Windows实例,该如何排查
云服务器ECS(Elastic Compute Service)是各大云服务商阿里云提供的一种基础云计算服务,它允许用户租用云端计算资源来部署和运行各种应用程序。以下是一个关于如何使用ECS产品的综合指南。
|
3月前
|
Java C++
jni编程(windows+JDK11+clion)
jni编程(windows+JDK11+clion)
|
4月前
|
API C++ Windows
windows编程入门_链接错误的配置
windows编程入门_链接错误的配置
48 0
|
4月前
|
弹性计算 编解码 监控
ECS实例问题之ECS实例无法选择Windows操作系统如何解决
ECS实例指的是在阿里云ECS服务中创建的虚拟计算环境,用户可在此环境中运行应用程序和服务;本合集将介绍ECS实例的创建、管理、监控和维护流程,及常见问题处理方法,助力用户保障实例的稳定运行。
|
4月前
|
弹性计算 安全 数据安全/隐私保护
远程桌面连接Windows实例,提示“为安全考虑,已锁定该用户账户,原因是登录尝试或密码更改尝试过多”错误解决方案
远程桌面连接Windows实例,提示“为安全考虑,已锁定该用户账户,原因是登录尝试或密码更改尝试过多”错误解决方案
836 0