第一章 入门

欢迎来到奇妙的Silverlight世界，Silverlight是微软用于构建富互联网应用程序(RIA)的技术平台。在Silverlight早期的版本中主要关注的是富媒体，交互性和动画。不过现在，Silverlight的最新版本已经含有更多的新特性使得构建商业应用程序变得更快更容易。当然，我们还是需要借助其他一些图形和动画工具来辅助我们的构建过程。在Web 2.0时代，我们的用户对早期的应用程序提出了更高的要求。Silverlight 4的发布为我们交付专业且易用的应用程序提供了保证。

在本章中，我们将：

• 将您已经掌握的关于.net的技能应用于Silverlight应用程序开发中
• 讨论Silverlight 4中的一些新概念
• 讨论什么样的软件应考虑开发为Silverlight应用程序
• 实际动手开发一个Silverlight应用程序

需要掌握的技能

在开始Silverlight开发前，您必须熟悉Visual Studio，并且具备一些.NET开发的经验，如ASP.NET开发或者Windows窗体应用程序的开发。作为许多.NET开发的核心概念，如果您越熟悉这些内容，那么将对您学习Silverlight越有利。另外，对于基础的.NET开发，您应该熟悉XML。您不必了解XML的方方面面，只需知道元素里面包含属性还有命名空间的一些概念即可。您应该了解通用语言运行时（CLR）是什么并且能够说出DLL和HTML的区别。

作为开发人员，我们都有过学习和探索的经历。我感到非常的幸运能够在ASP.NET、Windows Forms和WPF(当然这是在Silverlight出现之前啦)的世界中进行探索。好吧，现在我们就开始讨论进入Silverlight的世界吧。

对于ASP.NET开发人员的友情提示

 

对于Web应用程序，开发、测试和部署工作可能遵循的信条即是“一次编写，随处运行”，不多对于测试来所情况变得比较糟糕，因为在不同浏览器和设备（例如移动电话或者手持设备）上运行的结果并非一致，为了解决这些浏览器兼容性问题，您不得不针对特定的浏览器编写一些特定的代码，这样一来您的代码可能会变得越来越复杂和越来越难以维护。那么现在您一定能够找到答案了，那就是Silverlight！她将许多以前只能通过AJAX或者JQUERY才能实现的复杂交互逻辑进行了封装并且比他们做的更好。Silverlight应用程序运行方式一致，不论是何种平台或者何种浏览器。这样一来，在您测试您的应用程序时痛苦更少欢乐更多。

对于Windows Forms开发人员的友情提示

 

作为所谓的“智能客户端”的开发人员，您一定有过忍受来自Web开发人员的嘲笑，是的，不可否认，Windows Forms应用程序在部署和平台的移植性上确实有一些“先天”的不足。虽然ClickOnce技术解决了一些问题，但该技术简直就是“胖客户端”的代名词，当运用于Windows Forms中您只会感到落伍和令人厌烦。在一个真实的场景中，假设我们为客户端应用程序定义了一些用户界面，如果您已经编写了一些代码来分析XML文件或者其他什么数据源，并在Windows窗体控件中呈现这些数据。虽然微软并没有废弃这项技术，不过也没有发布新版本了。该技术也到了寿终正寝的时候了。

Windows Forms的继任者便是WPF了(Windows Presentation Foundation)，WPF和Silverlight共享了许多通用的特性。尽管刚开始的时候会有一些学习曲线，但如果您之前有过WPF的学习经验那么对于您学习Silverlight来说将会是非常有益的。

对于WPF开发人员的友情提示

如果您对WPF已经较为了解，那么，您在Silverlight世界里游历将会非常顺利。因为您肯定已经对于XAML，故事板和依赖项属性等等这些概念非常熟悉了。尽管如此，您的旅程也并非没有任何挑战。WPF和Silverlight共享一套通用语言和理论，不过，在两个平台之间还是有数百个不同点。Silverlight是以跨平台和Web为中心的，然而WPF被设计为仅在Windows平台上工作。

题外话：Silverlight的原始代号为WPF/E 或者WPF Everywhere

WPF在用户电脑上能够使用和运行完整的.NET API和资源。尽管如此，考虑到安全问题，Silverlight运行在某个沙盒模式中。这就意味着Silverlight运行时具有某些安全限制。例如，Silverlight应用程序不可以直接访问整个文件系统。

