现在的位置: 首页 > 综合 > 正文

Silverlight 制作的时钟

2013年10月05日 ⁄ 综合 ⁄ 共 10244字 ⁄ 字号 评论关闭

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

抱歉!评论已关闭.