在Solution Explorer中,点击Show All Files按钮来查看所有VS自动生成的代码。图2显示了所有文件。

图2
下面一节包含了该Silverlight工程里的基本文件的讲解:
TestPage.html
这是一个测试页,用来测试Silverlight程序。它包含了Silverlight控件并引用了两个JavaScript文件:Silverlight.js和TestPage.html.js。下面是Testpage.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" > <!-- saved from url=(0014)about:internet --> <head> <title>Silverlight Project Test Page </title> <script type="text/javascript" src="Silverlight.js"></script> <script type="text/javascript" src="TestPage.html.js"></script> <style type="text/css"> .silverlightHost { width: 640px; height: 480px; } </style> </head> <body> <div id="SilverlightControlHost" class="silverlightHost" > <script type="text/javascript"> createSilverlight(); </script> </div> </body> </html> |
包含Siverlight控件的HTML页面页可以包含通常的HTML元素来构成一个web页面。当你双击Solution Explorer中的Testpage.html,VS2008将会在一个分离视图里展示页面,这是VS2008的新特性。使用分离视图,你可以在浏览HTML代码时同时预览它在浏览器中的效果。如图3.

图3
TestPage.html.js
这个文件包含了一个Javascript函数,装载Silverlight控件到web页上。它也引用了一个包含Silverlight程序的用户界面定义的XAML文件。
| 以下是引用片段: // JScript source code //contains calls to silverlight.js, example below loads Page.xaml function createSilverlight() { Silverlight.createObjectEx({ source: "Page.xaml", parentElement: document.getElementById("SilverlightControlHost"), id: "SilverlightControl", properties: { width: "100%", height: "100%", version: "1.1", enableHtmlAccess: "true" }, events: {} }); // Give the keyboard focus to the Silverlight control by default document.body.onload = function() { var silverlightControl = document.getElementById('SilverlightControl'); if (silverlightControl) silverlightControl.focus(); } } |