silverlight4入门到精通01

第1章

Silverlight基础

本章旨在教会你：

使用Microsoft Web Platform Installer安装并配置Web Platform、数据库和工具 安装Visual Web Developer 2010 Express来创建Silverlight应用程序 构建第一个Silverlight应用程序

1.1 获取工具

为了开始Microsoft Silverlight开发，最简单的方式就是使用Microsoft Web平台安装程序(Web PI)。这个简单的应用程序可帮助你安装和配置许多东西，包括工具、服务器、数据库、编程API和应用程序。

使用Web平台安装程序

1. Web PI可以从http:///web免费下载。安装并启动Web PI后，会看

到如下图所示的一个屏幕。请选择“Web平台”标签。

silverlight4入门到精通01

2.

3.

4.

第一个区域“Web服务器”(如下图所示)允许安装“Internet信息服务”(IIS) Web服务器和配置大量选项，它们涉及应用程序开发、常用HTTP功能、与之前版本的兼容性、部署和发布，健康和诊断，管理、性能和安全性，等等。在“Web服务器”下方有一个“单击以包括建议的产品”链接。请单击这个链接，随后会出现一个绿色勾号。

第二个区域是“框架和运行时”(如下图所示)。可在这里安装和配置Microsoft Web平台的各种开发功能，包括http://，http:// MVC和PHP。如果“框架和运行时”旁边没有出现勾号，请单击“单击以包括建议的产品”链接。

“数据库”区域(如下图所示)允许安装SQL Server Express引擎。可利用它向Web应用程序添加数据库。以后通过本书学习开发时，会用到这样的数据库。由于要使用的一些工具不在默认列表中，所以目前需要做两件事情。 a. 首先，如果“数据库”(如下图所示)旁边没有绿色勾号，请单击“单击以包括建 议的产品”链接。如果这个链接不可用，表明已经安装了建议的工具，所以可以 安全地跳过当前步骤。

b. 接着，单击“数据库”区域底部的“自定义”链接。随后会显示一个新屏幕，允 许自定义要安装SQL Server的哪些部分。此时，会看到已经勾选了SQL Server Express 2008 R2，但没有勾选SQL Server 2008 R2 Management Studio Express。

silverlight4入门到精通01

c. 勾选“SQL Server 2008 R2 Management Studio Express”，单击“返回Web平台”。 d. 还不要单击“安装”！

5. 最后一个区域是“工具”，它允许安装和配置用于http://，Silverlight，JavaScript

等的开发工具。和本节之前讨论的一样，如果“工具”旁边没有出现绿色勾号，就会显示“单击以包括建议的产品”链接。请单击“自定义”，勾选所有复选框，然后单击“返回Web平台”(如下图所示)。

6. 到此为止，我们已经准备好开始安装了。所以，请单击窗口底部的“安装”按钮。Web

silverlight4入门到精通01

PI会显示要安装的所有项目的一个列表，要求你接受许可条款。请单击屏幕底部的“我接受”按钮继续(如下图所示)。

7. 由于选择安装SQL Server Express，所以会出现下图所示的另一个对话框。它询问如何

设置安全性。有两个选择。第一个是使用“集成Windows身份验证”，也就是用你的Windows帐户登录数据库。第二个是使用“混合模式身份验证”，它既支持集成Windows身份验证，也允许SQL Server拥有它自己的登录系统。请选择“混合模式身份验证”，并为管理员帐户提供密码。对于本书来说，请使用Sasa123!作为密码。

8. 单击“继续”按钮，Web PI会下载并安装组件。如下图所示，这可能要花一定时间。

silverlight4入门到精通01

9. 完成之后，Microsoft Web平台、数据库和进行开发所需的全部依赖项便安装好了。注

意，在某些版本的Windows 7中，可能出现一条消息提醒SQL Server 2008 Management Studio Express在Windows 7中有一些已知的问题。如果出现该消息，请直接单击“运行”忽略。

1.2 安装Visual Web Developer Express

Microsoft Visual Studio套装软件价格不菲，但你可以考虑使用它的免费版本，也就是所谓的Express版或学习版。

可选择以下Express版：

Microsoft Visual Basic 2010 Express Microsoft Visual C# 2010 Express Microsoft Visual C++ 2010 Express Microsoft Visual Web Developer 2010 Express

