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

本文是 Silverlight 入门系列的第一部分。

在本系列中，我们最终将构建一个可以使用关键字查询Twitter上的内容，并能在指定时间间隔自动刷新的应用程序。在我们深入学习之前，让我们先确定你已经获得了必要的开发工具并具备一些基本的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搜索应用程序所需的知识。让我们进入第二部分，来改变我们应用程序视图的布局。更多其它的Silverlight入门资源可以从这里获得：

• Silverlight 社区站点 – 获取入门资源

• 入门视频 (讨论以上的内容)

  这里我们将不提供代码下载，因为本部分仅仅是一个入门教程。未来的几个部分我们将总是提供完成了的代码下载链接，希望这对你能有所帮助。进入第二部分！

本文内容转自焦炜的个人博客