Silverlight Clock 实例及源码

于 2008-03-20 13:19:00 发布
阅读量772 收藏
点赞数
分类专栏： Silverlight 文章标签： silverlight microsoft blend path javascript function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/nj_1st_excellence/article/details/2199736
版权
本文介绍如何使用Microsoft Expression Blend 2和Silverlight 1.1创建一个动态时钟。通过详细步骤展示了时钟界面的设计过程，包括外框、内框及时间标记的绘制，并实现了时钟指针的实时转动。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >


开发环境：
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"  Height ="240"  Canvas.Left ="80"  Canvas.Top ="80"  x:Name ="Frame1" >
         < Ellipse  Width ="240"  Height ="240"  RenderTransformOrigin ="0.5,0.5"  StrokeThickness ="0"  Stroke ="#FFF2F2F2" >
             < Ellipse .RenderTransform >
                 < TransformGroup >
                     < ScaleTransform  ScaleX ="1"  ScaleY ="1" />
                     < SkewTransform  AngleX ="0"  AngleY ="0" />
                     < RotateTransform  Angle ="0" />
                     < TranslateTransform  X ="0"  Y ="0" />
                 </ TransformGroup >
             </ Ellipse.RenderTransform >
             < Ellipse .Fill >
                 < RadialGradientBrush >
                     < RadialGradientBrush .RelativeTransform >
                         < TransformGroup >
                             < ScaleTransform  CenterX ="0.5"  CenterY ="0.5"  ScaleX ="1"  ScaleY ="1" />
                             < SkewTransform  AngleX ="0"  AngleY ="0"  CenterX ="0.5"  CenterY ="0.5" />
                             < RotateTransform  Angle ="0"  CenterX ="0.5"  CenterY ="0.5" />
                             < TranslateTransform  X ="0"  Y ="0" />
                         </ TransformGroup >
                     </ RadialGradientBrush.RelativeTransform >
                     < GradientStop  Color ="#FF000000"  Offset ="0" />
                     < GradientStop  Color ="#FFCE7171"  Offset ="0" />
                     < GradientStop  Color ="#FFECE3E3"  Offset ="1" />
                     < GradientStop  Color ="#FFDEAFAF"  Offset ="0.978" />
                     < GradientStop  Color ="#FFD57E7E"  Offset ="0.88" />
                     < GradientStop  Color ="#FFFFFFFF"  Offset ="0.524" />
                     < GradientStop  Color ="#FFD88B8B"  Offset ="0.947" />
                     < GradientStop  Color ="#FFD47C7C"  Offset ="0.911" />
                 </ RadialGradientBrush >
             </ Ellipse.Fill >
         </ Ellipse >
             <!--  ......  -->
     </ Canvas >
</ Canvas >

2）在 Frame1中 绘制一个 Ellipse，并填充色彩，作为Clock 外框内沿，并将其 转换成 Canvas，重命名为 Frame2
 Canvas.Left ， Canvas.Top 是相对于 Frame1 的位置

     <!-- ......  -->
         < Canvas  Width ="200"  Height ="200"  Canvas.Left ="20"  Canvas.Top ="20"  x:Name ="Frame2" >
             < Ellipse  Width ="200"  Height ="200"  Canvas.ZIndex ="0" >
                 < Ellipse .Fill >
                     < RadialGradientBrush >
                         < RadialGradientBrush .RelativeTransform >
                             < TransformGroup >
                                 < ScaleTransform  CenterX ="0.5"  CenterY ="0.5"  ScaleX ="2.885"  ScaleY ="2.885" />
                                 < SkewTransform  AngleX ="0"  AngleY ="0"  CenterX ="0.5"  CenterY ="0.5" />
                                 < RotateTransform  Angle ="0"  CenterX ="0.5"  CenterY ="0.5" />
                                 < TranslateTransform  X ="0"  Y ="0" />
                             </ TransformGroup >
                         </ RadialGradientBrush.RelativeTransform >
                         < GradientStop  Color ="#FF000000"  Offset ="1" />
                         < GradientStop  Color ="#FFDD0B0B"  Offset ="0" />
                     </ RadialGradientBrush >
                 </ Ellipse.Fill >
             </ Ellipse >
         </ Canvas >
     <!-- ...... -->

3）在 Frame2中 绘制一个 Ellipse，并填充色彩，作为Clock 内框内沿（即Clock表面），并将其 转换成 Canvas，重命名为 Frame3
 Canvas.Left ， Canvas.Top 是相对于 Frame2 的位置
         <!--  ......  -->
             < Canvas  Width ="180"  Height ="180"  Canvas.Left ="10"  Canvas.Top ="10"  Canvas.ZIndex ="0"  x:Name ="Frame3" >
                 < Ellipse  Width ="180"  Height ="180"  Canvas.ZIndex ="0"  StrokeThickness ="0" >
                     < Ellipse .Fill >
                         < RadialGradientBrush >
                             < GradientStop  Color ="#FFF9FAF4"  Offset ="0" />
                             < GradientStop  Color ="#FFF7F876"  Offset ="0" />
                             < GradientStop  Color ="#FFF8F9F3"  Offset ="1" />
                         </ RadialGradientBrush >
                     </ Ellipse.Fill >
                 </ Ellipse >
             </ Canvas >
         <!--  ......  -->


