65.9K
CodeProject 正在变化。 阅读更多。
Home

Microsoft Silverlight 入门

Mohammad Elsheimy
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.43/5 (13投票s)

2011 年 5 月 22 日

CPOL

13分钟阅读

viewsIcon

62811

在本文中，我们将简要介绍 Microsoft Silverlight，了解它如何融入当今的其他技术，并观看它的实际运行。准备好了吗！

这个主题也有阿拉伯语版本，并且有视频讲解，请看这里。

目录

  • 概述
  • 什么是 Silverlight
    • 定义
    • 平台支持
    • 富交互应用程序
    • RIA 统计
    • 为什么选择 Silverlight
    • Silverlight vs. Flash
    • Silverlight vs. WPF
    • 富（Rich）与触及（Reach）
    • 展示
    • Deep Zoom
  • 深入了解
    • Silverlight 和 XAML
    • 部署过程
    • Silverlight 架构
  • Silverlight 5
  • 工具
    • Microsoft Visual Studio 2010
    • Microsoft Expression Studio 4
  • 下一步
  • 演示
  • 摘要

概述

在本文中，我们将简要介绍 Microsoft Silverlight，了解它如何融入当今的其他技术，并观看它的实际运行。准备好了吗！

什么是 Silverlight

定义

Silverlight 是一项 Microsoft 技术，旨在帮助开发人员创建具有最佳用户界面特性和功能的富交互 Web 应用程序。它可以作为插件安装在当今几乎所有流行的浏览器上，用于交付下一代媒体和 Web 应用程序。

Silverlight.png

当我们说“富”应用程序时，我们并不是指那些拥有惊人界面和大量图形的应用程序。事实上，我们说的“富”是指那些拥有标准 Web 应用程序所不具备的大量功能的应用程序。富应用程序的常见例子包括在线文档编辑器和图像处理器；它们都具有高度交互性，并提供大量通常在标准 Web 应用程序中不可用的功能。而这正是 Silverlight 的宗旨，其主要目标是允许为 Web 开发富交互应用程序。

平台支持

与其他许多 Microsoft 技术不同，Silverlight 应用程序可以运行在任何地方。它被认为是跨平台、跨浏览器、跨设备的。它可以运行在 Windows、Linux，甚至 Mac 上；可以运行在 Internet Explorer、Mozilla Firefox、Google Chrome 等浏览器上；还可以运行在 PC、移动设备和掌上设备上。它真的可以无需任何代码更改地运行在任何地方！

另一件有趣的事情是，Silverlight Web 应用程序可以托管在任何服务器上。您可以将 Silverlight 应用程序托管在 Windows、Linux 或 Mac 服务器上，而无需任何额外的代码更改或配置。

富交互应用程序

我们已经讨论了富交互应用程序一段时间了；现在让我们来看看富交互应用程序到底意味着什么。

富交互/互联网应用程序 (RIA) 是一种与用户进行高度交互且功能丰富的 Web 应用程序。它在交互性和功能方面与桌面应用程序非常相似；然而，它是在浏览器中运行的 Web 应用程序，而不是在桌面上运行。所以我们可以说，RIA 应用程序兼具桌面应用程序和 Web 应用程序的最佳功能和用户界面特性。

RIA-Venn-Diagram.jpg 

如今，有许多技术可用于创建 RIA 应用程序。最流行的平台是 Adobe Flash、Microsoft Silverlight 和 Sun Java。值得一提的是，上述每个平台（当然包括 Silverlight）都通过浏览器插件提供，因此用户机器上必须安装其运行时才能运行应用程序。

RIA 统计

现在有人会问：谁会赢得这场竞赛？哪种 RIA 平台最值得花费时间和精力去学习？

首先，让我们看看以下图表，它们代表了 Adobe Flash、Microsoft Silverlight 和 Sun Java 的渗透率。我们看到的第一张图表来自 http://riastats.com，显示 Adobe Flash 已安装在近 96% 的联网计算机上。Microsoft Silverlight 位居第二，约占联网计算机总数的 74%。Sun Java 位居第三，约占联网计算机总数的 73%。

ria-stats.png 

StatOWL 显示的数据略有不同，但更详细。

RIA-market-share.png

