在Visual Studio2008中玩转Silverlight(一)-技术开发专区

在Visual Studio2008中玩转Silverlight(一)

作者：IT168 seasky 编辑：李宁 2007-11-27 00:00

三、开始学习Silverlight

在安装完所需的工具后，我们现在可以建立第一个Silverlight应用程序了。首先启动Visual Studio 2008，并建立一个工程。在建立工程时，选择Silverlight工程类型，然后选择Silverlight工程模板（如图1所示）。并将工程命名为OutFirstSilverlightProject。

图1 第一步：建立一个Silverlight工程

在Solution Explorer中，单击显示所有文件按钮，获得Visual Studio已经加入到这个工程中的所有的文件。如图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>

包含的Silverlight控件的HTML页也可以包含其他用于描述Web页的HTML元素。当我们在Solution Explorer中双击TestPage.html文件后，Visual Studio 2008将显示这个页的内容（是以分割视图形式显示的，这是Visual Studio2008的新特性）。使用分割视图，我们可以在显示HTML代码的同时，查看页面在浏览器中的效果。如图3所示。

图3 在分割视图中显示HTML页

TestPage.html.js

这个文件包含了一个用于装载Silverlight控件的JavaScript函数。它还引用了包含我们Silverlight应用程序的UI的XAML文件，这个文件的代码如下：

// JScript 源代码

// 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();
}
}

第一个HTML页都有一个相应的JavaScript(.js)文件，用于装载被包含在相应的XAML文件中的Silverlight控件。

Page.xaml
这个文件包含了我们的Silverlight应用程序的UI控件。下面的代码显示了在Visual Studio 2008中建立的默认内容：

<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Name="parentCanvas"
        Loaded="Page_Loaded"
        x:Class="OurFirstSilverlightProject.Page;assembly=ClientBin/
OurFirstSilverlightProject.dll"
        Width="640"
        Height="480"
        Background="White"
        >
</Canvas>

我们从上面的代码可以注意到x:Class属性。它指定了一个名为OurFirstSilverlightProject.Page的后期绑定的类（OurFirstSilverlightProject是我们的工程的默认根命名空间，而这个名是类名，在此应该注意一下），这个类的相应代码在ClientBin/OurFirstSilverlightProject.dll中。

Visual Studio 2008提供了支持XAML的智能编辑器，如果我们正在考虑手工写XAML，这是一个非常吸引人的特性。

Page.xaml.vb

这个文件包含了我们的Silverlight应用程序程序中可管制的源代码。在Visual Studio 2008中使用了默认的类名，代码如下：

Partial Public Class Page
Inherits Canvas
Public Sub Page_Loaded(ByVal o As Object, ByVal e As EventArgs)
' Required to initialize variables
        InitializeComponent()
End Sub
End Class

在Page.xaml.vb文件中我们可以写管制代码。当一个Silverlight应用程序准备发布时，只有被编译的dll需要被发布。而源代码无需发布。

Silverlight.js

这是一个由微软提供的文件，它用来建立所有的用于使Silverlight在Web浏览器中运行所需的组件。通过在我们的应用程序包括这个文件，如果Silverlight运行时未安装，目标浏览器将会询问我们是否要安装Silverlight运行时（每一个Silverlight应用程序必须包括这个文件）。在License许可下，我们并不允许编辑这个文件。如果Web服务器布置了多个Silverlight应用程序，我们只需要简单地将这个文件放一份到指定的位置，然后设黑所有包含Silverlight内容的页到这个页即可。

第1页：Silverlight的版本第2页：获得开发Silverlight所需要的工具第3页：开始学习Silverlight

关注我们