稳扎稳打Silverlight(1) - 1.0实例之电子表

[源码下载]

稳扎稳打Silverlight(1) - 1.0实例之电子表

作者： webabcd


介绍
用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";
}

Default.aspx

<% @ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs"
    Inherits="_10_Clock_Default" Title="电子表"  %>

< asp:Content  ID ="Content1"  ContentPlaceHolderID ="head"  runat ="Server" >

     < script  type ="text/javascript"  src ="../Silverlight.js" ></ script >

     < script  type ="text/javascript"  src ="Default.aspx.js" ></ script >

     < script  type ="text/javascript"  src ="Clock.xaml.js" ></ script >

     < script  type ="text/javascript"  src ="Clock.js" ></ script >

     < style  type ="text/css" >
        .silverlightHost
        {}{
            height: 150px;
            width: 180px;
        }
     </ style >
</ asp:Content >
< asp:Content  ID ="Content2"  ContentPlaceHolderID ="ContentPlaceHolder1"  runat ="Server" >
     < div  id ="SilverlightControlHost"  class ="silverlightHost" >

         < script  type ="text/javascript" >
            createSilverlight();
         </ script >

     </ div >
</ asp:Content >

Default.aspx.js

function  createSilverlight()
{
    var scene = new Clock.Page();
    Silverlight.createObjectEx({
        source: "Clock.xaml",
        parentElement: document.getElementById("SilverlightControlHost"),
        id: "SilverlightControl",
        properties: {
            width: "100%",
            height: "100%",
            version: "1.0"
        },
        events: {
            onLoad: Silverlight.createDelegate(scene, scene.handleLoad)
        }
    });
}


if  ( ! window.Silverlight) 
    window.Silverlight  =   {} ;

Silverlight.createDelegate  =   function (instance, method)  {
    return function() {
        return method.apply(instance, arguments);
    }
}

Clock.js

//  date.getDay()索引转文字
var  aryWeek  =   new  Array( 7 )
aryWeek[ 0 ] = " Sun "
aryWeek[ 1 ] = " Mon "
aryWeek[ 2 ] = " Tue "
aryWeek[ 3 ] = " Wed "
aryWeek[ 4 ] = " Thu "
aryWeek[ 5 ] = " Fri "
aryWeek[ 6 ] = " Sat "

//  date.getMonth()索引转文字
var  aryMonth  =   new  Array( 12 )
aryMonth[ 0 ] = " 01 "
aryMonth[ 1 ] = " 02 "
aryMonth[ 2 ] = " 03 "
aryMonth[ 3 ] = " 04 "
aryMonth[ 4 ] = " 05 "
aryMonth[ 5 ] = " 06 "
aryMonth[ 6 ] = " 07 "
aryMonth[ 7 ] = " 08 "
aryMonth[ 8 ] = " 09 "
aryMonth[ 9 ] = " 10 "
aryMonth[ 10 ] = " 11 "
aryMonth[ 11 ] = " 12 "

//  Canvas的Loaded调用的方法
function  enableClock() 
{
    var date = new Date();

    var SilverlightControl = document.getElementById("SilverlightControl");

    // plugin.content.findName(objectName)
    var hour = SilverlightControl.content.findName("txtHour");
    var minute = SilverlightControl.content.findName("txtMinute");
    var second = SilverlightControl.content.findName("txtSecond");
    var month = SilverlightControl.content.findName("txtMonth");
    var day = SilverlightControl.content.findName("txtDay");
    var week = SilverlightControl.content.findName("txtWeek");

    // TextBlock.text
    if (date.getHours() > 9)
        hour.text = date.getHours().toString();
    else
        hour.text = "0" + date.getHours().toString();

    if (date.getMinutes() > 9)
        minute.text = date.getMinutes().toString();
    else
        minute.text = "0" + date.getMinutes().toString();
    
    if (date.getSeconds() > 9)
        second.text = date.getSeconds().toString();
    else
        second.text = "0" + date.getSeconds().toString();
        
    month.text = aryMonth[date.getMonth()];
        
    if (date.getDate() > 9)
        day.text = date.getDate().toString();
    else
        day.text = "0" + date.getDate().toString();
    
    week.text = aryWeek[date.getDay()];
    
    setTimeout("enableClock()",1000);    
}

//  全屏（TextBlock的MouseLeftButtonDown调用的方法）
function  toggle_fullScreen(sender, args)
{
    // 当前元素所属的Silverlight插件
    var silverlightPlugin = sender.getHost();
    silverlightPlugin.content.fullScreen = !silverlightPlugin.content.fullScreen;    
}

OK
[源码下载]