XAML 和 Silverlight

Nandini S Anatharam

3.06/5 (8投票s)

2008年4月7日

CPOL

13分钟阅读

64464

什么是 XAML 及其基础知识

引言：Web 中的 XAML

富互联网应用程序（RIA）是一种全新的、引人入胜、交互性强、轻量级且灵活的 Web 体验。RIA 提供了智能桌面应用程序的灵活性和易用性，并增加了传统 Web 应用程序的广泛覆盖范围。这种更丰富的功能可能包括在客户端使用的技术中实现的任何功能，包括拖放、使用滑块更改数据、动画以及客户端与服务器进行异步交互或图形处理。使用 RIA 功能的一些网站包括 Gmail、Yahoo! Mail (beta)、Flickr 和 Popfly。

RIA 技术的出现为 Web 应用程序带来了相当大的额外复杂性。仅使用标准 HTML 构建的传统 Web 应用程序，软件架构相对简单，并且使用有限的开发选项构建，设计和管理起来相对容易。对于使用 RIA 技术交付 Web 应用程序的个人或组织来说，其额外的复杂性使得设计、测试、度量和支持更加困难。

RIA 架构中使管理流程复杂化的方面包括：

更大的复杂性使开发更困难
异步通信使得隔离性能问题更加困难
并非所有功能都由单一技术支持，因为设计者使用的技术与开发人员使用的技术之间存在不匹配。例如：XUL、Java 和 Applet、Flash、Laszlo

XAML 为上述所有问题提供了一个简单的解决方案。微软的 Silverlight 使用 XAML，它是一个跨浏览器、跨平台的插件，用于在 Web 上交付下一代基于 .NET 的媒体体验和丰富的交互式应用程序。

背景

什么是 XAML？

可扩展应用程序标记语言 (XAML，发音为 zammel)，由微软开发，是一种用于初始化结构化值和对象的声明性语言。您可以在声明性的 XAML 标记中创建可见的用户界面 (UI) 元素。它是一种区分大小写的语言。XAML 在 .NET Framework 3.0 技术中得到了广泛应用，尤其是在 Windows Presentation Foundation (WPF) 中，它被用作用户界面标记语言来定义 UI 元素、数据绑定、事件处理和其他功能；以及在 Windows Workflow Foundation (WF) 中，其中工作流本身可以使用 XAML 来定义。

XAML 是一种基于 XML 的语言，用于定义图形资源、用户界面、行为、动画等。基本上，XAML 渲染丰富的 UI。它由微软引入，作为 Windows Presentation Foundation（一种面向桌面的技术）的标记语言。WPF 允许定义 2D 和 3D 对象、旋转、动画以及 XAML 文件渲染的各种其他效果和功能。XAML 元素可以直接映射到通用语言运行时 (CLR) 对象实例，而属性可以映射到这些对象上的 CLR 属性和事件。在典型用法中，XAML 文件将由可视化设计和开发工具生成，例如 Microsoft Expression Blend、Microsoft Visual Studio、XAML Pad 或 Windows Workflow Foundation (WF) 可视化设计器。

尽管 XAML 已作为 WPF 的一个组成部分引入，但 XAML 标准本身并非 WPF（甚至 .NET）特有的。XAML 也可以用于使用任何编程 API 开发应用程序，并且本身是语言无关的。然而，该技术的一个关键方面是处理 XAML 所需工具的复杂性降低，因为它只是 XML。由于 XAML 仅基于 XML，开发人员和设计人员可以自由地共享和编辑内容，而无需进行编译。

用于 Web 应用程序的 XAML 以 Silverlight 的形式出现。Microsoft Silverlight 是 WPF 的一个基于 Web 的子集。开发期间，它的名称是 WPF/E，代表“Windows Presentation Foundation Everywhere”。Silverlight 基于 XAML-Jscript-HTML（对于 1.0 版本）和 XAML-.NET（对于 1.1 版本）。Silverlight 子集能够创建类似 Flash 的 Web 和移动应用程序，其代码与 Windows .NET 应用程序相同。不支持 3D 功能，但包含 XPS、矢量绘图和硬件加速，从而为网站渲染丰富的 UI。Silverlight 使用的 XAML 与 WPF 使用的 XAML 不同，前者是桌面版 XAML 的面向 Web 的子集。

从用户角度来看，界面功能将有巨大的飞跃。最终，用户会发现很难区分在线 Web 应用程序和桌面应用程序。现在，各种媒体（包括音频、视频和 2D 图形）可以无缝地集成到界面中。

Silverlight 中的 XAML

Silverlight 中的 XAML 基本嵌入在您的 HTML 页面中，Silverlight 插件允许您将 XAML 对象渲染到页面上。Silverlight 和 XAML 无缝集成。每个 XAML 元素都可以从与任何 HTML 元素交互的同一客户端 JS 中访问或操作。因此，您可以在 Silverlight 内容之上叠加 HTML 控件（通过创建无窗口框架）。然后，您可以使用单独的 code-behind 文件中的 JavaScript 来响应事件并操作您在 Silverlight 1.0 的 XAML 中声明的对象，或在 Silverlight 1.1 的 C#/VB 中声明的对象。

