稳扎稳打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( 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">
<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" >
<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
[源码下载] 总结
以上是内存溢出为你收集整理的稳扎稳打Silverlight(1) - 1.0实例之电子表全部内容，希望文章能够帮你解决稳扎稳打Silverlight(1) - 1.0实例之电子表所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）