Vista 开发新技术之 XAML 简介

在下一个版本的Windows操作系统Vista中，其新添加的表示子系统的WPF为开发人员提供了强大的新功能。这个子系统使的开发人员能够通过新的标记语言代码XAML来使用它的功能。另外，面向对象的现代编程语言(例如，C# 和 Visual Basic .NET)可用于将所有内容联系在一起。因为写入WPF的大多数应用程序大多数是 XAML 和编程代码的混合体。所以本文将讨论用于控制页面布局的 XAML 标记，而如何为响应事件而编写过程代码的方法将在后续文章中进行详细的讲解。

　　XAML是eXtensible Application Markup Language的英文缩写，相应的中文名称为可扩展应用程序标记语言，它是微软公司为构建应用程序用户界面而创建的一种新的描述性语言。XAML提供了一种便于扩展和定位的语法来定义和程序逻辑分离的用户界面，而这种实现方式和ASP.NET中的"代码后置"模型非常类似。也就是说在开发一个应用程序时，我们可以将开发工作分成开发人员和设计人员两个团体分别进行，各自负责后台程序代码逻辑和前台程序界面的设计，这样就使得开发人员和设计人员之间的协作更通畅，也极大地发挥了他们的专长。

　　提示:XAML的发音为"Zamel"，笔者经常开玩笑地将其读成"折磨"。虽然XAML包含了许多新规则、元素和语法，但是我并不认为学习它是一个折磨人的过程。只要读者稍微具备一些HTML基础知识，就可以快速地掌握XAML中的大部分内容。

　　提示:如今在WPF的官方网站上已经提供了一些很实用的工具，可以将其他格式的图形文件转换为XAML文件的形式。例如我们就可以将3DMax制作出的3D动画转换为XAML，这样WPF程序就可以直接通过转换好的XAML文件产生和3DMax制作出的3D动画相一致的效果。

　　XAML简化了.Net Framework 3.0 编程模式上的用户界面创建过程，使用XAML开发人员可以对WPF程序的所有用户界面元素(例如文本、按钮、图像和列表框等)进行详细的定置，同时还可以对整个界面进行合理化的布局，这与使用HTML非常相似。但是由于XAML是基于XML的，所以它本身就是一个组织良好的XML文档，而且相对于HTML，它的语法更严谨、更明确。预计以后大部分的XAML都可由相应的软件自动生成，就如同我们现在制作一个静态页面时，几乎不用编写任何HTML代码就可以直接通过Dreamweaver软件生成一个美观的页面。但是最初通过手动编写XAML代码将是一次绝佳的学习体验，虽然实现的过程繁杂了些，但是将加深您对XAML语法和各个元素的理解。

　　大多数的WPF程序可能同时包含程序代码和 XAML。我们可以使用XAML定义应用程序的初始界面，而后才编写相应的功能实现代码。我们可以将逻辑代码直接嵌入到一个XAML文件中，也可以将它保留在一个单独的文件中。实际上，能够用XAML实现的所有功能我们都可以使用程序代码来完成。因此，我们根本无需使用任何的XAML就可以创建一个完好的WPF程序。一般来说，程序代码的优势在于流程处理和逻辑判断，而不是界面的构建上。而XAML则是集中关注于界面的编程，我们可以将它和其它的.NET语言配合使用，从而构建出一个功能完善、界面美观的WPF程序。

　　这里您可能会存在应该迷惑，既然我们仅使用程序代码就可以构建一个完善的WPF程序，那么XAML是否也是一样呢?答案是否定的。WPF的程序中许多任务的实现只能通过程序代码才可以完成。但是对于一些最简单的WPF程序中，可以只包含XAML，下面是某个XAML文件的一小段代码：

　　示例代码1-1：

以下是引用片段： 01 ＜Button Background="Red" FontSize="24pt"＞ 02 Click Me 03 ＜/Button＞

　　该代码片断是一个XAML元素，它包括一个开始标记、一个结束标记以及这两个标记之间的内容。在本示例中该元素是Button，在第1行代码处的开始标记中还包含了两个属性，这两个属性的名称分别为Background和FontSize。我们可以通过"="号给这些属性赋与一个相应的值，根据XAML的语法规则，这些属性值必须使用双引号包括起来(还存在一种使用单引号的情况，以后再介绍)。开始标记和结束标记之间则是元素内容，在本例中是显示在按钮表面上的文本，也就是第2行代码处的"Click Me"。注意，在上述的代码片断中我们并没有显式地设置Button元素的Width和Height属性。通常，WPF中的按钮和其他控件会根据其内容自动调整大小。正如第1行代码所示，Button的大小被设置为足以容纳 24 磅字体的"Click Me"文本字符串。此Button元素也不包括坐标位置。通常，控件在运行时会根据窗口和控件的大小在窗口中进行动态的定位。

　　为了查看该代码的上述代码片断的实际显示效果，我们可以将这段代码粘贴到Microsoft Windows SDK附带的XAMLPad工具中，而后XAMLPad会自动解析XAML代码并将最终的呈现显示出来。其效果如图1-1所示：

　　从上图可以看出，WPF自动将该按钮扩充至整个窗口，这在真正的WPF程序中是不可能允许这种情况发生的，为此我们可以通过向Button元素添加Width和Height这两个属性来控制其大小和宽度。我们可以将示例代码1-1修改如下：

以下是引用片段： 01 ＜Button Background="Red" FontSize="24pt" Width="200" Height="100"＞ 02 Click Me 03 ＜/Button＞

　　我们在第1行代码的开始标记中添加了Width和Height这两个属性，并数值了相应的属性值，这样Button将不会再自动地填充整个的窗体，而是一个高为100、宽为200的矩形按钮。其最终的呈现效果如下：