用Silverlight 1.0实现一个基于客户端系统时间的电子表

用Silverlight 1.0实现一个基于客户端系统时间的电子表。
参考：http://silverlight.net/community/communitygallery.aspx

示例
Clock.xaml（用Expression Blend开发）

< Canvas
     xmlns =http://schemas.microsoft.com/client/2007
    xmlns:x =http://schemas.microsoft.com/winfx/2006/xaml
    Width ="180"  Height ="150"
    Background ="#0030628D"
    x:Name ="Page"  Loaded ="enableClock"
     >
     < Rectangle  x:Name ="Frame"  Width ="180"  Height ="150"  stroke ="#FF000000"
strokeThickness ="1"  RadiusX ="20"  RadiusY ="15" >
         < Rectangle .Fill >
             < LinearGradientBrush  EndPoint ="0.5,1.1"  StartPoint ="0.5,-0.1" >
                 < GradientStop  Color ="#FF259888"  Offset ="0" />
                 < GradientStop  Color ="#FF259888"  Offset ="0.981" />
                 < GradientStop  Color ="#FFC87947"  Offset ="0.416" />
                 < GradientStop  Color ="#FFC87947"  Offset ="0.636" />
             </ LinearGradientBrush >
         </ Rectangle.Fill >
     </ Rectangle >
     < Rectangle  x:Name ="Panel"  Width ="164"  Height ="134"  Fill ="#7F91B52C"  stroke ="#FFA2AEBF"
 RadiusX ="50"  RadiusY ="15"  Canvas.Left ="8"  Canvas.Top ="8"  strokeThickness ="2" />

     < Path  x:Name ="Line1"  Width ="163"  Height ="1"  Fill ="#FF100888"  Stretch ="Fill"
stroke ="#FF1B510C"  Canvas.Left ="8"  Canvas.Top ="92"
Data ="M33.50029,83.29705 L161.89657,83.297051" />
     < Path  x:Name ="Line2"  Width ="1"  Height ="49"  Fill ="#FF100888"  Stretch ="Fill"
stroke ="#FF1B510C"  Canvas.Left ="63"  Canvas.Top ="92"
Data ="M81.450752,138.29705 L81.450752,90.29705" />
     < Path  x:Name ="Line3"  Width ="1"  Height ="49"  Fill ="#FF100888"  Stretch ="Fill"
stroke ="#FF1B510C"  Canvas.Left ="119"  Canvas.Top ="92"
Data ="M118.30501,164.29698 L118.30501,116.29699" />
     < TextBlock  x:Name ="Month"  Width ="16"  Height ="19"  Canvas.Left ="32.5"  Canvas.Top ="92"
textwrapping ="Wrap"  Foreground ="#FF100888"  Text ="M" />
     < TextBlock  Width ="16"  Height ="19"  Canvas.Left ="87"  Canvas.Top ="92"  textwrapping ="Wrap"
x:Name ="Day"  Foreground ="#FF100888"  Text ="D" />
     < TextBlock  Width ="16"  Height ="19"  Canvas.Left ="136"  Canvas.Top ="92"  textwrapping ="Wrap"
x:Name ="Week"  Foreground ="#FF100888"  Text ="W" />

     < TextBlock  x:Name ="txtMonth"  Width ="19"  Height ="19"  Canvas.Left ="29"  Canvas.Top ="111"
textwrapping ="Wrap"  Foreground ="#FF100888"  Text ="12" />
     < TextBlock  x:Name ="txtDay"  Width ="20.5"  Height ="19"  Canvas.Left ="83.5"  Canvas.Top ="111"
textwrapping ="Wrap"  Foreground ="#FF100888"  Text ="31" />
     < TextBlock  x:Name ="txtWeek"  Width ="32.5"  Height ="19"  Canvas.Left ="130"  Canvas.Top ="111"
textwrapping ="Wrap"  Foreground ="#FF100888"  Text ="Sun" />

     < TextBlock  x:Name ="txtHour"  Width ="48"  Height ="48"  Canvas.Left ="14.5"  Canvas.Top ="38"
textwrapping ="Wrap"  FontSize ="36"  Foreground ="#FF100888"  Text ="23" />
     < TextBlock  x:Name ="txtMinute"  Width ="48"  Height ="48"  Canvas.Left ="68.5"  Canvas.Top ="38"
textwrapping ="Wrap"  FontSize ="36"  Foreground ="#FF100888"  Text ="59" />
     < TextBlock  x:Name ="txtSecond"  Width ="49"  Height ="48"  Canvas.Left ="122"  Canvas.Top ="38"
textwrapping ="Wrap"  FontSize ="36"  Foreground ="#FF100888"  Text ="59" />

     < TextBlock  x:Name ="Colon1"  Width ="9.5"  Height ="27"  Canvas.Left ="62.5"  Canvas.Top ="48"
textwrapping ="Wrap"  Foreground ="#FF100888"  Text =":"  FontSize ="20" />
     < TextBlock  x:Name ="Colon2"  Width ="12"  Height ="27"  Canvas.Left ="116.5"  Canvas.Top ="48"
textwrapping ="Wrap"  Foreground ="#FF100888"  Text =":"  FontSize ="20" />

     < TextBlock  x:Name ="copyright"  Width ="88"  Height ="16"  Canvas.Left ="16"  textwrapping ="Wrap"
FontSize ="12"  Canvas.Top ="22"  Foreground ="#FF100888"  Text ="webabcd clock"
MouseLeftButtonDown ="MouseLeftButtonDown"  MouseMove ="MouseMove"
MouseLeave ="MouseLeave" />
     < TextBlock  x:Name ="FullScreen"  Width ="88"  Height ="16"  Canvas.Left ="106"
textwrapping ="Wrap"  FontSize ="12"  Canvas.Top ="22"  Foreground ="#FF100888"  Text ="FullScreen"
MouseLeftButtonDown ="toggle_fullScreen"  MouseMove ="MouseMove"  MouseLeave ="MouseLeave" />
</ Canvas >

Clock.xaml.js

if  ( ! window.Clock)
    window.Clock  =  

{} ;

Clock.Page  =   function () 

{
}

Clock.Page.prototype  =

{
    handleLoad: function(control, userContext, rootElement) 
    

{
        this.control = control;
        
        // Sample event hookup:    
        rootElement.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this,
this.handleMouseDown));
    },
    
    // Sample event handler
    handleMouseDown: function(sender, eventArgs) 
    

{
        // The following line of code shows how to find an element by name and call a method on it.
        // this.control.content.findName("Timeline1").Begin();
    }
}

//  TextBlock的MouseLeftButtonDown调用的方法
function  MouseLeftButtonDown(sender, args) 

{
    window.open("http://webabcd.cnblogs.com");
}

//  TextBlock的MouseMove调用的方法
function  MouseMove(sender, args) 

{
    // TextBlock.foreground
    sender.foreground = "red";
    // TextBlock.textdecorations
    sender.textdecorations = "underline";
}

//  TextBlock的MouseLeave调用的方法
function  MouseLeave(sender, args) 

{
    // TextBlock.foreground
    sender.foreground = "#FF100888";
    // TextBlock.textdecorations
    sender.textdecorations = "none";}