SilverLight是什么? Silverlight,一个跨
浏览器和跨平台的插件,能在
微软.
NET上交付炫目的多媒体体验,和有丰富交互功能的
Web应用。
这段话也许难以理解,Silverlight上海
开发团队Blog提供了比较详细的说明:对于互联网用户来说,Silverlight是一个安装简单的插件
程序。用户只要安装了这个插件
程序,就可以在
Windows和Mac
intosh上多种浏览器中运行相应版本的Silverlight应用
程序,享受
视频分享、在线游戏、广告动画、交互丰富的
网络服务等等。对于
开发设计人员而言,Silverlight是一种融合了微软的多种技术的Web呈现技术。它提供了一套
开发框架,并通过使用基于向量的图像图层技术,支持任何尺寸图像的无缝整合,对基于
ASP.NET、AJAX在内的Web
开发环境实现了无缝连接。Silverlight使
开发设计人员能够更好的协作,有效地创造出能在
Windows和Mac
intosh上多种浏览器中运行的内容丰富、界面绚丽的Web应用
程序——Silverlight应用
程序。
简而言之,Silverlight是一个跨浏览器、跨平台的插件,为网络带来下一代基于.NET媒体体验,和丰富的交互式应用程序。对运行在Macintosh和Windows上主流浏览器,Silverlight提供了统一而丰富的用户体验。通过Silverlight这个小小的浏览器插件,视频、交互性内容,以及其他应用能完好的融合在一起。
在这篇文章中,我们将使用Silverlight这一新技术制作一个小游戏:LightsOut。如图1,这个游戏的玩法是这样的:所有的徽标具有两种状态:亮和暗。开始时所有的的Windows徽标都是暗的,每当玩家点击某个徽标时,点中的Windows徽标及其上下左右四个徽标都会向相反的状态变化。经过数次点击后,能够使全部的徽标变亮或者变暗则胜出。如图2所示。例子
代码可以在
http://www.codeproject.com/silverlight/SilverlightsOut/SilverlightsOut.zip下载

图1

图2
|
开发工具和平台
· Runtimes
下载Silverlight1.1 Alpha版本来使用.NET
语言
·
Microsoft Silverlight 1.1 Alpha [下载]
用来查看创建的Silverlight程序
· Developer Tools
需要Visual Studio开发者工具来进行开发
· Microsoft Visual Studio codename "Orcas" Beta 1 [下载]
下一代开发工具
· Microsoft Silverlight Tools Alpha for Visual Studio codename "Orcas" Beta 1 [下载]
用来创建Silverlight应用程序的插件
· Designer Tools
下载试用版的工具来进行设计
· Expression Blend 2 May Preview [下载]
专业的设计工具来创建Silverlight的交互
· Software Development Kit
包含了文档,例子,插件的SDK开发包
· Microsoft Silverlight 1.1 Alpha Software Development Kit (SDK) [下载]
下载SDK来创建Silverlight Web应用,这个SDK包含了文档和例子。
开发详解
这个例子包含以下特性:
主要方法
RandomizeBoard()
这个方法处理游戏开始前棋盘的初始化。通过一个循环完成,随机调用ToggleSquare()来设置徽标亮暗。
private void RandomizeBoard()
{
// create a randomizer
Random random = new Random();
// loop through each squares
for (int i = 0; i < squares.Count; i++)
{
// fifty / fifty toggle square
if (Convert.ToBoolean(random.Next(2)))
{
ToggleSquare(squares);
}
}
}
|
ClickSquare()
这个
函数用来管理哪些徽标被用户点击。首先找到徽标名,然后使用ToggleSquare()
函数来设置。
private void ClickSquare(object sender, MouseEventArgs e)
{
Image image = sender as Image; // cast sender object into Image
int index = squares.IndexOf(image); // get index of clicked square
if (index > 4) // make sure we are not on topmost row
ToggleSquare(squares[index - 5]);
// toggle square above clicked square
if (index % 5 != 0)
ToggleSquare(squares[index - 1]);
// toggle square to left of clicked square
ToggleSquare(squares[index]); // toggle clicked square
if (index % 5 != 4)
ToggleSquare(squares[index + 1]);
// toggle square to right of clicked square
if (index < 20) // make sure we are not on bottommost row
ToggleSquare(squares[index + 5]);
// toggle square below clicked square
}
|
ToggleSquare()
当徽标被点击时,这个帮助方法将会设置所有相关的徽标(亮->暗,暗->亮),然后检查是否棋盘处于赢的状态。
private void ToggleSquare(Image image)
{
// check if square is on
if (image.Source == vistaLogoOn.Source)
{
image.Source = vistaLogoOff.Source;
image.Opacity = 0.50;
}
else
{
image.Source = vistaLogoOn.Source;
image.Opacity = 0.75;
}
if (CheckForWin())
gameStatus.Text = "You Win";
}
|
|
CheckForWin()
这个帮助函数用来检查棋盘是否处于赢状态,如果所有的徽标都是亮或者都是暗,则玩家胜出。
private bool CheckForWin()
{
int onCount = 0; // assume no square on by default
bool checkForWin = false; // assume player did not win
// loop through all squares
for (int i = 0; i < squares.Count; i++)
{
if (squares.Source == vistaLogoOn.Source)
onCount++;
}
// if all lights are on or off then player wins
if (onCount == 0 || onCount == 25)
checkForWin = true;
return checkForWin;
}
|
Browser.HtmlTimer
我发现在Silverlight1.1中有一个HtmlTimer类。这个类没有文档记载而且是被遗弃的类。在
编译后VS将会有一个提示:'System.Windows.Browser.HtmlTimer' is obsolete:'这不是一个高精度的计时器,并不适合于短间隔的动画。在未来版本里将会有个高级的计时器版本出现。
...
// use the browser's HtmlTimer to refresh background regularly
System.Windows.Browser.HtmlTimer timer = new System.Windows.Browser.HtmlTimer();
timer.Interval = 1;
timer.Enabled = true;
timer.Tick += new EventHandler(timer_Tick);
...
void timer_Tick(object sender, EventArgs e)
{
double currentLeft = (double)background.GetValue(Canvas.LeftProperty);
if (currentLeft <= 0)
{
// move background pixels over>
background.SetValue(Canvas.LeftProperty, currentLeft + 2);
}
else
{
// reset backgrounds position
background.SetValue(Canvas.LeftProperty, -340);
}
}
|
但是目前System.Windows.Browser.HtmlTimer是最好的创建基本动画的方法。