Silverlight入门：第一部分 - 开发工具与程序入门

开发工具

当然了，不管做任何开发，你都只需要一个文档编辑器和一个编译器。但你 没有任何理由不使用世界级的开发工具。所以我将在这里推荐给你一套开发工具 ，让你可以更加简单快捷地构建Silverlight应用程序。注意这些都不是必须的 （重申一遍，如果你是发烧级别的开发人员，那么你只需要一个记事本和一个编 译器 :-)）。虽然它们不都是免费的，但是我还是极力推荐它们，不只是因为我 效力于微软，而是我真的觉得它们是世界上最棒的开发工具。

Visual Studio 2008

你要确定你已经有了Visual Studio 2008，安装Silverlight工具之前你还需 要装上SP1补丁，所以先确认一下你已经完成了这些工作。任何版本的SP1补丁都 可以。如果你没有Visual Studio 2008，那么你可以使用免费的速成版Visual Web Developer Express 2008来开发Silverlight。如果你同时需要做数据库开 发，那么你还可以免费获得SQL Server 2008速成版。

Silverlight Tools for Visual Studio

Silverlight Tools for Visual Studio

需要另外下载，包括了SDK、开发运行时（用于调试）和一些用于Visual Studio的工具（项目模板、XAML生成器等等）。只需要安装这一个包就可以让你 满足开发Silverlight所必需的所有条件。

你可以分别下载Visual Studio和Silverlight Tools。如果你已经有了VS， 那么只需要下载Silverlight Tools并安装就行了。如果你还没有VS，考虑使用 网络平台安装工具（Web Platform Installer）来安装包括Visual Studio、SQL Server速成版以及Silverlight Tools等工具，而不需要到处寻找下载链接。你 可以在这里获得网络平台安装工具：

如果你已经安装了Visual Studio，你仍然可以通过网络平台安装工具来安装 Silverlight Tools，或者直接点击这里下载。

Expression Blend

Expression Blend是一个交互式的开发工具。它是XAML的可视化编辑器， XAML是Silverlight以及Windows Presentation Foundation（WPF）的底层表示 技术。不仅设计外观漂亮，还能方便地控制布局、动画、样式以及模板。我相信 它是XAML开发必不可少的工具。不过，这个工具并没有免费版本，除非你是MSDN 订阅用户。它也被包含在Expression Studio中。你可以在这里下载试用版。我 们下一步将用Blend来布局。

Silverlight Toolkit

Silverlight Toolkit是在核心控件集之外的扩展包。包括了图表控件、日期 /时间控件、手风琴控件（互斥级联菜单）等等。最妙的是，这些控件的源代码 （也包括核心控件）可以方便你学习和扩展！

控件包可以从CodePlex下载，我们也会在本系列中使用其中的一部分控件。

你还可以使用其他的一些控件套装或工具，比如像是我们将在第三部分谈及 的.NET RIA Services，但上面推荐的是我认为你开发Silverlight所需要的最精 简的工具。在进行本教程的第二步之前先要安装它们。了解开发环境

一旦你安装完了Visual Studio和Silverlight Tools，你就会注意到VS的新 建项目对话框中多了一个新组：

你会在Silverlight类别下发现一些新的模板，至少包括Silverlight应用程 序、Silverlight类库以及Silverlight导航应用程序。其它的可能取决于你安装 的扩展工具。

在这一步选择Silverlight导航应用程序并给它起个名字（我把我的命名为 TwitterSearchMonitor）。

在下个窗口你将看到询问你是否要创建一个Web项目：

如果是新的项目，我强烈建议你选择创建新的Web项目。这样你将会得到一个 Web环境使你可以运行应用程序。这将避免从本地文件系统访问Web服务遇到的问 题。在HTTP下运行你的程序将使你避免在Web服务下调试时最经常遇到的错误。 你可以选择ASP.NET Web应用程序项目、ASP.NET Web站点，如果你安装了 ASP.NET MVC的话，你还可以选择ASP.NET MVC 项目。如果你不确定到底要选哪 个，就选默认值。

项目结构

如果你的应用程序创建完了，你将会看到类似下面的内容：

这里显示了你的Web应用程序（承载了Silverlight应用程序）以及为 Silverlight应用程序预建的测试页以及Silverlight应用程序本身。让我们先把 注意力集中到Silverlight应用程序项目。

这里有一些关键文件你应该注意，我们将会在本系列中逐个研究他它们：

App.xaml – 这是一个应用类资源文件。如果你要放置资源文件（我们将在 样式章节中讨论）或者启动全局事件，就需要在这里处理。这个文件同时也是你 的应用程序的入口，并且告诉Silverlight插件下一步做什么。

