您的位置：首页 > 移动开发

Silverlight 制作的时钟

2010-01-21 18:05 495 查看

下面是Silverlight制作的时钟演示：

代码简单介绍：

旋转一个对象的中心点是可以定义在这个对象之外的。这个演示中，时针，分针，秒针，盘上的格子，就是把旋转的中心点定义在盘面的中心，然后定义旋转转换而实现的。
比如盘面的格子部分，我们在样式中有如下定义：

<Style x:Key="MarkersBig" TargetType="Rectangle">
<Setter Property="RenderTransformOrigin" Value="0.5,12.8"/>
<Setter Property="Fill" Value="White"/>
<Setter Property="StrokeThickness" Value="0"/>
<Setter Property="Width" Value="4"/>
<Setter Property="Height" Value="10"/>
<Setter Property="Canvas.Left" Value="158"/>
<Setter Property="Canvas.Top" Value="32"/>
Style>

在MainPage.xaml的定义就简单成下面方式：

<Rectangle x:Name="MarkersBig00" Style="{StaticResource MarkersBig}"/>
<Rectangle x:Name="MarkersBig30" Style="{StaticResource MarkersBig}" >
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="30"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersBig60" Style="{StaticResource MarkersBig}" >
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="60"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
............
<Rectangle x:Name="MarkersBig330" Style="{StaticResource MarkersBig}" >
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="330"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>

巧妙利用故事板的Seek来实现按需播放，以秒针为例，MainPage.xaml 中我们的定义如下：

<Path x:Name="SecondHand" Data="M1.75,100 L-0.5,100 L-0.5,0 L2,0 z" Fill="Red" Canvas.Left="158.494" Stretch="Fill"
RenderTransformOrigin="0.51,1.199" StrokeThickness="0" Canvas.Top="40.05" UseLayoutRounding="False" Height="100"
Width="2.888">
<Path.RenderTransform>
<TransformGroup>
<RotateTransform Angle="0"/>
TransformGroup>
Path.RenderTransform>
<Path.Resources>
<Storyboard x:Name="SecondsHandStoryboard"  >
<DoubleAnimation From="0" To="360" Duration="00:01:00" RepeatBehavior="Forever"
Storyboard.TargetProperty="(Path.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)"
Storyboard.TargetName="SecondHand"/>
Storyboard>
Path.Resources>
Path>
我们在 Canvas_Loaded 事件中只需要简单的如下代码就完成了秒针位置的播放。

SecondsHandStoryboard.Begin();
SecondsHandStoryboard.Seek(DateTime.Now.TimeOfDay);
原因何在呢？

