Silverlight开发实践－－My Silverlight Clock

核心提示：Silverlight是微软一个跨浏览器、跨客户平台的技术，能够设计、开发和发布有多媒体体验与富交互(RIA)的网络交互程序，Silverlight开发实践－－My Silverlight Clock，最近在花一部分时间学习Silverlight，虽然有时会遇到一些莫名其妙的错误，先看看最终的效果：制作过程：创建sil

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

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

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

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

制作过程：

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

首先在页面中定义一个Canvas

<Canvas x:Name="Show" Width="500" Height="600" Background="White">

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

<!--时钟阴影-->
　　　　　　　 <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>