MainPage.xaml – 这个页面是你选中的模板的一部分。它不必要被叫作 MainPage，但那是项目模板使用的默认值。这是你的应用程序的初始用户界面。 不要和刚才说的那个混淆。

Assets/Views文件夹–他们包含了素材（文件、图片、样式表等等）以及你 的应用程序的其它一些用户界面。

XAML文件描绘了你的应用程序的用户界面。它们仅仅是使用XAML标记语言的 XML文件。我们将会在之后的教程中修改它们。

当你编译了解决方案（接着上面的步骤做），你将会发现在Web应用程序的 ClientBin文件夹下面多出了一个以XAP为扩展名的文件。这是编译完成了的 Silverlight应用程序。它其实是一个文档（又称ZIP），只不过扩展名不同。如 果你把它的扩展名改成.ZIP并用工具打开，你可以看见其中的内容。

XAP文件被送至你的浏览器。这个文件承载在Web服务上并被传给终端用户。 XAP文件通过<object>标签承载在基础HTML页面上。

注意：Silverlight是客户端技术，并能承载在任何Web服务器上。可以是任 何能推送XAP文件并具有从服务端正确解析MIME类型能力的服务器 （application/x-silverlight-app）。只要能做到这点，我们并不在意推送XAP 文件的服务器是什么类型的。

ASP.NET和HTML的测试页已经为你创建了基础的模板。因为它们本质上是相同 的，所以我通常为了精简而删除其中一个。在XAML页面添加用户控件

我们选择的模板是导航应用程序模板，意味着它已经自带了一些导航功能。 这是Silverlight中相当新的一个功能，并且在你的应用程序中能看见一个类似 于母版页的效果。如果你查看Views文件夹你将会发现一个About.xaml文件、一 个ErrorWindows.xaml文件以及一个 Home.xaml文件。现在让我们把注意力集中 在Home.xaml上，因为它是程序读入的第一个视图。双击打开文件你将看见 Visual Studio读入了XAML。

在这个页面你将看到在Grid中用XAML代码定义了一些视图，包括了一些其他 的控件，像是 StackPanel和TextBlock（我们将在本系列第二部分讨论 StackPanel）。它们都是Silverlight核心控件集的一部分。 TextBlock可以让 你向用户显示文字。如果你现在就运行应用程序（按F5可以运行在调试模式下— —继续选择修改web.config文件从而开启调试）。你应该看到如下界面：

注意应用程序中显示的文字并与TextBlock中的文字作比较。同时注意到右上 角的链接样式按钮。它们显示了到其它独立视图的导航点。让我们添加一些XAML 并来看看怎么写代码。

在Home.xaml页面中的第二个TextBlock后面，让我们像这样来用XAML添加一 个按钮：

1　<Button　Content="Click　me"　x:Name="MyButton"　 FontSize="18"　Width="150"　Height="45"　/>

这将会使得在视图中的Home page content的文字区域下方显示一个按钮。注 意到x:Name属性了吗？这是元素的唯一标识，它可以让我们可以在代码中引用它 们。你可以把它看作是控件的ID属性。现在让我们为它添加点击事件。我们有两 种简单的方式来为按钮（其它元素也一样）添加事件。你可以在按钮中输入 Click，然后VS会智能地询问我们是否要生成一个新的事件处理器：

我们也可以在Home.xaml.cs页面直接用代码写一个事件处理器：

1　public　Home()
2　{
3　　　　　InitializeComponent ();
4　　　　　MyButton.Click　+=　new　RoutedEventHandler (MyButton_Click);
5　}

这两种方法都可以工作。为了简单你可以选择任意一个你喜欢的，我现在将 使用XAML来生成的方法。现在在MyButton_Click函数中，我们可以写一些代码来 操控我们的用户界面或其它的操作。让我们通过改变HeaderText文本框来输出 Hello World（因为HeaderText是x:Name属性的值，所以我们可以很容易地在代 码中引用它），从而完成我们的第一个例子。

1　void　MyButton_Click(object　sender,　RoutedEventArgs　e) 
2　{
3　　　　　HeaderText.Text　=　"Hello　World!";
4　}

完成以后我们通过F5来运行程序，可以看到点击按钮以后文本框的内容被改 变了：

下一步

我们已经创建了第一个HelloWorld Silverlight应用程序。我们已经获得了 更多完成Twitter搜索应用程序所需的知识。让我们进入第二部分，来改变我们 应用程序视图的布局。