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

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

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

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

Silverlight开发实践--网页时钟My Silverlight Clock_15925



制作过程:

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

首先在页面中定义一个Canvas
  1. <Canvas x:Name="Show" Width="500" Height="600" Background="White">
复制代码
接下来就是在其中创建我们的时钟界面,代码如下:
  1. <!--时钟阴影-->
  2.         <Ellipse Width="332" Height="322" Canvas.Left="81" Canvas.Top="119" Fill="#999b96" Opacity="0.4"></Ellipse>
  3.         <Ellipse Stroke="#f8e11b" x:Name="outerCircle" Width="332" Height="322" Canvas.Left="70" Canvas.Top="105">
  4.             <Ellipse.Fill>
  5.                 <LinearGradientBrush EndPoint="0.196,0.127" StartPoint="0.852,0.814">
  6.                     <GradientStop Color="#f8e11b" Offset="0.788"></GradientStop>
  7.                     <GradientStop Color="#f3ecb3" Offset="0.995"></GradientStop>
  8.                 </LinearGradientBrush> 
  9.             </Ellipse.Fill>
  10.         </Ellipse>
  11.         <!--添加内部圆滑,设置时钟背景图-->
  12.         <Ellipse Stroke="#eaa542" x:Name="inCircle" Width="271" Height="265" Canvas.Left="101" Canvas.Top="136">
  13.             <Ellipse.Fill>
  14.                 <ImageBrush ImageSource="dog.jpg"></ImageBrush>
  15.             </Ellipse.Fill>
  16.         </Ellipse>
  17.         <!--时钟指针圆环-->
  18.         <Ellipse Fill="#f8e11b" Stroke="#7ebf25" StrokeThickness="7" Width="30" Height="30" Canvas.Left="224" Canvas.Top="250"></Ellipse>
  19.         <!--添加秒针-->
  20.         <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">
  21.             <Path.RenderTransform>
  22.                 <RotateTransform Angle="125" x:Name="SecendTransform"></RotateTransform>
  23.             </Path.RenderTransform>
  24.         </Path>
  25.       <!--添加分针-->
  26.         <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">
  27.             <Path.RenderTransform>
  28.                 <RotateTransform Angle="125" x:Name="MiniteTransform"></RotateTransform>
  29.             </Path.RenderTransform>
  30.         </Path>
  31.       <!--添加时针-->
  32.         <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">
  33.         <Path.RenderTransform>
  34.             <RotateTransform Angle="116.5" x:Name="HourTransform"></RotateTransform>
  35.         </Path.RenderTransform>
  36.     </Path>
复制代码
我作了一些简单的说明,值得一提的是其中的元素布局很不好弄,大家可以使用Bland等工具。其中使用了path的Data属性来定义时钟指针的位置和形状。M代表指针的起始点的绝对位置,L表示绘制线条。Data属性就是从某一坐标到另一坐标间画一条直线。
  1. <Path.RenderTransform>
  2.                 <RotateTransform Angle="125" x:Name="SecendTransform"></RotateTransform>
  3.             </Path.RenderTransform>
复制代码
是后面添加动画所用到的。

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

有了clock的外观,接下来就是要让指针动起来。这里添加了时钟指针的动画:
  1. <Canvas.Triggers>
  2.             <EventTrigger RoutedEvent="Canvas.Loaded">
  3.                 <EventTrigger.Actions>
  4.                     <BeginStoryboard>
  5.                         <Storyboard>
  6. <!--时针添加DoubleAnimation-->
  7.                             <DoubleAnimation x:Name="hourAnimation" Storyboard.TargetName="HourTransform" Storyboard.TargetProperty="Angle" From="180" To="540" Duration="12:0:0" RepeatBehavior="Forever"></DoubleAnimation>
  8. <!--分针添加DoubleAnimation-->
  9.                             <DoubleAnimation x:Name="minuteAnimation" Storyboard.TargetName="MiniteTransform" Storyboard.TargetProperty="Angle" From="180" To="540" Duration="1:0:0" RepeatBehavior="Forever"></DoubleAnimation>
  10. <!--秒针添加DoubleAnimation-->
  11.                             <DoubleAnimation x:Name="secendAnimation" Storyboard.TargetName="SecendTransform" Storyboard.TargetProperty="Angle" From="180" To="540" Duration="0:1:0" RepeatBehavior="Forever"></DoubleAnimation>
  12.                         </Storyboard>
  13.                     </BeginStoryboard>
  14.                 </EventTrigger.Actions>
  15.             </EventTrigger>
  16.         </Canvas.Triggers>
复制代码
好了,这样一个Silverlight时钟基本上就完成了。剩下的就是通过编程来控制时钟的正确运行:

1.根据当前时间初始化时钟的位置;
2.根据时间的变化控制指针运行的位置。
  1. public Page()
  2.         {
  3.             InitializeComponent();
  4.             System.DateTime date=DateTime.Now;//获取当前时间
  5.             //根据当前时间计算时针旋转的角度
  6.             float hourangle = (((float)date.Hour) / 12) * 360 + date.Minute / 2;
  7.             hourangle += 116.5F;
  8.             //根据当前时间计算分针旋转的角度
  9.             float minangle = (((float)date.Minute) / 60) * 360;
  10.             minangle += 127;
  11.             //根据当前时间计算秒针旋转的角度
  12.             float secendangle = (((float)date.Minute) / 60) * 360;
  13.             secendangle += 127;
  14.             //设置动画的起始角度(From)和结束角度(To)
  15.             hourAnimation.From = hourangle;
  16.             hourAnimation.To = hourangle + 360;
  17.             minuteAnimation.From = minangle;
  18.             minuteAnimation.To = minangle + 360;
  19.             secendAnimation.From = secendangle;
  20.             secendAnimation.To = secendangle + 360;
  21.         }
复制代码
好了,这样就可以实现和系统时间同步的时钟了。

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

源码:
附件: 亲,您没有权限下载或查看附件喔:-) 马上登录注册吧!
附件: 亲,您没有权限下载或查看附件喔:-) 马上登录注册吧!
TOP

sss

sssssss
TOP

不錯,下載看看.
TOP

看下源码
TOP

好东西啊~~~
TOP

不错,支持一下楼主。。。
TOP