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

<a href="http://down.51cto.com/data/100302" target="_blank">[源码下载]</a>

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

介绍

用Silverlight 1.0实现一个基于客户端系统时间的电子表。

示例

Clock.xaml（用Expression Blend开发）

&lt;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" 

        &gt; 

        &lt;Rectangle x:Name="Frame" Width="180" Height="150" Stroke="#FF000000" StrokeThickness="1" RadiusX="20" RadiusY="15"&gt; 

                &lt;Rectangle.Fill&gt; 

                        &lt;LinearGradientBrush EndPoint="0.5,1.1" StartPoint="0.5,-0.1"&gt; 

                                &lt;GradientStop Color="#FF259888" Offset="0"/&gt; 

                                &lt;GradientStop Color="#FF259888" Offset="0.981"/&gt; 

                                &lt;GradientStop Color="#FFC87947" Offset="0.416"/&gt; 

                                &lt;GradientStop Color="#FFC87947" Offset="0.636"/&gt; 

                        &lt;/LinearGradientBrush&gt; 

                &lt;/Rectangle.Fill&gt; 

        &lt;/Rectangle&gt; 

        &lt;Rectangle x:Name="Panel" Width="164" Height="134" Fill="#7F91B52C" Stroke="#FFA2AEBF" RadiusX="50" RadiusY="15" Canvas.Left="8" Canvas.Top="8" StrokeThickness="2"/&gt; 

        &lt;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"/&gt; 

        &lt;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"/&gt; 

        &lt;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"/&gt; 

        &lt;TextBlock x:Name="Month" Width="16" Height="19" Canvas.Left="32.5" Canvas.Top="92" TextWrapping="Wrap" Foreground="#FF100888" Text="M"/&gt; 

        &lt;TextBlock Width="16" Height="19" Canvas.Left="87" Canvas.Top="92" TextWrapping="Wrap" x:Name="Day" Foreground="#FF100888" Text="D"/&gt; 

        &lt;TextBlock Width="16" Height="19" Canvas.Left="136" Canvas.Top="92" TextWrapping="Wrap" x:Name="Week" Foreground="#FF100888" Text="W"/&gt; 

        &lt;TextBlock x:Name="txtMonth" Width="19" Height="19" Canvas.Left="29" Canvas.Top="111" TextWrapping="Wrap" Foreground="#FF100888" Text="12"/&gt; 

        &lt;TextBlock x:Name="txtDay" Width="20.5" Height="19" Canvas.Left="83.5" Canvas.Top="111" TextWrapping="Wrap" Foreground="#FF100888" Text="31"/&gt; 

        &lt;TextBlock x:Name="txtWeek" Width="32.5" Height="19" Canvas.Left="130" Canvas.Top="111" TextWrapping="Wrap" Foreground="#FF100888" Text="Sun"/&gt; 

        &lt;TextBlock x:Name="txtHour" Width="48" Height="48" Canvas.Left="14.5" Canvas.Top="38" TextWrapping="Wrap" FontSize="36" Foreground="#FF100888" Text="23"/&gt; 

        &lt;TextBlock x:Name="txtMinute" Width="48" Height="48" Canvas.Left="68.5" Canvas.Top="38" TextWrapping="Wrap" FontSize="36" Foreground="#FF100888" Text="59"/&gt; 

        &lt;TextBlock x:Name="txtSecond" Width="49" Height="48" Canvas.Left="122" Canvas.Top="38" TextWrapping="Wrap" FontSize="36" Foreground="#FF100888" Text="59"/&gt; 

        &lt;TextBlock x:Name="Colon1" Width="9.5" Height="27" Canvas.Left="62.5" Canvas.Top="48" TextWrapping="Wrap" Foreground="#FF100888" Text=":" FontSize="20"/&gt; 

        &lt;TextBlock x:Name="Colon2" Width="12" Height="27" Canvas.Left="116.5" Canvas.Top="48" TextWrapping="Wrap" Foreground="#FF100888" Text=":" FontSize="20"/&gt; 

        &lt;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"/&gt; 

        &lt;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"/&gt; 

&lt;/Canvas&gt;

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)    

        sender.foreground = "#FF100888"; 

        sender.textDecorations = "none"; 

}

Default.aspx

&lt;%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" 

        Inherits="_10_Clock_Default" Title="电子表" %&gt; 

&lt;asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server"&gt; 

        &lt;script type="text/javascript" src="../Silverlight.js"&gt;&lt;/script&gt; 

        &lt;script type="text/javascript" src="Default.aspx.js"&gt;&lt;/script&gt; 

        &lt;script type="text/javascript" src="Clock.xaml.js"&gt;&lt;/script&gt; 

        &lt;script type="text/javascript" src="Clock.js"&gt;&lt;/script&gt; 

        &lt;style type="text/css"&gt; 

                .silverlightHost 

                { 

                        height: 150px; 

                        width: 180px; 

                } 

        &lt;/style&gt; 

&lt;/asp:Content&gt; 

&lt;asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server"&gt; 

        &lt;div id="SilverlightControlHost" class="silverlightHost"&gt; 

                &lt;script type="text/javascript"&gt; 

                        createSilverlight(); 

                &lt;/script&gt; 

        &lt;/div&gt; 

&lt;/asp:Content&gt;

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() &gt; 9) 

                hour.text = date.getHours().toString(); 

        else 

                hour.text = "0" + date.getHours().toString(); 

        if (date.getMinutes() &gt; 9) 

                minute.text = date.getMinutes().toString(); 

                minute.text = "0" + date.getMinutes().toString(); 

        if (date.getSeconds() &gt; 9) 

                second.text = date.getSeconds().toString(); 

                second.text = "0" + date.getSeconds().toString(); 

        month.text = aryMonth[date.getMonth()]; 

        if (date.getDate() &gt; 9) 

                day.text = date.getDate().toString(); 

                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

     本文转自webabcd 51CTO博客，原文链接：http://blog.51cto.com/webabcd/345641，如需转载请自行联系原作者