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

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

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"; 
}

<%@ 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>

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); 
        } 
}

// 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;         
}