从上面的图表中我们可以看到，Microsoft Silverlight 在很短的时间内（首次发布于 2007 年）取得了巨大的成功。然而，我们不能过多依赖这些数据，因为您知道，Microsoft Silverlight 通过 Windows Update 会自动安装在 Windows 机器上。

现在，让我们来看看 Microsoft Silverlight 的特性，看看它为什么是迄今为止最好的 RIA 平台。

为什么选择 Silverlight

除了由 Microsoft 提供之外，Silverlight 的一些特性还包括：

  • 它是免费的。
  • 它运行在所有流行的浏览器、平台和设备上。
  • 它可以作为浏览器内应用程序或桌面应用程序运行。
  • 易于创建看起来“惊艳”的出色 UI。
  • 支持企业应用程序开发。
  • 支持 2D/3D 动画/图形。
  • 原生支持 CLR 和 .NET Framework。
  • 可以使用 JavaScript 进行自动化。
  • 支持多种媒体（音频/视频）格式，并具备流媒体功能。
  • 支持多种丰富的控件，包括 DataGrid。
  • 支持多种企业技术，包括 WCF。

此外，Silverlight 被认为是 Windows Phone 的主要开发框架。

Windows-Phone.png 

Silverlight vs. Flash

Silverlight 和 Flash 非常相似，那么哪个更好，Silverlight 还是 Flash？作为一名 Microsoft 开发者，并且您现在正在一个 .NET 博客上阅读，尽管我从未为 Flash 开发过，但我可以说 Silverlight 是有史以来最好的 RIA 平台！！！但是，我们需要更认真一些。

InfoWorld 进行了一次评测，并对 Silverlight 和 Flash 进行了比较，结果非常出色，Silverlight 以 8.3 分超越 Flash，而 Flash 仅获得 7.8 分。

InfoWorld-Silverlight-vs-Flash.png 

Silverlight vs. WPF

Windows Presentation Foundation (WPF) 是一个利用 DirectX 为 Windows 应用程序中的 UI 进行渲染的图形子系统，由 Microsoft 开发，并作为 Microsoft .NET Framework 3.0 和 Windows Vista 的一部分推出。WPF 被认为是 WinForms（现在被认为是功能完备的）的替代品，而 WinForms 依赖于旧的 GDI 子系统，WPF 依赖于 DirectX。

另一方面，Silverlight 实际上是 WPF 的一个子集，以前 Silverlight 的代号是 WPF/E（WPF/Everywhere），因为它被认为是 WPF 的跨平台版本。虽然 WPF 专注于桌面开发，但 Silverlight 专注于 Web 开发。

WPF-and-Silverlight.png

富（Rich）与触及（Reach）

下图比较了一些可用的 Web 开发技术在丰富性（即 UI 功能）和触及范围（平台和浏览器支持）方面的差异。

Rich-vs.-Reach.png 

从上图我们可以看出，WPF 拥有当今最好的 UI 功能。然而，它主要用于桌面开发，并且只能在 Windows 平台运行。

另一方面，ASP.NET 可以随处运行，但不幸的是，它不支持当今 Web 所需的 UI 功能。

最后，Silverlight 拥有最佳的 UI 功能，并且它还支持广泛的平台和浏览器（其平台/浏览器支持随着每个版本的发布而扩展）。

展示

要全面了解 Silverlight 的功能，请查看世界各地的一些 Silverlight 应用程序。