SecondsHandStoryboard.Seek( 将故事板进行到指定的时间点位置，而我们 DoubleAnimation  故事板中，执行时间是1分钟，一直不间断执行。这样
DateTime.Now.TimeOfDay 的定位就是秒针正确的时间点。

代码：

App.xaml 中样式文件的定义：

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="SilverlightApp_Clock.App">
<Application.Resources>

<Style x:Key="MarkersBig" TargetType="Rectangle">
<Setter Property="RenderTransformOrigin" Value="0.5,12.8"/>
<Setter Property="Fill" Value="White"/>
<Setter Property="StrokeThickness" Value="0"/>
<Setter Property="Width" Value="4"/>
<Setter Property="Height" Value="10"/>
<Setter Property="Canvas.Left" Value="158"/>
<Setter Property="Canvas.Top" Value="32"/>
Style>
<Style x:Key="MarkersSmall" TargetType="Rectangle">
<Setter Property="Width" Value="2"/>
<Setter Property="Height" Value="6"/>
<Setter Property="RenderTransformOrigin" Value="0.5,21.5"/>
<Setter Property="Fill" Value="White"/>
<Setter Property="StrokeThickness" Value="0"/>
<Setter Property="Canvas.Left" Value="159"/>
<Setter Property="Canvas.Top" Value="31"/>
Style>
<Style x:Key="TextBlockNum" TargetType="TextBlock">
<Setter Property="FontSize" Value="21.333"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="TextAlignment" Value="Center"/>
<Setter Property="Foreground" Value="White"/>
Style>

Application.Resources>
Application>

MainPage.xaml 文件内容：

<UserControl x:Class="SilverlightApp_Clock.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="320" d:DesignWidth="320">
<Canvas Loaded="Canvas_Loaded">

<Ellipse Fill="Black" Height="300" Canvas.Left="10" Stroke="#FF3F4462" Canvas.Top="10" Width="300" StrokeThickness="15" />

<Ellipse Fill="Black" Height="30" Canvas.Left="145" Stroke="#FF0024F9" StrokeThickness="3" Canvas.Top="145" Width="30"/>

<Rectangle x:Name="MarkersBig00" Style="{StaticResource MarkersBig}"/>
<Rectangle x:Name="MarkersBig30" Style="{StaticResource MarkersBig}" >
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="30"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersBig60" Style="{StaticResource MarkersBig}" >
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="60"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersBig90" Style="{StaticResource MarkersBig}" >
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="90"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersBig120" Style="{StaticResource MarkersBig}" >
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="120"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersBig150" Style="{StaticResource MarkersBig}" >
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="150"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersBig180" Style="{StaticResource MarkersBig}" >
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="180"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersBig210" Style="{StaticResource MarkersBig}" >
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="210"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersBig240" Style="{StaticResource MarkersBig}" >
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="240"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersBig270" Style="{StaticResource MarkersBig}" >
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="270"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersBig300" Style="{StaticResource MarkersBig}" >
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="300"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersBig330" Style="{StaticResource MarkersBig}" >
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="330"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>

<Rectangle x:Name="MarkersSmall06" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="6"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall12" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="12"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall18" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="18"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall24" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="24"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall36" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="36"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall42" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="42"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall48" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="48"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall54" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="54"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall66" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="66"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>

<Rectangle x:Name="MarkersSmall72" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="72"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall78" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="78"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall84" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="84"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>

<Rectangle x:Name="MarkersSmall96" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="96"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall102" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="102"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall108" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="108"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall114" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="114"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall126" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="126"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall132" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="132"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall138" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="138"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall144" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="144"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall156" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="156"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall162" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="162"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall168" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="168"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall174" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="174"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall186" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="186"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall192" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="192"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall198" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="198"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall204" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="204"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall210" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="210"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall216" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="216"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall222" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="222"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall228" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="228"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall234" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="234"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall246" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="246"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall252" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="252"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall258" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="258"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall264" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="264"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall276" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="276"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall282" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="282"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall288" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="288"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall294" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="294"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall306" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="306"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall312" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="312"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall318" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="318"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall324" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="324"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall336" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="336"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall342" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="342"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall348" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="348"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>
<Rectangle x:Name="MarkersSmall354" Style="{StaticResource MarkersSmall}">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform Angle="354"/>
TransformGroup>
Rectangle.RenderTransform>
Rectangle>

<TextBlock x:Name="tb_1" Canvas.Left="207" Canvas.Top="64" Style="{StaticResource TextBlockNum}">1TextBlock>
<TextBlock x:Name="tb_2" Canvas.Left="241" Canvas.Top="102" Style="{StaticResource TextBlockNum}">2TextBlock>
<TextBlock x:Name="tb_3" Canvas.Left="253" Canvas.Top="145" Style="{StaticResource TextBlockNum}">3TextBlock>
<TextBlock x:Name="tb_4" Canvas.Left="240" Canvas.Top="194" Style="{StaticResource TextBlockNum}">4TextBlock>
<TextBlock x:Name="tb_5" Canvas.Left="205" Canvas.Top="227" Style="{StaticResource TextBlockNum}">5TextBlock>
<TextBlock x:Name="tb_6" Canvas.Left="153" Canvas.Top="238" Style="{StaticResource TextBlockNum}">6TextBlock>
<TextBlock x:Name="tb_7" Canvas.Left="106" Canvas.Top="227" Style="{StaticResource TextBlockNum}">7TextBlock>
<TextBlock x:Name="tb_8" Canvas.Left="71" Canvas.Top="194" Style="{StaticResource TextBlockNum}">8TextBlock>
<TextBlock x:Name="tb_9" Canvas.Left="54" Canvas.Top="145" Style="{StaticResource TextBlockNum}">9TextBlock>
<TextBlock x:Name="tb_10" Canvas.Left="64" Canvas.Top="96" Style="{StaticResource TextBlockNum}">10TextBlock>
<TextBlock x:Name="tb_11" Canvas.Left="99" Canvas.Top="63" Style="{StaticResource TextBlockNum}">11TextBlock>
<TextBlock x:Name="tb_12" Canvas.Left="145" Canvas.Top="50" Style="{StaticResource TextBlockNum}">12TextBlock>

<TextBlock x:Name="tb_YearMonthDay" Height="19" Canvas.Left="123" TextWrapping="Wrap" Text="2010-01-20" Canvas.Top="204" Width="74" Style="{StaticResource TextBlockNum}" FontSize="10.667"/>

<Path x:Name="SecondHand" Data="M1.75,100 L-0.5,100 L-0.5,0 L2,0 z" Fill="Red" Canvas.Left="158.494" Stretch="Fill"
RenderTransformOrigin="0.51,1.199" StrokeThickness="0" Canvas.Top="40.05" UseLayoutRounding="False" Height="100" Width="2.888">
<Path.RenderTransform>
<TransformGroup>
<RotateTransform Angle="0"/>
TransformGroup>
Path.RenderTransform>
<Path.Resources>
<Storyboard x:Name="SecondsHandStoryboard"  >
<DoubleAnimation From="0" To="360" Duration="00:01:00" RepeatBehavior="Forever"
Storyboard.TargetProperty="(Path.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)"
Storyboard.TargetName="SecondHand"/>
Storyboard>
Path.Resources>
Path>

<Path x:Name="MinuteHand" Data="M3.8847754,100.055 L-1.3659742,100.055 L-0.5036189,40.723522 L2.4733605,40.545193 z" Fill="#FFB9DA12" Canvas.Left="157.238" RenderTransformOrigin="0.545,1.333" Stretch="Fill" StrokeThickness="0" Canvas.Top="80.486" UseLayoutRounding="False" Height="59.511" Width="5.25">
<Path.RenderTransform>
<TransformGroup>
<RotateTransform Angle="30"/>
TransformGroup>
Path.RenderTransform>
<Path.Resources>
<Storyboard x:Name="MinuteHandStoryboard"  >
<DoubleAnimation From="0" To="360" Duration="01:00:00" RepeatBehavior="Forever"
Storyboard.TargetProperty="(Path.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)" Storyboard.TargetName="MinuteHand"/>
Storyboard>
Path.Resources>
Path>

<Path x:Name="HourHand" Data="M3.8847754,100.055 L-1.3659742,100.055 L-0.62599868,41.085041 L2.9391243,41.085041 z" Fill="#FFB9DA12" Canvas.Left="156.393" RenderTransformOrigin="0.459,1.536" Stretch="Fill" StrokeThickness="0" Canvas.Top="102.667" UseLayoutRounding="False" Height="37.333" Width="7.855">
<Path.RenderTransform>
<TransformGroup>
<RotateTransform Angle="0"/>
TransformGroup>
Path.RenderTransform>
<Path.Resources>
<Storyboard x:Name="HourHandStoryboard"  >
<DoubleAnimation From="0" To="360" Duration="12:00:00" RepeatBehavior="Forever"
Storyboard.TargetProperty="(Path.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)" Storyboard.TargetName="HourHand"/>
Storyboard>
Path.Resources>
Path>
Canvas>
UserControl>

MainPage.xaml.cs 文件内容：

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;

namespace SilverlightApp_Clock
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}

private void Canvas_Loaded(object sender, RoutedEventArgs e)
{
DateTime dt = DateTime.Now;
this.tb_YearMonthDay.Text = dt.ToString("yyyy-MM-dd");

SecondsHandStoryboard.Begin();
SecondsHandStoryboard.Seek(dt.TimeOfDay);
MinuteHandStoryboard.Begin();
MinuteHandStoryboard.Seek(dt.TimeOfDay);
HourHandStoryboard.Begin();
HourHandStoryboard.Seek(dt.TimeOfDay);
}
}
}

参考资料：

Clock C#

http://silverlight.net/community/samples/details.aspx?__itemid=15784

Hybrid Clock for Microsoft Silverlight 2.0

http://www.alexanderbell.us/HybridClock.htm

Developing Silverlight Analog Clock - pattern oriented approach

http://www.silverlightshow.net/items/Developing-Silverlight-Analog-Clock-pattern-oriented-approach.aspx

Developing Silverlight AnalogClock – part 2 – Enhancing the view

http://www.silverlightshow.net/items/Developing-Silverlight-AnalogClock-part-2-Enhancing-the-view.aspx

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： silverlight setter path application microsoft class

相关文章推荐

新的分享

章节导航