对于Flash/FLEX开发人员的友情提示

Flash开发人员已经是RIA开发的先头部队了。尽管如此，时间会改变一切，在这块领域，一直都不缺乏竞争，Silverlight为Web设计人员和开发人员带来了更多的选择。Silverlight和Flash在RIA的理解上并不相同，如果您对两种技术平台都比较了解，那么您可以根据项目需要而选择更合适的一个来加以使用。

Silverlight中一些新概念

如果您以前没有开发过WPF应用程序，首先对于您来说会有一些比较新的概念需要掌握，就算您是一位WPF老手，还是会有一些惊喜在等着您。

表现与逻辑相分离

一位优秀的开发人员总是会花很多时间将表现与逻辑进行分离。在Web开发术语中，这意味着将逻辑元素写在HTML中而将样式写在CSS中。HTML和CSS使用了不同的语法，在调试页面时需要来回不停的切换，这确实非常需要耐性。对我们Silverlight开发人员来说，表现和逻辑相分离是Silverlight开发的核心概念，不同于CSS和HTML。XAML（eXtensible Application Markup Language， 可扩展标记语言）将逻辑与表现进行了良好的分离。

XAML：嘿，伙计，放松一点，这就是XML而已

XAML实际上就是XML，XAML简化了将图形化对象序列化为XML的一种方式。换句话说，您在XAML里面看到的元素和属性最终会在内存里面显示为对象。她虽然不是一种编程语言，但他的这一套规则，模式和行为非常像某种编程语言。

请看一下代码：网页中的一个按钮。这段代码使用ASP.NET实现：

<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
</form>

以上代码运行后显示一下结果：

在XAML中创建类似按钮的代码也非常简单：

<Grid x:Name="LayoutRoot" Background="White">
<Button Width="100" Height="50" Content="Button"></Button>
</Grid>

 

以上代码运行后的结果：

您也可以在代码中随意定义一些元素，跟在XAML中一样。在代码中创建同样的按钮，下面是一些用C#实现同样效果的代码：

Button b = new Button();
b.Width = 100;
b.Height = 50;
b.Content = "Button";
LayoutRoot.Children.Add(b);
LayoutRoot.Background = new SolidColorBrush(Colors.White);

您将看到，通过代码或者XAML，您都可以定义一个按钮，设置按钮属性，将按钮添加到Grid并且设置Grid的背景色为白色。如果您现在觉得有一点点困惑，那么不用担心，您将很快熟悉XAML。

聪明的读者会注意到我在定义按钮对象的时候还设置了Width和Height属性。在实践部分，您将有机会删除这些属性并看看会发生什么。

依赖项属性

依赖项属性的用途在于提供一种方法来基于其他输入的值计算属性值。这些其他输入可以包括外部属性（如用户首选项）、实时属性确定机制（如数据绑定和动画/演示图板）、重用模板（如资源和样式）或者通过与对象树中其他元素的父子关系而获取的值。此外，实现依赖项属性还可以提供可将更改传播到其他属性的回调。随着学习的不断深入我们将在后面章节学习依赖项属性。

通往Silverlight大道的崎岖道路

几乎每位打算开始学习Silverlight的开发人员都会遇到后面所涉及的一些问题。遇到问题暂时解决不了不如先将问题放下来，我将在后面为大家一一解决这些问题，让您在今后的开发中少走弯路。

不要使用GIF格式的图形文件

Silverlight可以做许多事情，不过有件事情做不到，那就是读取GIF文件。许多读者看到这里一定觉得非常惊讶，不过说实在的，GIF文件格式确实过于陈旧。该文件格式仅支持8位色彩和1位透明度。在如今21世纪，我们的视频卡的性能已经是今非昔比了，一般来说，当前的视频卡都支持24位真彩色和8位透明度的PNG文件格式。如果您仅有一些GIF格式图形资源，您可以使用最拿手的图形编辑软件将他们转换为PNG格式。您不用担心其他的图形格式，如JPG，Silverlight可以很好的支持这些格式。

Visibility != Boolean

另外一点容易使.NET开发人员感到困惑的是Visibility属性。通常它是一个Bool值。一个可视元素要么可见要么不可见。