4）在 Frame3中 绘制12个 TextBlock，作为Clock 的时间点，并将其 合成 Canvas，重命名为 Num
Canvas.Left ， Canvas.Top 是相对于 Frame3 的位置

         <!--  ......  -->                  < Canvas  Width ="168"  Height ="179.5"  Canvas.Left ="6"  Canvas.Top ="0.5"  x:Name ="Num"  Canvas.ZIndex ="0" >
                     < TextBlock  Width ="8"  Height ="20"  Text ="1"  TextWrapping ="Wrap"  Canvas.ZIndex ="3"  FontFamily ="Comic Sans MS"  FontWeight ="Bold"  FontSize ="14"  Cursor ="Arrow"  Canvas.Left ="120"  Canvas.Top ="11.5" />
                     < TextBlock  Width ="8"  Height ="20"  Text ="2"  TextWrapping ="Wrap"  Canvas.ZIndex ="3"  FontFamily ="Comic Sans MS"  FontWeight ="Bold"  FontSize ="14"  Cursor ="Arrow"  Canvas.Left ="149.5"  Canvas.Top ="40" />
                     < TextBlock  Width ="8"  Height ="20"  Text ="3"  TextWrapping ="Wrap"  Canvas.ZIndex ="3"  FontFamily ="Comic Sans MS"  FontWeight ="Bold"  FontSize ="14"  Cursor ="Arrow"  Canvas.Left ="160"  Canvas.Top ="80" />
                     < TextBlock  Width ="8"  Height ="20"  Text ="6"  TextWrapping ="Wrap"  Canvas.ZIndex ="3"  FontFamily ="Comic Sans MS"  FontWeight ="Bold"  FontSize ="14"  Cursor ="Arrow"  Canvas.Left ="80"  Canvas.Top ="159.5" />
                     < TextBlock  Width ="8"  Height ="20"  Text ="5"  TextWrapping ="Wrap"  Canvas.ZIndex ="3"  FontFamily ="Comic Sans MS"  FontWeight ="Bold"  FontSize ="14"  Cursor ="Arrow"  Canvas.Left ="120"  Canvas.Top ="148" />
                     < TextBlock  Width ="8"  Height ="20"  Text ="4"  TextWrapping ="Wrap"  Canvas.ZIndex ="3"  FontFamily ="Comic Sans MS"  FontWeight ="Bold"  FontSize ="14"  Cursor ="Arrow"  Canvas.Left ="149"  Canvas.Top ="119" />
                     < TextBlock  Width ="8"  Height ="20"  Text ="9"  TextWrapping ="Wrap"  Canvas.ZIndex ="3"  FontFamily ="Comic Sans MS"  FontWeight ="Bold"  FontSize ="14"  Cursor ="Arrow"  Canvas.Top ="80" />
                     < TextBlock  Width ="8"  Height ="20"  Text ="8"  TextWrapping ="Wrap"  Canvas.ZIndex ="3"  FontFamily ="Comic Sans MS"  FontWeight ="Bold"  FontSize ="14"  Cursor ="Arrow"  Canvas.Left ="10.5"  Canvas.Top ="118" />
                     < TextBlock  Width ="8"  Height ="20"  Text ="7"  TextWrapping ="Wrap"  Canvas.ZIndex ="3"  FontFamily ="Comic Sans MS"  FontWeight ="Bold"  FontSize ="14"  Cursor ="Arrow"  Canvas.Left ="40"  Canvas.Top ="148" />
                     < TextBlock  Width ="20"  Height ="20"  Text ="12"  TextWrapping ="Wrap"  Canvas.ZIndex ="3"  FontFamily ="Comic Sans MS"  FontWeight ="Bold"  FontSize ="14"  Cursor ="Arrow"  Canvas.Left ="75" />
                     < TextBlock  Width ="20"  Height ="20"  Text ="10"  TextWrapping ="Wrap"  Canvas.ZIndex ="3"  FontFamily ="Comic Sans MS"  FontWeight ="Bold"  FontSize ="14"  Cursor ="Arrow"  Canvas.Left ="10.5"  Canvas.Top ="40" />                      < TextBlock  Width ="20"  Height ="20"  Text ="11"  TextWrapping ="Wrap"  Canvas.ZIndex ="3"  FontFamily ="Comic Sans MS"  FontWeight ="Bold"  FontSize ="14"  Cursor ="Arrow"  Canvas.Left ="38.5"  Canvas.Top ="11.5" />
    
                 </ Canvas >

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 ="1"  ScaleY ="1" />
                                 < SkewTransform  AngleX ="0"  AngleY ="0" />
                                 < RotateTransform  Angle ="0" />
                                 < TranslateTransform  X ="0"  Y ="0" />
                             </ TransformGroup >
                         </ Rectangle.RenderTransform >
                     </ Rectangle >
                     < Path  RenderTransformOrigin ="0.5,0.952"  Width ="16"  Height ="56"  Fill ="#FFFFA4A4"  Stretch ="Fill"  Stroke ="#FF828282"  StrokeThickness ="0.5"  Canvas.Left ="76.25"  Canvas.Top ="36.25"  Canvas.ZIndex ="3"  Data ="M304,200 L296,240 304,248 312,240 z"  x:Name ="hh" >
                         < Path .RenderTransform >
                             < TransformGroup >
                                 < ScaleTransform  ScaleX ="1"  ScaleY ="1" />
                                 < SkewTransform  AngleX ="0"  AngleY ="0" />
                                 < RotateTransform  Angle ="0" />
                                 < TranslateTransform  X ="0"  Y ="0" />
                             </ TransformGroup >
                         </ Path.RenderTransform >
                     </ Path >
                     < Path  Fill ="#FFFF5050"  RenderTransformOrigin ="0.5,0.941"  Width ="16"  Height ="72"  Stretch ="Fill"  Stroke ="#FF828282"  StrokeThickness ="0.5"  Canvas.Left ="76"  Canvas.Top ="21.75"  Canvas.ZIndex ="4"  Data ="M304,184 L296,240 304,256 312,240 z"  x:Name ="mm" >
                         < Path .RenderTransform >
                             < TransformGroup >
                                 < ScaleTransform  ScaleX ="1"  ScaleY ="1" />
                                 < SkewTransform  AngleX ="0"  AngleY ="0" />
                                 < RotateTransform  Angle ="0" />
                                 < TranslateTransform  X ="0"  Y ="0" />
                             </ TransformGroup >
                         </ Path.RenderTransform >
                     </ Path >
                     < Ellipse  Width ="4"  Height ="4"  Stroke ="#FF000000"  StrokeThickness ="0"  Canvas.Left ="82"  Canvas.Top ="87.5"  Canvas.ZIndex ="6"  RenderTransformOrigin ="0.5,0.5"  x:Name ="core" >
                         < Ellipse .RenderTransform >
                             < TransformGroup >
                                 < ScaleTransform  ScaleX ="1"  ScaleY ="1" />
                                 < SkewTransform  AngleX ="0"  AngleY ="0" />
                                 < RotateTransform  Angle ="0" />
                                 < TranslateTransform  X ="0"  Y ="0" />
                             </ TransformGroup >
                         </ Ellipse.RenderTransform >
                         < Ellipse .Fill >
                             < RadialGradientBrush >
                                 < GradientStop  Color ="#FF000000"  Offset ="0.929" />
                                 < GradientStop  Color ="#FFFFFFFF"  Offset ="0" />
                                 < GradientStop  Color ="#FF4B4B4B"  Offset ="1" />
                                 < GradientStop  Color ="#FF404040"  Offset ="0.791" />
                             </ RadialGradientBrush >
                         </ Ellipse.Fill >
                     </ Ellipse >
                     < TextBlock  Width ="110"  Height ="30"  Canvas.Left ="35"  Canvas.Top ="105"  TextWrapping ="Wrap"  Foreground ="#FFF6AEBC" >
                         < Run  Text ="1st Excellence" />
                     </ TextBlock >
                 <!--  ......  -->

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

二、 实现 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();  
    var s = sender.findName("ss").RenderTransform.Children;
    var m = sender.findName("mm").RenderTransform.Children;
    var h = sender.findName("hh").RenderTransform.Children;
    s.getItem(2).Angle += nowss*6;
    m.getItem(2).Angle += nowmm*6+(nowss*6/60);
    h.getItem(2).Angle += nowhh*30+(nowmm*6/12)+(nowss*6/60/12);
        
    window.RunClock = function ()
    {
        var   time =  new   Date();
        hours = time.getHours();  
        mins = time.getMinutes();  
        secs = time.getSeconds();  
        var ss = sender.findName("ss").RenderTransform.Children;
        var mm = sender.findName("mm").RenderTransform.Children;
        var hh = sender.findName("hh").RenderTransform.Children;
        ss.getItem(2).Angle = secs*6;
        mm.getItem(2).Angle = mins*6+(secs*6/60);
        hh.getItem(2).Angle = hours*30+(mins*6/12)+(secs*6/60/12);    
    }
    time1= window.setInterval("window.RunClock()",1000);
}  

 function  Stop()
 {
    window.clearInterval(time1);
}

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


评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值