注意 本书使用的是Visual Web Developer 2010 Express。由于Microsoft现在将Web开

发的一切都集成到“Web平台安装程序”中(参见1.1节)，所以假如按照1.1节的步骤操作，那么Visual Web Developer 2010 Express应该已经安装好了。

1.3 安装Silverlight工具

Silverlight是一个正在快速演变的平台，这里讨论的一些细节等你读到本书的时候可能已经发生了变化！无论如何，获取最新信息最理想的地方是http://。下载

silverlight4入门到精通01

Silverlight工具的最佳地点是http:///getstarted。

所有Silverlight工具都包括以下组件：

Silverlight运行时 Silverlight Tools for Visual Studio(提供了与VS的集成，并提供了相应的模板，方便

你开始构建Silverlight应用程序)

Silverlight SDK

一些附加的控件

WCF RIA Services包(便于构建一些商业应用程序

)

注意 由于Microsoft现在将Web开发的一切都集成到“Web平台安装程序”(参见

1.1节)，所以假如按照1.1节的步骤操作，那么所有Silverlight工具应该已经安装好了。

除此之外，为了在Visual Studio中顺利创建Silverlight应用程序，需要安装Silverlight 4 for Developers，请直接访问http:///fwlink/?LinkId=146060下载并安装，如下图所示。

1.4 创建第一个Silverlight应用程序

现在，你应该安装好一切，可以创建第一个应用程序了。本节将讲述如何创建一个简单的Silverlight应用程序，并对它进行解析。

构建简单的Silverlight应用程序

1. 打开「开始」菜单，启动Visual Web Developer 2010 Express，如下图所示。

silverlight4入门到精通01

2. 为了创建一个新的Silverlight应用程序，请选择“文件”|“新建项目”，如下图所示。

3. 随后会出现下图所示的“新建项目”对话框，其中列出了已安装的模板。模板是应用

程序的“骨架”。选定一个模板后，Visual Web Developer会创建这种应用程序所需的一切基本文件。模板按编程语言组织，每个模板都有Visual Basic和Visual C#版本。请打开Visual C#文件夹。随后会看到多种不同的应用程序类型，其中包括Windows，Web，Cloud和Silverlight。

4. 选择“Silverlight应用程序”模板。在“名称”文本框中输入SbSCh1_1，然后单击“确

定”。随后，Visual Web Developer会开始创建Silverlight应用程序。Silverlight应用程序需要在Web上运行，所以需要一个网站，以便在其中运行。Visual Web Developer能自动为你创建该网站。

5. 随后将出现下图所示的“新建Silverlight应用程序”对话框，询问是否想在新网站中

容纳应用程序。请确定已勾选了该复选框。然后，Silverlight会创建和你的Silverlight

项目同名的Web项目，但使用后缀.Web。其他选项保持默认值不变，然后单击“确定”。

silverlight4入门到精通01

6.

Visual Web Developer会创建一个新的解决方案。在一个解决方案中，可以对不同的项目进行组织。你的解决方案将包含两个项目：Silverlight应用程序和用于容纳Silverlight应用程序的网站。可在下图所示的解决方案资源管理器中清晰地看到这一点。

Silverlight应用程序使用“可扩展应用程序标记语言”(XAML)文件描述用户界面(UI)。在MainPage.xaml文件中包含默认UI。双击该文件，在设计器中打开UI。屏幕左侧竖直显示了一组标签，分别是“工具箱”、“文档大纲”和“数据源”。请打开“工具箱”标签页，如下图所示。

silverlight4入门到精通01

7. 单击工具箱右上角的图钉按钮，使工具箱固定在屏幕上。单击“通用Silverlight控件”

区域，随后会看到简单Silverlight控件的一个列表，如下图所示。

8. 第一个应用程序将使用两个Label控件、一个TextBox控件和一个Button控件。为了

添加第一个Label控件，请双击工具箱中的Label控件。随后会发生两件事情。 首先，Silverlight在设计平面添加Label的一个可视形式(见下图)。

其次，将Label的标记代码添加到XAML中(见下图)。

注意 创建Silverlight应用程序时，Visual Web Developer允许以可视化的方式设计，也

允许直接写代码，专门有工具保持两者的同步。

9. 现在需要编辑Label，使其不显示默认的“Label”字样。有两个办法可以执行这个操

