下面是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>