在Silverlight中，您将发现Visibility属性不再是一个Bool值而是一个具有Collapsed和Visible这两个值的枚举类型。为什么要把如此简单的概念搞的这么复杂呢？为什么在习惯上使用Bool值的时候还要引入一个枚举类型来表示可见性呢？这完全是因为WPF。

在WPF中，元素的可见性有三个状态：Visible、Collapsed和Hidden。Collapsed告诉布局引擎在屏幕上重新排列元素，相反Hidden不会这样做。为了在WPF和Silverlight之间保持兼容性，Silverlight团队决定保留这种模式。尽管如此，Silverlight并不支持Hidden状态。

请记住：Silverlight仅有两种可见状态：Visible和Collapsed。

请使用Button.Content而不是Button.Text

如果您看过前面的XAML代码，您应该注意到了Button对象使用了一个称作Content的属性。许多有经验的开发人员会认为使用Button.Text属性更为合理。为什么Silverlight会做出这样的变化呢？问题的答案会改变您理解Silverlight的方式。

考虑以下代码：

<Grid x:Name="LayoutRoot" Background="White">
<Button Height="50" Width="100" >
<Button.Content>
<CheckBox Content="CheckBox"></CheckBox>
</Button.Content>
</Button>
</Grid>

Content属性被单独作为一个XML元素来对待,并且包含了一个CheckBox控件.最终的呈现效果如下图所示:

请等等,我们再加一点东西

CheckBox也有Content属性,这就意味着我们可以在添加一个控件到CheckBox里面去。我们可以按下面代码来做：

<Grid x:Name="LayoutRoot" Background="White">
<Button Height="50" Width="100">
<Button.Content>
<CheckBox>
<CheckBox.Content>
<Button Content="Button"></Button>
</CheckBox.Content>
</CheckBox>
</Button.Content>
</Button>
</Grid>

运行后应该类似下面的效果：

Button和CheckBox的Content属性实际上是一个ContentPresenter，ContentPresenter是一种特殊的容器来容纳任何对象，包括其他的ContentPresenter。最终的结果是，一个控件能包含另外一个控件，控件中在包含其他控件。通过这个特性，您可以构建在以前看来完全无法想象的复杂控件。

现在，您可以回过头来想一想HTML和Windows Forms可以做到吗？

所需工具

到目前为止，我们已经介绍了有效学习Silverlight所需的技能，并且介绍了对于新手来说需要掌握的一些概念，现在，让我们来看看开发Silverlight需要使用到的工具吧。

为了满足开发Silverlight的最小要求，您需要在一台较为强劲的电脑上安装一下软件：

• Visual Studio 2010 或者安装有Visual Studio Tools for Silverlight的Visual Studio 2008 SP1
• Silverlight运行时插件
• Silverlight工具包
• Expression Blend 3

在Silverlight官方站点的Get Started部分：http://silverlight.net/GetStarted/会有最新的有用链接和安装说明。

Visual Studio 2008或者Visual Studio 2010

Visual Studio是微软.NET平台的最佳集成开发环境。您即可以使用Visual Studio 2008 也可以使用Visual Studio 2010。如果您本身是一位富有经验的.NET开发人员，那么Visual Studio对您来说应该非常熟悉了。下面的截图对您来说应该非常熟悉，就算您以前从来没有开发过Silverlight项目。您也能够轻松的找到Solution Explorer、Toolbox和其他常用的面板。ASP.NET开发人员可以很快的发现分隔窗口，上面为设计视图，下面为代码视图：

 

Silverlight运行时插件

为了开发Silverlight应用程序，您需要安装Silverlight运行时插件。如果您在没有安装Silverlight插件的情况下访问某个Silverlight页面时，您会看到一个带有链接地址的图片来提示您安装Silverlight插件，如下图所示：

 

Silverlight工具包

Silverlight工具包包含了由微软Silverlight产品团队提供的Silverlight控件、组件和工具。该工具包提供了在Silverlight项目构建过程中能够快速开发和设计的诸多功能点。该工具包含了完整的源代码、单元测试代码、范例代码和文档。您可以在以下地址免费下载：http://www.codeplex.com/Silverlight。

Expression Blend