使用 Silverlight，您可以创建 RIA（富互联网应用程序），并制作令人惊叹的界面，可以集成动画和视频。它类似于 HTML 文件，HTML 文件是包含告诉 Web 浏览器如何渲染网页外观和感觉信息的纯文本。XAML 做同样的事情。但是，不是由浏览器解释渲染文件的指令，而是由 Silverlight 运行时进行渲染。

1.0 的一个好处是，它使得将这些体验集成到 AJAX Web 页面中非常容易（因为您可以编写 JavaScript 代码来同时更新 HTML 和 XAML 元素）。它只是为更丰富的表示形式添加了 XAML 作为一种选择，同时保留了相同的 JavaScript 引擎用于代码。每个 XAML 元素都可以从与任何 HTML 元素交互的同一客户端 JS 中访问或操作。因此，您可以在 Silverlight 内容之上叠加 HTML 控件（通过创建无窗口框架）。

在 1.1 中，.NET 框架提供的所有功能和优势都已隐式包含。这样，XAML 布局标记文件（.xaml 文件）就可以由用任何 .NET 语言编写的 code-behind 代码进行增强，其中包含编程逻辑。它可用于以编程方式操作 Silverlight 应用程序以及托管 Silverlight 控件的 HTML 页面。Silverlight 附带了一个轻量级的类库，其中包含可扩展控件、XML Web 服务、网络组件和 LINQ API 等。这个类库是 .NET Framework 的基类库的一个子集，并且相当小。一些支持的类包括字符串处理、正则表达式、输入和输出、反射、集合和全球化。

XAML 内部

在 XAML 中，您使用 XML 标记定义元素。每个 Silverlight 文档的根级别都有一个 Canvas 标记，它定义了将绘制 UI 元素的空间。一个 Canvas 可以有一个或多个子项，包括可以创建自己的子项的子 Canvas。Canvas 的子项相对于其父 Canvas 具有相对位置，而不是相对于根 Canvas。

Silverlight XAML 支持多种形状，这些形状可以组合成复杂对象。基本支持的形状包括 Rectangle、Ellipse、Line、Polygon、Poly Line 和 Path。

<Canvas>

<Rectangle>

</Rectangle>

</Canvas>

画笔决定了对象如何在屏幕上绘制。它们的内部使用 Fill 属性进行填充，其轮廓使用 Stroke 属性进行描边。有纯色画笔、渐变画笔和图像画笔。纯色画笔使用填充属性中的固定颜色实现。渐变画笔通过定义渐变范围和在归一化空间中的多个渐变停止点来实现。对象也可以使用图像画笔进行绘制，图像将根据需要进行裁剪或拉伸。

可以使用 TextBlock 标记在 XAML 中渲染文本。这使您可以控制文本的各个方面，例如内容、字体、大小、换行等。此外，Silverlight 支持可用于实现文本输入的键盘事件。

<Canvas>

<Rectangle

Width="100" 

Height="100"> 

<Rectangle.Fill> 

<SolidColorBrush Color="Blue"/> 

</Rectangle.Fill>

</Rectangle>

</Canvas>

变换、媒体和动画：XAML 允许您为对象定义多种变换。RotationTransform 将元素旋转指定的度数，ScaleTransform 可用于拉伸或缩小对象，SkewTransform 在指定的方向上以指定的量倾斜它，Translate Transform 根据指定的向量移动对象，而 Matrix Transform 可以组合以上所有变换。

旋转变换：将元素按指定的角度旋转
缩放变换：按指定的 ScaleX 和 ScaleY 量缩放元素
倾斜变换：按指定的 AngleX 和 AngleY 量倾斜元素
平移变换：按指定的 X 和 Y 量移动（平移）元素

音频和视频内容使用 MediaElement 标记进行控制。该标记有一个指向要播放的媒体的源属性。使用此标记定义的对象提供了许多控制媒体播放的方法和事件。

<Canvas

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

x:Name="root"

>

<Canvas x:Name="VideoLayer">

<MediaElement AutoPlay="True" Width="400" Height="300" 
	x:Name="Movie_wmv" Canvas.Left="80" Canvas.Top="40" Source="FullCut2.wmv" />

</MediaElement>

</Canvas>

</Canvas>

XAML 中的动画是通过定义属性如何在时间线上随时间变化来实现的。动画定义包含在 Storyboard 中。有多种不同类型的动画，包括 DoubleAnimation（更改数值属性）、ColorAnimation（更改颜色和画笔）以及 PointAnimation（更改二维值）。这些动画可以是线性的，也可以是基于关键帧的。对于线性动画，动画会在定义的时线上平滑变化。对于基于关键帧的动画，动画可以在沿途离散值之间移动。

为什么使用 XAML？

它在桌面应用程序或 Web 应用程序中都提供了丰富的 UI，弥合了设计人员和开发人员之间的差距。Web 中的 XAML 按设计就是跨平台的。

