Silverlight是微软一个跨浏览器、跨客户平台的技术，能够设计、开发和发布有多媒体体验与富交互(RIA)的网络交互程序。
最近在花一部分时间学习Silverlight，虽然有时会遇到一些莫名其妙的错误，但是总的感觉还可以，它给我们带来的Rich Application真的很棒。值得一学！
我会将我学习到的成果分享给大家，希望能对大家有帮助，也希望和大家一起学习Sliverlight！
废话少说，今天带来的是用Silverlight作一个小的网页时钟。先看看最终的效果：
制作过程：
创建silverlight工程就不说了，直接说正题。
首先在页面中定义一个Canvas
Code
<Canvas x:Name="Show" W
idth="500" Height="600" Background="White">
接下来就是在其中创建我们的时钟界面,代码如下：
Code
<Ellipse Width="332" Height="322" Canvas.Left="81" Canvas.Top="119" Fill="#999b96" Opacity="0.4">Ellipse>
<Ellipse Stroke="#f8e11b" x:Name="outerCircle" Width="332" Height="322" Canvas.Left="70" Canvas.Top="105">
<Ellipse.Fill>
<LinearGradientBrush EndPoint="0.196,0.127" StartPoint="0.852,0.814">
<GradientStop Color="#f8e11b" Offset="0.788">GradientStop>
<GradientStop Color="#f3ecb3" Offset="0.995">GradientStop>
LinearGradientBrush>
Ellipse.Fill>
Ellipse>
<Ellipse Stroke="#eaa542" x:Name="inCircle" Width="271" Height="265" Canvas.Left="101" Canvas.Top="136">
<Ellipse.Fill>
<ImageBrush ImageSource="dog.jpg">ImageBrush>
Ellipse.Fill>
Ellipse>
<Ellipse Fill="#f8e11b" Stroke="#7ebf25" StrokeThickness="7" Width="30" Height="30" Canvas.Left="224" Canvas.Top="
250">Ellipse>
<Path x:Name="SecendHand" Stretch="Fill" Stroke="#FF0000" StrokeThickness="5" Width="71" Height="54" Canvas.Left="149" Canvas.Top="279" Data="M252,242 L298,183" RenderTransformOrigin="1.287,-0.266">
<Path.RenderTransform>
<RotateTransform Angle="125" x:Name="SecendTransform">RotateTransform>
Path.RenderTransform>
Path>
<Path x:Name="MiniteHand" Stretch="Fill" Stroke="#008000" StrokeThickness="8" Width="71" Height="54" Canvas.Left="149" Canvas.Top="279" Data="M252,242 L298,183" RenderTransformOrigin="1.287,-0.266">
<Path.RenderTransform>
<RotateTransform Angle="125" x:Name="MiniteTransform">RotateTransform>
Path.RenderTransform>
Path>
<Path x:Name="HourHand" Stretch="Fill" Stroke="#7ca4ef" StrokeThickness="10" Width="71" Height="40" Canvas.Left="149" Canvas.Top="279" Data="M252,242 L298,183" RenderTransformOrigin="1.287,-0.266">
<Path.RenderTransform>
<RotateTransform Angle="116.5" x:Name="HourTransform">RotateTransform>
Path.RenderTransform>
Path>
我作了一些简单的说明，值得一提的是其中的元素布局很不好弄，大家可以使用Bland等工具。其中使用了path的Data属性来定义时钟指针的位置和形状。M代表指针的起始点的绝对位置，L表示绘制线条。Data属性就是从某一坐标到另一坐标间画一条直线。
Code
<Path.RenderTransform>
<RotateTransform Angle="125" x:Name="SecendTransform">RotateTransform>
Path.RenderTransform>
是后面添加动画所用到的。
按F5运行一下，就会看到上面的外观效果。
有了clock的外观，接下来就是要让指针动起来。这里添加了时钟指针的动画：
Code
<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation x:Name="hourAnimation" Storyboard.TargetName="HourTransform" Storyboard.TargetProperty="Angle" From="180" To="540" Duration="12:0:0" RepeatBehavior="Forever">DoubleAnimation>
<DoubleAnimation x:Name="minuteAnimation" Storyboard.TargetName="MiniteTransform" Storyboard.TargetProperty="Angle" From="180" To="540" Duration="1:0:0" RepeatBehavior="Forever">DoubleAnimation>
<DoubleAnimation x: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
public
Page()
{
InitializeComponent();
System.DateTime date=DateTime.Now;//
获取当前时间
//根据当前时间计算时针旋转的角度
float houra