稳扎稳打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.Fill>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

</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">

.silverlightHost

{

height: 150px;

width: 180px;

}

</style>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

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

posted @ 2007-09-17 08:40 webabcd 阅读(11556) 评论(42) 编辑收藏举报

刷新页面返回顶部

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

公告