它是一种具有流程控制支持的声明性语言，这意味着您可以声明您的 UI 控件并为其提供流程控制。您还可以通过使用 code-behind 文件将 UI 定义与运行时逻辑分离，并通过部分类定义将其与标记连接起来。此外，在声明性编程语言中，开发人员（或设计人员）描述组件的行为和集成，而无需使用过程式编程。这使得没有传统编程经验的人能够创建完整的、可工作的应用程序，而无需编程。尽管很少有应用程序完全用 XAML 构建，但 XAML 的引入允许应用程序设计者更有效地为应用程序开发周期做出贡献。使用 XAML 开发用户界面还可以实现模型和视图的分离；这被认为是良好的架构原则。在 XAML 中，元素和属性映射到底层 API 中的类和属性。

从界面开发人员的角度来看，最明显的补充是一整套图形小部件。从按钮、菜单、树形列表到面板、工具栏和形状画布，XAML 包含了开发人员所知的每种常用界面小工具和组件。2D 矢量图形是这个更大的工具包的无缝集成部分。这些小部件和图形控件可以嵌套在对象树中。这提供了比以前使用 HTML 和 SVG（可缩放矢量图形）组合要全面得多的界面功能。

它使您能够创建丰富的 UI 和动画，并将矢量图形与 HTML 结合起来，以创建引人入胜的内容体验。矢量图形是通过在相对于指定坐标绘制线条和形状来表示图片的数学方法。保存的文件包含绘制图像的指令，可以放大或缩小而不会损失质量。Eps、svg 和 dxf 文件是矢量图形的示例。

Silverlight 中的 XAML 可以轻松构建丰富的视频播放器交互体验。您可以将其媒体功能与矢量图形支持融合在一起，以创建您想要的任何类型的媒体播放体验。Silverlight 提供了“全屏”功能，以创建完全沉浸式的体验，以及在正在播放的视频内容之上直接叠加菜单/内容/控件/文本（使您能够实现类似 DVD 的体验）。Silverlight 还提供了在不中断或重新启动视频流的情况下动态调整正在播放的视频大小的功能。XAML 具有嵌入式媒体播放器，因此不依赖于您客户端的媒体播放器。

Silverlight 中的 XAML 提供了良好的代码和 UI 分离。XAML 使得创建、编辑和重用 Web 应用程序的图形用户界面变得容易。您可以从服务器上的数据生成 XAML 代码，从而创建动态应用程序。

XAML 被认为是 AJAX（异步 JavaScript 和 XML）的替代品。在支持 AJAX 的应用程序中，运行时会加载 AJAX 引擎，该引擎允许应用程序的用户交互异步进行。这实际上是 RIA 的一项功能，因为它提供了更好的响应时间，只获取相关数据，消耗更少的带宽，并避免了整页重新加载，从而提供了更好的用户体验。基本上 XAML 使用与 AJAX 相同的逻辑。也就是说，数据是异步获取的，但除此之外，它还为应用程序提供了完全不同的外观和感觉。两者都是互补的技术。Silverlight 中的 XAML 设计用于与 HTML 和 AJAX 融合，而不是竞争对手。因此，XAML 提供了丰富的 UI，因为它支持动画和媒体支持，而这两者都不是由 XAML 或 AJAX 支持的。

XAML 可以渲染交互式 UI，因为它包含在标记中附加事件处理程序的机制。此外，XAML 解析器不允许您拼错属性，因为它会发出错误消息，而 HTML 则不包含调试功能。

搜索引擎（如 Google）可以扫描 XAML。它们无法深入到提供几乎与 Silverlight 中 XAML 相同的 UI 功能的已编译 Flash 应用程序中。因此，XAML 使 Silverlight 应用程序更易于查找。

XAML 在 Web 中的缺点

XAML 需要在浏览器中安装插件才能渲染其内容。

下载 URL：查看

Silverlight 1.0 应用程序：http://www.microsoft.com/silverlight/downloads.aspx#4_0
Silverlight 1.1 应用程序：http://www.microsoft.com/silverlight/license-win-dev.aspx

没有包含 XAML 解析器的插件，XAML 对浏览器来说毫无用处。Silverlight 中也有许多 XAML 的缺失功能，因为增加了所需下载的插件内存会大大增加。因此，支持的功能和下载内容之间存在权衡。Web 格式的 XAML 没有控件支持（textbox、button、checkbox 和 listbox）、样式和模板、数据绑定，尽管 Silverlight 1.1 的未来版本据说将包含这些功能。

结论

XAML 在 Web 中将支持哪些类型的应用程序？

Silverlight 中的 XAML 非常适合以下 Web 应用程序场景，这些场景涵盖了许多现实世界的场景：

Web 媒体——带有事件的品牌播放器、视频和营销组合、带有广告的动态视频、音频播放等。
页面上的富岛（迷你应用）——休闲游戏和工具。
Web 可视化元素——导航属性、数据可视化和广告。

Silverlight 中的 XAML 是在提供有效用户体验方面的一项突破，它能够创建将内容、应用程序逻辑和通信融合在一起的富互联网应用程序。随着富客户端的出现，使互联网更加可用和令人愉悦，XAML 为拥抱未来的开发人员提供了一个坚实的架构。

参考文献

历史

2008年4月6日：初稿