通常，开发人员在第一次接触Expression Blend的时候会被他的界面弄得摸不着头脑。Expression Blend是一款主要面向设计人员的产品，而Visual Studio主要面向开发人员。因此，Blend的界面更接近于设计工具，如流行的Adobe Illustrator或者AdobePhotoshop，请观察下面的截图：

您肯定会想：“我作为一名开发人员，我为什么要去关心一款设计软件？”您应该明白，我所介绍的内容同样适用于设计人员。

Blend会让您开发Silverlight应用程序更容易并且充满乐趣。如果您还是不确定使用Expression Blend的时机，那么您就把她想象成是一个XAML生成器。虽然Visual Studio 2010在Silverlight开发体验中已经向前迈进了一大步，Blend仍为一种不可多得的好工具。Blend提供了更好的工具来创建动画并且您可以直接从Adobe Photoshop和Adobe Illustrator导入图形资源到您的Silverlight工程中。当然，您也可以不用Blend来开发Silverlight应用程序，不过一旦您了解了Blend的强大和易用，Blend定会成为您开发工具中不能或缺的一员。

贯穿整本书，我们即会使用Blend也会使用Visual Studio。随着学习的逐步深入，您一定会爱上这个伟大的工具。

其他有用的工具

在许多商业应用程序开发的情形中，使用合适的工具软件会有利于您的项目构建。除了Visual Studio和Blend以外，还有一些其他工具软件值得您考虑。

Deep Zoom Composer

Silverlight中一个非常酷的特性便是Deep Zoom，当您的用户浏览一些高分辨率的图片是，他们不需要等待文件下载。一个非常棒的例子可以查看一下站点：http://memorabilia.hardrock.com，在这里，您可以直接浏览上千兆的图片。如果您希望创建自己的Deep Zoom体验，您需要下载Deep Zoom Composer，您可以从一下站点下载该工具：

http://www.microsoft.com/downloads/details.aspx?FamilyID=457B17B7-
52BF-4BDA-87A3-FA8A4673F8BF&displaylang=en。

Siverlight Spy

Silverlight Spy是一款让您观察Silverlight应用程序的工具帮助您分解、分析甚至修改XAML或者代码。如果您想知道这是如何做到的或者想要学习反向工程的一些技术，那么这款工具将非常适合您。

Silverlight Spy可以在下面的地址下载到免费试用版：

http://firstfloorsoftware.com/silverlightspy/download-silverlight-spy

安装后的效果如下图所示：

Expression Design

Expression Design是一种矢量图形工具，并且是Exression Blend的理想图形设计工具。如果您熟悉其他的矢量图形工具，那么您上手起来会非常快。

说真的，Exression Design具有许多其他矢量图形工具所具有的特点，不过他是与XAML紧密集成的。使用该工具，可以为您的Silverlight应用程序创建图形，甚至将图形导出成XAML，或者将图形中特定的元素导出成XAML。

 

在Exression Studio 3中，包含Blend和Design，当然也包含Encoder和Web。该套件包可以在微软MSDN站点购买订阅版，详情请参考一下站点：

https://msdn.microsoft.com/en-us/subscriptions/securedownloads/default.aspx

Expression Encoder

Expression Encoder是一种多媒体转换和基本的编辑工具。Silverlight支持某些特定的多媒体格式，并且使用编码器可以将大多数视频文件转换成Silverlight支持的视频格式。

您也可以在现有视频基础上增加一些装饰元素来增强视频。刚开始这听起来会让人觉得很困难，Encoder的图形用户界面非常友好。我们将在第三章具体学习Expression Encoder并且将丰富的多媒体集成到Silverlight应用程序中。

InkScape

InkScape是一种开源的矢量图形编辑工具。如果您不打算使用Adobe Illustrator或者Expression Design，那么，InkScape完全可以满足您的需求。

如果您也使用其他一些矢量图形工具，InkScape仍然有他的独到之处。他支持导入和导出XAML文件，将位图转换成矢量图形，等等其他特性。您可以在以下地址下载该软件：

http://www.inkscape.org/

开始行动-创建Silverlight工程

好了，理论知识已经讲的够多了，让我们开始创建一个Silverlight工程。请按下面步骤一步步的做：

1. 启动Visual Studio然后点击文件|新建工程
2. 选择创建一个新的Silverlight应用程序，然后点击确定：
   1. 
