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.LeftCanvas.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.LeftCanvas.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>
                
<!-- ...... -->

现在图形已经画完了,接下来我们实现PageLoaded事件。

二、
实现PageLoaded事件

在 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 就完成了,可以运行看一下效果哦 ^_^


发布了22 篇原创文章 · 获赞 2 · 访问量 5万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览