本文主要是介绍用Silverlight 1.0实现一个基于客户端系统时间的电子表。,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
用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 >
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";
}
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";
}
这篇关于用Silverlight 1.0实现一个基于客户端系统时间的电子表。的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!