稳扎稳打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(thisthis.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;         
}
 

     本文转自webabcd 51CTO博客,原文链接:http://blog.51cto.com/webabcd/345641,如需转载请自行联系原作者
上一篇:QC远程执行QTP脚本---2003服务器端共享访问时总是需要用户名和密码


下一篇:补习系列-springboot-使用assembly进行项目打包