Silverlight Clock 實例及源碼

開發環境：
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 就完成了，可以運行看一下效果哦 ^_^