做不出第一个例子会打击初学者的信心。经过研究,终于发现了问题所在,作者的这个例子是使用记事本之类的东西进行开发的,并非
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">
<
html
xmlns="http://www.w3.org/1999/xhtml">
<
head
>
<title>Silverlight</title>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="HelloWorld.html.js"></script>
</
head
>
<
body
>
<div id="SilverlightPlugInHost">
<script type="text/javascript">
createSilverlight();
</script>
</div>
</
body
>
</
html
>
2.
使用记事本,输入如下代码。完成后把文件另存为
HelloWorld.xaml
:
<
Canvas
xmlns
=
"http://schemas.microsoft.com/client/2007"
xmlns:x
=
"http://schemas.microsoft.com/winfx/2006/xaml">
<
Rectangle
Width
=
"350"Height="150"Stroke="
Orange
"StrokeThickness="15" />
<
TextBlock
FontFamily
=
"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
文件中
<
script
type="text/javascript" src="HelloWorld.html.js"></script>
这一行的
src
属性值改为实际的值。
l
Html.js
文件
中
source: 'HelloWorld.xaml',
这一行的source属性值改为实际的值