Silverlight QuickStart：第 1 部分：创建一个 Silverlight 工程

在你开始之前……

在你创建 Silverlight 内容之前，你需要以下内容。

Silverlight 插件：如果你还没有该插件，跟随本链接给你的浏览器安装 Silverlight 插件。
一个 HTML 文件：你需要一个 HTML 文件来显示 Silverlight 内容。使用你自己的，或者拷贝这个。
一个文本编辑器：你需要一个文本编辑器来编辑你的 HTML 文件，比如 Notepad。

步骤 1：添加脚本引用到你的 HTML 页面

在本步骤中，你为你的 HTML 页面添加 Silverlight.js 和 createSilverlight.js JavaScript 文件的引用，并创建一个元素来承载 Silverlight 插件。 Silverlight.js 文件是一个 JavaScript 帮手文件让你的 Silverlight 内容在多个平台中均可以显示。你将步骤 2 的一部分内容中创建 createSilverlight.js。

获得 Silverlight.js 文件。

你可以在 Silverlight 1.0 SDK 的 Tools 文件夹中获得该文件。
打开你的 HTML 页面，添加以下标记到 <head> 节中。如果你没有可用的 HTML 文件，在 SampleHTMLPage.html 链接上单击右键，选择“目标另存为...”将 SampleHTMLPage.html 保存到和 Silverlight.js 相同的文件夹中。
```
<script type="text/javascript" src="Silverlight.js"></script>
```
创建一个空白文件，并命名为 createSilverlight.js。你将在步骤 3 中使用它。
在你的 HTML 页面中（SampleHTMLPage.html），在 <head> 节中添加另一个脚本引用。这次，设置 src 为 createSilverlight.js。
```
<script type="text/javascript" src="createSilverlight.js"></script>
```

现在，你的 HTML 页面应该包含以下基本元素：

<!DOCTYPE html PUBLIC
  "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>A Sample HTML page</title>
    <script type="text/javascript" src="Silverlight.js"></script>
    <script type="text/javascript" src="createSilverlight.js"></script>
  </head>
  <body>
  </body>
</html>

步骤 2：创建 HTML 承载元素和初始化区域

通过在 <body> 标签之间在你想要显示 Silverlight 内容的地方添加如下三行到你的 HTML 文件中以创建 HTML 承载元素。
```

<div id="mySilverlightPluginHost">
</div>
```
如果你愿意，你可以改变 <div> 标签的 ID。如果你在同一个页面中创建多个 Silverlight 插件实例，为每一个实例重复该步骤，并确保每一个 ID 唯一。

创建一个初始化区域：在你上一步添加的 HTML 之后，添加如下 HTML 和脚本。

<script type="text/javascript">
        
        
        // Retrieve the div element you created in the previous step.
        var parentElement = 
            document.getElementById("mySilverlightPluginHost");
        
        // This function creates the Silverlight plug-in.
        createMySilverlightPlugin();
        
</script>

如果你在同一个页面中创建多个 Silverlight 插件实例，为每一个实例重复本步骤，确保每一个创建函数的名称唯一，或你使用一个带参数的函数，你总是给该参数设置唯一的 ID。同时确保每一个脚本块紧跟在你前一步创建的 DIV 之后。

你已经到了步骤 2 的结尾，你的 HTML 文件应该包含以下元素。

<!DOCTYPE html PUBLIC
  "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>A Sample HTML page</title>
    <script type="text/javascript" src="Silverlight.js"></script>
    <script type="text/javascript" src="createSilverlight.js"></script>
  </head>
  <body>

    <!-- Where the Silverlight plug-in will go-->
    <div id="mySilverlightPluginHost">
    </div>
    <script type="text/javascript">
        
        
        // Retrieve the div element you created in the previous step.
        var parentElement = 
            document.getElementById("mySilverlightPluginHost");
        
        // This function creates the Silverlight plug-in.
        createMySilverlightPlugin();
        
    </script>

  </body>
</html>

步骤 3：定义用于初始化你的插件实例的创建函数

打开你在步骤 1 中创建的 createSilverlight.js 添加如下 JavaScript 函数。

      
function createMySilverlightPlugin()
{  
    Silverlight.createObject(
        "myxaml.xaml",                  // Source property value.
        parentElement,                  // DOM reference to hosting DIV tag.
        "mySilverlightPlugin",         // Unique plug-in ID value.
        {                               // Per-instance properties.
            width:'300',                // Width of rectangular region of 
                                        // plug-in area in pixels.
            height:'300',               // Height of rectangular region of 
                                        // plug-in area in pixels.
            inplaceInstallPrompt:false, // Determines whether to display 
                                        // in-place install prompt if 
                                        // invalid version detected.
            background:'#D6D6D6',       // Background color of plug-in.
            isWindowless:'false',       // Determines whether to display plug-in 
                                        // in Windowless mode.
            framerate:'24',             // MaxFrameRate property value.
            version:'1.0'               // Silverlight version to use.
        },
        {
            onError:null,               // OnError property value -- 
                                        // event handler function name.
            onLoad:null                 // OnLoad property value -- 
                                        // event handler function name.
        },
        null);                          // Context value -- event handler function name.
}

该脚本包含了几个你可能想要自定义的参数，比如插件的高度和宽度（允许使用百分比），包含你 Silverlight 内容的 XAML 文件的名称，一个标识插件行为是否是无视窗的值。

如果你在同一个页面中添加多个 Silverlight 插件，为他们每一个创建一个函数，或者使用带参数的创建函数。总之，确保每一个函数对每一个插件 ID 有特定的结果（示例中的“mySilverlightPlugin”）。

步骤 4：创建 Silverlight 内容文件

现在，你的 HTML 文件已经配置好，创建你的内容。

在你的 HTML 文件相同的目录下创建一个名为 "myxaml.xaml" 的空白文件。如果你在前一步中改变了源文件参数，改变本文件名与你设定的名称匹配。

（可选）如果你想要让你的 Silverlight 工程处理事件、动态创建代码，或者用别的方式与用户进行交互，那就需要再添加一个脚本文件。创建一个 JavaScript 文件，它包含了脚本，然后在你的 HTML 页面中添加该文件的引用。以下示例创建了一个名为 my-script.js 的脚本文件的引用。

<script type="text/javascript" src="my-script.js"></script>

然后，你的 HTML 文件应该包含以下元素。

  <!DOCTYPE html PUBLIC
  "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>A Sample HTML page</title>
    <script type="text/javascript" src="Silverlight.js"></script>
    <script type="text/javascript" src="createSilverlight.js"></script>
    <script type="text/javascript" src="my-script.js"></script>
  </head>
  <body>

    <!-- Where the Silverlight plug-in will go-->
    <div id="mySilverlightPluginHost">
    </div>
    <script type="text/javascript">
        
        
        // Retrieve the div element you created in the previous step.
        var parentElement = document.getElementById("mySilverlightPluginHost");
        createMySilverlightPlugin();
        
    </script>

  </body>
</html>

创建多个 Silverlight 插件实例

如果你想要在你的网页中创建多于一个的 Silverlight 插件，为每一个实例重复步骤 2、3、4。

第一个承载标签 <div> （在步骤 2a 中创建）必须有唯一的 ID。
每一个初始化区域（在步骤 2b 中创建）必须紧跟在你之前在步骤 2a 中创建的 <div> 标签后面。
每一个插件 ID 参数必须唯一。

下一步是什么？

在下一部分中，创建一个 XAML 文件，你将学会如何添加内容到你的 XAML 文件中。