博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

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

Posted on 2007-09-17 08:40  webabcd  阅读(11428)  评论(42编辑  收藏
[源码下载]


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


OK
[源码下载]