其中一个最令人印象深刻的应用程序是 SilveOs (http://silveos.com/)；一个 Web 上的迷你操作系统。

还有数千个 Silverlight 应用程序也在此提供： http://www.silverlight.net/showcase。

Deep Zoom

Silverlight 的另一个强大功能是 Microsoft 作为 Silverlight 的一部分推出的 DeepZoom 技术。DeepZoom 允许您查看非常大的高分辨率图像。它通过仅加载用户正在查看的区域并以显示的分辨率显示，从而减少了初始加载时间。当用户平移（或缩放）到后续区域时，会下载这些区域。

Deep-Zoom.jpg

深入了解

Silverlight 和 XAML

与 WPF 一样，Silverlight 中的用户界面是在一种称为可扩展标记语言 (Extensible Markup Language) 的特定语言中声明的（或 XAML，发音为“Zammel”）。XAML 是一种由 Microsoft 创建的基于 XML 的语言，用于初始化结构化值和对象。XAML 元素直接映射到 CLR 对象（例如，<Button> 元素映射到 Button 对象）。

XAML-Logo.jpg 

以前的 ASP.NET 开发者对 XAML 的性质有些熟悉。您有一个所见即所得 (WYSIWYG) 的 XAML 设计器，您可以使用它来设计应用程序的界面。此界面的代码通过一个代码隐藏文件提供，您可以在其中使用您喜欢的 .NET 语言编写代码。

一个页面有两个文件（例如，一个 XAML 文件用于界面，一个 CS 文件用于 C# 代码）的概念，将应用程序开发中的两个主要角色——设计和开发——分开。设计师可以在 XAML 文件中工作，开发者可以在代码文件中工作，并且这两个文件是链接在一起的。这也导致了一种松耦合的设计，将用户界面代码与业务逻辑分开。

Designer-vs-Developer.png 

部署过程

您将遵循哪些步骤来将 Silverlight 应用程序部署给用户？这正是本节的内容。

当您构建 Silverlight 应用程序时，XAML 标记、代码以及所有其他资源会被编译成 .NET 程序集，然后使用 ZIP 压缩并存储在 XAP（.xap）文件中。

XAP-File.gif 

然后，XAP 文件可以托管在 Web 服务器上，并通过声明 Silverlight 插件对象的网页进行引用。当用户导航到该页面时，XAP 文件将被下载到他的 PC，并在该网页上由 Silverlight 运行时执行。

Deployment-Process.jpg 

所以，您只需要开发您的应用程序，获取 XAP 文件，将插件插入网页，然后将该页面和 XAP 文件发布到 Web 上。

Silverlight 架构

下图展示了 Microsoft Silverlight 的基本架构和组件。它显示了表示层（界面）核心组件如何与其他 .NET 和 Silverlight 组件集成，以及提供商提供的服务。

Silverlight-Architecture.png

Silverlight 5

Silverlight 当前的稳定版本是 Silverlight 4。在 2010 年 PDC 上，Silverlight 的第 5 个版本被介绍，它仍处于 Beta 阶段，但预计很快就会发布。

有关 Silverlight 5 的更多信息可以在 http://www.microsoft.com/silverlight/future 上找到。 

在 http://bit.ly/new-silverlight5-en 上详细阅读所有 Microsoft Silverlight 5 的新特性。

Silverlight-5.png

 

工具

用于 Silverlight 的最常用工具是 Microsoft Visual Studio 2010 和 Microsoft Expression Studio 4。 

Microsoft Visual Studio 2010

对开发者而言是最佳选择，对设计师也很友好。请查看：http://www.microsoft.com/visualstudio/en-us。

Visual-Studio-2010.png 

Microsoft Expression Studio 4

包含 5 个工具：

  • Microsoft Expression Blend
    Silverlight 和 WPF 的可视化用户界面构建器。
  • Microsoft Expression Web
    所见即所得 (WYSIWYG) 的网站设计器和编辑器。
  • Microsoft Expression Design
    位图和矢量图形编辑器。
  • Microsoft Expression Media
    数字资产和媒体管理器。
  • Microsoft Expression Encoder
    专业媒体（视频/音频）编码器。

Microsoft-Expression.png

下一步

要开始使用 Silverlight，您需要安装以下组件：

演示

在下面的示例中，我们将创建一个 Silverlight 的“Hello World”应用程序。请遵循以下步骤：

首先，确保您的 PC 上已安装 Silverlight SDK，然后启动 Visual Studio 2010 并选择“新建项目”。

Sample-1-New-Silverlight-Application-Project-500x291.png 

在“新建项目”对话框中，从左侧选择您想要的语言，然后选择 Silverlight 作为项目类型。在中间窗格中，选择“Silverlight 应用程序”开始。

现在会出现另一个对话框，询问您是创建一个新的 Web 应用程序来托管 Silverlight 应用程序，还是不创建。如您所知，Silverlight 应用程序在 Web 页面中定义的插件中运行，该对话框询问是否为您创建一个新的 Web 应用程序项目来托管 Silverlight 应用程序，或者只创建一个简单的 HTML 页面来托管它。保持对话框不变，并确保您已从“Silverlight 版本”组合框中选择了 Silverlight 4，然后点击“确定”继续。

Sample-2-New-Silverlight-Application-Dialog.png 

现在，让我们看看 Visual Studio 为我们创建了什么。在“解决方案资源管理器”中，我们可以看到 Visual Studio 创建了两个项目，一个是 Silverlight 项目，另一个是将用于托管此 Silverlight 应用程序的 Web 项目。

Sample-3-Solution-Explorer.png

查看 Web 项目，我们可以看到 VS 在该项目中包含了两个测试页面，第一个是 ASPX 页面，第二个是简单的 HTML 页面，两者都定义了 Silverlight 插件，并且当您浏览到它们时，它们都准备好显示您的 Silverlight 应用程序。区别在于 ASPX 页面可以定义 ASP.NET 元素和代码，而简单的静态 HTML 则不能。

回到 Silverlight 应用程序，我们可以看到它定义了 4 个文件：

  1. App.xaml:
    定义应用程序范围的界面元素。
  2. App.xaml.cs（C# 代码文件，链接到 App.xaml）
    定义启动逻辑和任何其他应用程序范围的代码。
  3. MainPage.xaml:
    主应用程序页面；包含界面元素。
  4. MainPage.xaml.cs（C# 代码文件，链接到 MainPage.cs）
    主应用程序页面的业务逻辑和代码。

然后我们有两个页面，第一个是 App.xaml，它定义了应用程序范围的元素和代码（在 App.xaml.cs 中），第二个是 MainPage.xaml，它定义了应用程序的主页面，您可以在其中定义界面元素并在 MainPage.xaml.cs 中编写代码。

现在让我们设计我们的界面。转到 MainPage.xaml，并在 <Grid> 元素内，定义一个 Button （您也可以将按钮从“工具箱”拖到设计器上进行定义）。

<Button Width="100" Height="25" Content="Say Hello" Click="Button_Click" />

Sample-4-MainPage-with-Button-500x386.png

从上面的代码行可以看出，我们使用 <Button> 元素定义了一个 Button 控件，并且我们还使用元素属性设置了控件的特性和属性。为了让我们的按钮响应用户单击，我们将 Click 事件连接到了 Button_Click() 函数，我们将在代码文件中定义它。

现在转到 MainPage.xaml.cs 并为按钮定义 Click 事件处理程序：

private void Button_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("Hello, World!");
}

