稳扎稳打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
[源码下载]