Silverlight Clock 实例及源码

概述开发环境： Microsoft Expression Blend 2 Microsoft Silverlight 1.1 版本 JavaScript  代码实现： 一、在Expression Blend 2实现页面  1）绘制一个 Ellipse，并填充色彩，作为Clock 外框外沿，并将其 转换成 Canvas，重命名为 Frame1，为Page增加Loaded事件 < Canvas     
开发环境：
Microsoft Expression Blend 2
Microsoft Silverlight 1.1 版本
JavaScript

 代码实现：
一、在Expression Blend 2实现页面
 1）绘制一个 Ellipse，并填充色彩，作为Clock 外框外沿，并将其 转换成 Canvas，重命名为 Frame1，为Page增加Loaded事件

< Canvas

     xmlns ="http://schemas.microsoft.com/clIEnt/2007"

    xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"

    WIDth ="640"  Height ="480"

    Background ="White"

    x:name ="Page"  RendertransformOrigin ="0.5,0.5"  Loaded ="Run"

     >

     Canvas  WIDth ="240"  Canvas.left ="80"  Canvas.top  x:name ="Frame1"

         Ellipse   strokeThickness ="0"  stroke ="#FFF2F2F2"

             Ellipse .Rendertransform

                 transformGroup

                     Scaletransform  ScaleX ="1"  ScaleY ="1" /> Skewtransform  AngleX  AngleY ="0" Rotatetransform  Angle Translatetransform  X  Y </ Ellipse.Rendertransform .Fill RadialGradIEntBrush RadialGradIEntBrush .relativetransform

                        

                             CenterX ="0.5"  CenterY  ScaleX  CenterX ="0.5" RadialGradIEntBrush.relativetransform GradIEntStop  color ="#FF000000"  Offset ="#FFCE7171" ="#FFECE3E3" ="#FFDEAFAF" ="0.978" ="#FFD57E7E" ="0.88" ="#FFFFFFFF" ="0.524" ="#FFD88B8B" ="0.947" ="#FFD47C7C" ="0.911" Ellipse.Fill Ellipse <!--  ......  --> Canvas

>
2）在 Frame1中 绘制一个 Ellipse，并填充色彩，作为Clock 外框内沿，并将其 Frame2
Canvas.left ， Canvas.top 是相对于 Frame1 的位置

     ......  ="200" ="20" ="Frame2"  Canvas.ZIndex

                                 ="2.885" ="2.885" ="#FFDD0B0B" ...... -->
3）在 Frame2中 Ellipse，并填充色彩，作为Clock 内框内沿（即Clock表面），并将其 Frame3
Canvas.top Frame2 的位置

         ="180" ="10" ="Frame3" ="#FFF9FAF4" ="#FFF7F876" ="#FFF8F9F3" -->

4）在 Frame3中 绘制12个 TextBlock，作为Clock 的时间点，并将其 合成 Num
， Frame3 的位置

         -->

                 ="168" ="179.5" ="6" ="Num" TextBlock  ="8"  Text  textwrapPing ="Wrap" ="3"  FontFamily ="Comic Sans MS"  FontWeight ="Bold"  FontSize ="14"  Cursor ="Arrow" ="120" ="11.5" ="2" ="149.5" ="40" ="160" ="80" ="159.5" ="5" ="148" ="4" ="149" ="119" ="9" ="10.5" ="118" ="7" ="40" ="12" ="75"

                     ="11" ="38.5"

    

                 >


5）在 Num中 绘制指针 ，作为Clock 的时间点，以及表面装饰，并将指针的旋转中心调整到 Frame3的中心位置
    ss 为秒针
mm 为分针
hh  为时针
core 为指针的固定点

                 <!--  ......  -->

                     < Rectangle  WIDth ="1"  Height ="88"  Fill ="#FFFB0909"  stroke ="#FFFF0000"  Canvas.left ="83.667"  Canvas.top ="7.336"  RendertransformOrigin ="0.52,0.939"  Canvas.ZIndex ="5"  x:name ="ss" >

                         Rectangle .Rendertransform

                             transformGroup

                                 Scaletransform  ScaleX  ScaleY ="1" /> Skewtransform  AngleX ="0"  AngleY ="0" Rotatetransform  Angle Translatetransform  X  Y </ Rectangle.Rendertransform Rectangle Path  RendertransformOrigin  WIDth ="16" ="56" ="#FFFFA4A4"  Stretch ="Fill" ="#FF828282"  strokeThickness ="0.5" ="76.25" ="36.25" ="3"  Data ="M304,200 L296,240 304,248 312,240 z" ="hh" Path Path.Rendertransform Path Fill ="#FFFF5050" ="72" ="76" ="21.75" ="4" ="mm" Ellipse  ="#FF000000" ="82" ="87.5" ="6" ="core" Ellipse Ellipse.Rendertransform .Fill RadialGradIEntBrush GradIEntStop  color  Offset ="0.929" ="#FFFFFFFF" ="#FF4B4B4B" ="#FF404040" ="0.791" Ellipse.Fill Ellipse TextBlock  ="110" ="30" ="35" ="105"  textwrapPing ="Wrap"  Foreground ="#FFF6AEBC" Run  Text ="1st Excellence" TextBlock

                 -->
现在图形已经画完了，接下来我们实现 Page 的 Loaded事件。

二、 实现 事件

在 Default_HTML.Js 增加 JavaScript 脚本。获取当前时间，并调整指针的旋转角度，现实当前时间，每过一秒更新一次。

var  time1 =    null ;

function  Run(sender, args) 

... {

    var   time =  new   Date();

    Nowhh  time.getHours();  

    Nowmm  time.getMinutes();  

    Nowss  time.getSeconds();  

     s  sender.findname("ss).Rendertransform.Children;

     m mm h hh).Rendertransform.Children;

    s.getItem(2).Angle += Nowss*6;

    m.getItem( Nowmm+(Nowss/60);

    h.getItem( Nowhh30(Nowmm12));

        

    window.runclock  function ()

    ...{

           Date();

        hours  time.getHours();  

        mins  time.getMinutes();  

        secs  time.getSeconds();  

         ss ).Rendertransform.Children;

         mm  hh ).Rendertransform.Children;

        ss.getItem( secs;

        mm.getItem( mins(secs);

        hh.getItem( hours(mins);    

    }

    time1 window.setInterval(window.runclock(),1000);

}  

 Stop()

... {

    window.clearInterval(time1);

} 现在我们的 Silverlight Clock 就完成了，可以运行看一下效果哦 ^_^ 总结

以上是内存溢出为你收集整理的Silverlight Clock 实例及源码全部内容，希望文章能够帮你解决Silverlight Clock 实例及源码所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。