3. 此时会弹出如下所示的对话框，现在我们只需要点击确定按钮，保留这些默认设置：
   1. 
4. 此时MainPage.XAML文件会自动打开。
5. 在Grid元素间添加如下代码：

   <Button Width="100" Height="50" Content="Button"></Button>
   

6. 点击F5或者点击调试菜单中的启动调试

7. 如果您没有在Web.config文件中将debug属性设置为true则会出现如下对话框，选择第一项启动站点调试：

   1. 

8. 最后您将在浏览器中看到一个按钮：

   1. 

9. 恭喜您！刚刚您已经成功创建了一个Silverlight应用程序。

我们可以通过Expression Blend轻松的完成上面的程序，不过，作为一名好的.NET开发人员，我认为最好还是从熟悉的开发工具着手学习一种新技术，如Visual Studio。在第二章，我们将会学习如何使用Blend开发Silverlight应用程序。

 

 

试一试

现在，我们已经有了一个可以运行的Silverlight程序，我们试着删除按钮的Height和Width属性再次运行该程序。此时按钮覆盖了整个Grid，这在大多数情况下是没意义的。

Grid布局面板的优势在于可以像HTML中的table标签一样定义行和列。

在我们的程序中，让我们一个含有两个等宽列的Grid布局面板，并且把按钮放在右边的列中。要这么做，我们需要将XAML代码修改为下面的代码：

<Grid x:Name="LayoutRoot" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*"></ColumnDefinition>
<ColumnDefinition Width=".5*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Grid.Column="1" Content="Button"></Button>
</Grid>

此时我们的程序看上去就像下面的样子：

 

在XAML中，我们通过在Grid.ColumnDefinition元素中添加两个ColumnDefinitions元素定义两个列。为了将按钮放在右边的列中，我们需要在Button元素中添加Grid.Column=”1”，通过这段代码来告诉Grid需要将按钮放在第二列中。ColumnDefinition列表中的元素索引是从0开始的。如果我们不指定按钮在Grid中的位置，那么Grid会默认认为按钮放在索引为0的那一列。

如果您愿意，您可以定义任意多的行和列，不过请记住，简单的才是好的。

我们再来看另外一种布局面板：Canvas。将Grid替换成Canvas并且删除Grid的行列定义代码，修改后的代码应该像这样：

<Canvas x:Name="LayoutRoot" Background="White">
<Button Content="Button"></Button>
</Canvas>

请看设计界面或者启动解决方案，此时按钮的位置发生了变化，按钮跑到了程序的左上角：

按钮怎么会离边缘这么近呢？我们把代码修改一下：

<Button Canvas.Left="100" Canvas.Top="50" Content="Button"></Button>

现在，程序看上去好多了：

我们来看看解决方案中都有哪些工程，一个是Silverlight应用程序工程，另外一个是ASP.NET工程。

刚刚发生了什么

刚才您不仅创建了您第一个Silverlight应用程序，您也对XAML做了一些修改，并且运行了修改后的程序，并且对一些XAML做了调试。另外，您也体验了两种不同类型的布局面板；Grid和Canvas。根据您界面中不同需求，您会使用不过的布局容器去包装控件。如果您想使用类似HTML中table元素的方式来进行布局则应该考虑Grid。如果需要做绝对定位，则可以使用Canvas。还有另外一些布局控件，如StackPanel可以一个接着一个地“堆叠”控件。如果您想创建工具栏则应该考虑使用它。我们将在下章讨论不同类型的容器。

总结

在本章，我们谈到了如何利用以前掌握的知识来学习Silverlight。我们也学习了一个Silverlight中的新概念，如依赖项属性、XAML、ContentPresenter和开发Silverilght需要用到的工具，最后学习了如何创建Silverlight应用程序。

特别地，我们学习了下面的知识：

• 您以往的.NET开发经验将有助于您学习Silverlight
• XAML是一种基于XML的声明式语言
• 控件可以包含其他控件
• Expression Blend是一款值得花时间学习的优秀工具
• 如何创建Silverlight应用程序，体验不同类型的布局控件

现在，我们已经学习了Silverlight的基础知识，我们已经准备好使用Silverlight来增强现有的Web站点，请参看第二章，谢谢。