Silverlight开发实践My Silverlight Clock -电脑资料

电脑资料 时间:2019-01-01 我要投稿
【meiwen.anslib.com - 电脑资料】

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

Silverlight开发实践My Silverlight Clock

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

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

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

制作过程:

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

首先在页面中定义一个Canvas

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




 
  
   
   
  
 
 




 
   
 






 
  
 




 
  
 




 
  
 

我作了一些简单的说明,值得一提的是其中的元素布局很不好弄,大家可以使用Blend等工具,

电脑资料

Silverlight开发实践My Silverlight Clock》(http://meiwen.anslib.com)。其中使用了path的Data属性来定义时钟指针的位置和形状。M代表指针的起始点的绝对位置,L表示绘制线条。Data属性就是从某一坐标到另一坐标间画一条直线。


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

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

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



 
  
   

    

      

      
   

  

 


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

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

public Page()
{
 InitializeComponent();
 System.DateTime date=DateTime.Now;//获取当前时间
 //根据当前时间计算时针旋转的角度
 float hourangle = (((float)date.Hour) / 12) * 360 + date.Minute / 2;
 hourangle += 116.5F;
 //根据当前时间计算分针旋转的角度
 float minangle = (((float)date.Minute) / 60) * 360;
 minangle += 127;
 //根据当前时间计算秒针旋转的角度
 float secendangle = (((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也不是很长时间。欢迎大家多多指教!

最新文章