Sample-5-MainPage-CodeBehind-500x386.png

现在运行应用程序并进行尝试。

Sample-6-Running-Application.png 

在我们离开本节之前，让我们看一下 Silverlight 所需的插件。转到 Web 项目的测试页面末尾，向下滚动直到找到定义插件的 <object> 元素。简单来说，Silverlight 应用程序只需要以下 HTML 代码来定义其插件：

<div id="silverlightControlHost">
  <object data="data:application/x-silverlight-2,"
    type="application/x-silverlight-2" width="100%" height="100%">
      <param name="source" value="ClientBin/SilverlightApplication1.xap"/>
      ...
  </object>
  <iframe id="_sl_historyFrame"
      style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>
</div>

正如您所见，我们通过使用 source 参数引用了页面中的 XAP 文件。当您在 Visual Studio 中构建应用程序时，它会在测试页面旁边创建一个名为 ClientBin 的文件夹，并将 XAP 文件放在其中，以便您可以在页面中引用它。

很清楚，不是吗？

摘要

  • Silverlight 是一个用于编写和运行富互联网应用程序 (RIA) 的跨平台应用程序框架。
  • 其运行时作为跨浏览器、跨平台、跨设备的插件提供。
  • 它是 Windows Phone 的主要开发框架。
  • 它是 WPF 的一个子集，因此依赖 XAML 进行 UI 设计。
  • 您使用 XAML 定义界面，并使用您喜欢的 .NET 语言编写代码。
  • XAML 标记和代码会被编译成 .NET 程序集，并压缩成 XAP 文件。
  • 然后，XAP 文件会由一个准备好的网页引用，当用户导航到该页面时，XAP 文件会被下载到客户端 PC。
  • 版本 4 是 Silverlight 当前的稳定版本。
  • Silverlight 5 目前处于 Beta 阶段，并将很快发布。
  • 您使用 Visual Studio 2010 和 Microsoft Expression Studio 来开发和设计您的 Silverlight 应用程序。
  • 如果您是设计师，Microsoft Expression Studio 是更优的选择。  

历史

  • 2011 年 5 月 22 日：首次发布
© . All rights reserved.