重写Essential Silverlight这本书中的第一个例子HelloWorld

来源：互联网发布：java字符串转json对象编辑：程序博客网时间：2024/05/01 11:05

做不出第一个例子会打击初学者的信心。经过研究，终于发现了问题所在，作者的这个例子是使用记事本之类的东西进行开发的，并非Visual Studio。一个Silverlight应用程序最简单需要4个文件：

l 一个html文件：用于给浏览器打开

l 一个xaml文件：用于控制Silverlight所显示的内容

l 一个后缀名为.js的JavaScript文件：html文件的代码隐藏文件（code-behind技术）

l 一个模板文件Silverlight.js。这个文件可以从网上或VS2005中获得，不需要自己写

作者的HelloWorld程序没看见HelloWorld的影子，干脆我自己写一段来帮助初学者完成HelloWorld吧，其实很简单。

1. 打开记事本，输入如下代码。完成后把文件保存为HelloWorld.html：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<head>

<title>Silverlight</title>

</head>

<body>

createSilverlight();

</script>

</div>

</body>

</html>

2. 使用记事本，输入如下代码。完成后把文件另存为HelloWorld.xaml：

<Canvasxmlns="http://schemas.microsoft.com/client/2007"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<RectangleWidth="350"Height="150"Stroke="Orange"StrokeThickness="15" />

<TextBlockFontFamily="Arial"FontSize="56"Canvas.Left="25"Canvas.Top="40"

Foreground="Black"Text="Hello World!" />

</Canvas>

3. 使用记事本，输入如下代码。完成后把文件另存为HelloWorld.html.js：

function createSilverlight()

{

Silverlight.createObjectEx({

source: 'HelloWorld.xaml',

parentElement: document.getElementById('SilverlightPlugInHost'),

id: 'SilverlightPlugIn',

properties: {

width: '800',

height: '400',

background:'#ffffffff',

isWindowless: 'false',

version: '1.0'

events: {

onError: null

}

});

}

4. 注意，以上3个文件放在同一目录下。打开Visual Studio 2005，新建一个Silverlight项目，然后到这个项目所在的文件夹把Silverlight.js文件拷贝出来也放在这个目录里面。如果没有装VS2005就上网找一个。

5. 双击HelloWorld.html文件，运行效果如图2-17所示

在运行本书后面的例子时，可以参照这个例子。步骤如下：

l 把HelloWorld.html、HelloWorld.xaml、HelloWorld.html.js复制一份，并按照课本的例题名称更改它们的名字。确保在文件夹内有Silverlight.js文件存在

l xaml文件使用课本的代码。

l html文件中

这一行的src属性值改为实际的值。

l Html.js文件中

source: 'HelloWorld.xaml',

这一行的source属性值改为实际的值