Silverlight开发实践--My Silverlight Clock (源)

Silverlight是微软一个跨浏览器、跨客户平台的技术，能够设计、开发和发布有多媒体体验与富交互(RIA)的网络交互程序。

最近在花一部分时间学习Silverlight，虽然有时会遇到一些莫名其妙的错误，但是总的感觉还可以，它给我们带来的Rich Application真的很棒。值得一学！

我会将我学习到的成果分享给大家，希望能对大家有帮助，也希望和大家一起学习Sliverlight！

废话少说，今天带来的是用Silverlight作一个小的网页时钟。先看看最终的效果：

制作过程：

创建silverlight工程就不说了，直接说正题。

首先在页面中定义一个Canvas

Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><Canvasx:Name="Show"Width="500"Height="600"Background="White">

接下来就是在其中创建我们的时钟界面,代码如下：

Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><!--时钟阴影-->
<EllipseWidth="332"Height="322"Canvas.Left="81"Canvas.Top="119"Fill="#999b96"Opacity="0.4"></Ellipse>
<EllipseStroke="#f8e11b"x:Name="outerCircle"Width="332"Height="322"Canvas.Left="70"Canvas.Top="105">
<Ellipse.Fill>
<LinearGradientBrushEndPoint="0.196,0.127"StartPoint="0.852,0.814">
<GradientStopColor="#f8e11b"Offset="0.788"></GradientStop>
<GradientStopColor="#f3ecb3"Offset="0.995"></GradientStop>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<!--添加内部圆滑，设置时钟背景图-->
<EllipseStroke="#eaa542"x:Name="inCircle"Width="271"Height="265"Canvas.Left="101"Canvas.Top="136">
<Ellipse.Fill>
<ImageBrushImageSource="dog.jpg"></ImageBrush>
</Ellipse.Fill>
</Ellipse>
<!--时钟指针圆环-->
<EllipseFill="#f8e11b"Stroke="#7ebf25"StrokeThickness="7"Width="30"Height="30"Canvas.Left="224"Canvas.Top="250"></Ellipse>
<!--添加秒针-->
<Pathx:Name="SecendHand"Stretch="Fill"Stroke="#FF0000"StrokeThickness="5"Width="71"Height="54"Canvas.Left="149"Canvas.Top="279"Data="M252,242L298,183"RenderTransformOrigin="1.287,-0.266">
<Path.RenderTransform>
<RotateTransformAngle="125"x:Name="SecendTransform"></RotateTransform>
</Path.RenderTransform>
</Path>
<!--添加分针-->
<Pathx:Name="MiniteHand"Stretch="Fill"Stroke="#008000"StrokeThickness="8"Width="71"Height="54"Canvas.Left="149"Canvas.Top="279"Data="M252,242L298,183"RenderTransformOrigin="1.287,-0.266">
<Path.RenderTransform>
<RotateTransformAngle="125"x:Name="MiniteTransform"></RotateTransform>
</Path.RenderTransform>
</Path>
<!--添加时针-->
<Pathx:Name="HourHand"Stretch="Fill"Stroke="#7ca4ef"StrokeThickness="10"Width="71"Height="40"Canvas.Left="149"Canvas.Top="279"Data="M252,242L298,183"RenderTransformOrigin="1.287,-0.266">
<Path.RenderTransform>
<RotateTransformAngle="116.5"x:Name="HourTransform"></RotateTransform>
</Path.RenderTransform>
</Path>

我作了一些简单的说明，值得一提的是其中的元素布局很不好弄，大家可以使用Blend等工具。其中使用了path的Data属性来定义时钟指针的位置和形状。M代表指针的起始点的绝对位置，L表示绘制线条。Data属性就是从某一坐标到另一坐标间画一条直线。

Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><Path.RenderTransform>
<RotateTransformAngle="125"x:Name="SecendTransform"></RotateTransform>
</Path.RenderTransform>

是后面添加动画所用到的。

按F5运行一下，就会看到上面的外观效果。

有了clock的外观，接下来就是要让指针动起来。这里添加了时钟指针的动画：

Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><Canvas.Triggers>
<EventTriggerRoutedEvent="Canvas.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<!--时针添加DoubleAnimation-->
<DoubleAnimationx:Name="hourAnimation"Storyboard.TargetName="HourTransform"Storyboard.TargetProperty="Angle"From="180"To="540"Duration="12:0:0"RepeatBehavior="Forever"></DoubleAnimation>
<!--分针添加DoubleAnimation-->
<DoubleAnimationx:Name="minuteAnimation"Storyboard.TargetName="MiniteTransform"Storyboard.TargetProperty="Angle"From="180"To="540"Duration="1:0:0"RepeatBehavior="Forever"></DoubleAnimation>
<!--秒针添加DoubleAnimation-->
<DoubleAnimationx:Name="secendAnimation"Storyboard.TargetName="SecendTransform"Storyboard.TargetProperty="Angle"From="180"To="540"Duration="0:1:0"RepeatBehavior="Forever"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Canvas.Triggers>

好了，这样一个Silverlight时钟基本上就完成了。剩下的就是通过编程来控制时钟的正确运行：

1.根据当前时间初始化时钟的位置；2.根据时间的变化控制指针运行的位置。

Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->publicPage()
{
InitializeComponent();
System.DateTimedate=DateTime.Now;//获取当前时间
//根据当前时间计算时针旋转的角度
floathourangle=(((float)date.Hour)/12)*360+date.Minute/2;
hourangle+=116.5F;
//根据当前时间计算分针旋转的角度
floatminangle=(((float)date.Minute)/60)*360;
minangle+=127;
//根据当前时间计算秒针旋转的角度
floatsecendangle=(((float)date.Minute)/60)*360;
secendangle+=127;
//设置动画的起始角度（From）和结束角度（To）
hourAnimation.From=hourangle;
hourAnimation.To=hourangle+360;
minuteAnimation.From=minangle;
minuteAnimation.To=minangle+360;
secendAnimation.From=secendangle;
secendAnimation.To=secendangle+360;
}

好了，这样就可以实现和系统时间同步的时钟了。

本人学silverlight也不是很长时间。欢迎大家多多指教！

源码：/Files/gaoweipeng/SLClock.rar