作。可以使用“属性”窗口更改Content属性的值。“属性”窗口默认显示在屏幕右下角，按F4键可以打开或关闭它。请在Content属性右侧的文本框中输入“你的名字是什么?”，如下图所示。

silverlight4入门到精通01

除此之外，还可以直接编辑XAML。为此，请在sdk:Label标记中添加一个名为Content的属性，将它的值设为"你的名字是什么?"。注意，如果使用“属性”窗口来设置，会自动在XAML中添加相应的属性。

刚才已配置好了你的第一个Silverlight控件！接着还要添加其他控件。

配置更多Silverlight控件

1. 双击工具箱中的TextBox，从而在设计器中添加一个TextBox控件。注意，TextBox被

添加到刚才创建的Label的正下方。可以使用鼠标拖动TextBox，把它定位到Label的右侧，如下图所示。

2. 重复这个过程添加一个Button控件。把它拖放到TextBox右侧，将Content属性更改

为“Go”，而不是默认的“Button”。注意，虽然Button是不同的控件类型，但添加和配置其Content属性的方式和Label控件是一样的。

3. 要添加的最后一个UI元素是另一个Label。双击工具箱中的Label添加一个新控件。

新控件会自动定位到原始Label的下方。保持这个位置不变，但要用鼠标拖动Label

Label右侧会显示一个小圆点。的右侧，使它变得更宽，如下图所示。将鼠标移到这里，

指针会变成一个左右箭头。在这种情况下，按住鼠标左键不放，向右拖动鼠标即可。

silverlight4入门到精通01

4. 注意一下XAML代码。Visual Web Developer检查每个控件的Name属性。默认情况下，

在对控件命名时采用的是控件类型加一个编号的方式。第一个Label控件名为label1，

label2，第二个Label名为label2，以此类推。在当前这个应用程序中，存在着名为label1，

textBox1和button1的控件。在实际应用中，最好是为控件指定更有意义的名称，但目前姑且让我们保持默认值不变。

5. 接着，让我们添加少许代码使应用程序能真正做某事。双击Go按钮，随后切换到代

码窗口，表明进入代码编辑模式。

①Visual Web Developer会自动创建一个名为button1_Click的存根函数。要在其中写代

码，以便在用户按下该按钮时做某事。

为按钮添加功能

1. 在button1_Click函数中，输入单词label2。几次键击之后，会自动弹出“智能感知”

菜单。

2. “智能感知”根据.NET Framework中已安装的类以及应用程序中的控件实例来推测你

接下来要输入什么内容。由于目前唯一以“Lab”开头的只有Label类(在.NET Framework中)和当前应用程序中的label1和label2控件，所以“智能感知”会将选择范围缩减至这三个选项。可坚持自己输入label2，也可从菜单中选择label2，如下图所示。

3. 为了访问.NET Framework中的一个控件的属性，要使用句点语法。例如，label2的

Content属性是通过label2.Content来访问的。在label2之后输入一个句点符号之后，“智能感知”会再次介入，列出该控件可以访问的所有属性。请从中选择Content属性(或直接输入)。

4. 完成整行代码，如下所示：

private void button1_Click(object sender, RoutedEventArgs e)

{

label2.Content = "Hello World, " + textBox1.Text;

}

不管用户在文本框中输入什么，输入的文本都会和“Hello World, ”连接，结果字符串被赋给label2标签控件的Content属性。所以，一旦单击Go按钮，就会在label2中显示文本“Hello World, ”加上文本框中输入的名字。 ① stub function，即自动生成的函数。已添加好了基本结构，就等你添加实质性的代码。——译注

silverlight4入门到精通01

5. 按F5键运行应用程序。随后会启动默认浏览器，并运行新的Silverlight应用程序。请

在文本框中输入一个名字，并单击Go按钮。随后，会看到label2显示文本“Hello World, ”加这个名字，如下图所示。

恭喜！你已经创建、设计、编码、编译、部署和运行了第一个Silverlight应用程序。

1.5 小结

学习了如何下载、安装和使用Microsoft Web平台安装程序(Web PI)来安装和配置

创建Silverlight应用程序所需的软件、数据库以及工具。

学习了如何用Visual Web Developer 2010 Express开发环境创建Silverlight应用程序。

学习了在哪里获取Silverlight Tools for Visual Studio的最新版本。

构建一个新的Silverlight应用程序，学习了这个过程中涉及的步骤。