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

概述[源码下载] 稳扎稳打Silverlight(1) - 1.0实例之电子表 作者： webabcd 介绍 用Silverlight 1.0实现一个基于客户端系统时间的电子表。 参考： http://silverlight.net/community/communitygallery.aspx 示例 Clock.xaml（用Expression Blend开发） < Canvas      xmln [源码下载]


稳扎稳打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) 

@H_375_1419@

{

    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)

@H_419_3344@

{

    // 当前元素所属的Silverlight插件

    var silverlightPlugin = sender.getHost();

    silverlightPlugin.content.fullScreen = !silverlightPlugin.content.fullScreen;    

}

OK
[源码下载] 总结

以上是内存溢出为你收集整理的稳扎稳打Silverlight(1) - 1.0实例之电子表全部内容，希望文章能够帮你解决稳扎稳打Silverlight(1) - 1.0实例之电子表所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。