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

做不出第一个例子会打击初学者的信心。经过研究，终于发现了问题所在，作者的这个例子是使用记事本之类的东西进行开发的，并非 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属性值改为实际的值