用Avalon建立未来的Windows用户界面

大多数开发人员对于即将到来的Windows Vista（以前称为Longhorn）中的两个特性很感兴趣，其中一个就是Avalon。Avalon是WinFX中显示子系统类库的代号，它是Vista/Longhorn中新的应用程序编程接口（API）。Avalon由一个显示引擎和一个受控代码框架组件组成。你可以使用Avalon建立逼真的Longhorn应用程序，把应用程序UI、文档和媒体内容混合在一起。

　　尽管Vista大约还需要过一年时间才会发布（预计发布时间是2006年末），但是微软最近还是在Beta1 RC中为公众提供了Avalon和Indigo（开发者感兴趣的另一个特性）的一个版本。任何希望在Windows XP上测试Avalon和Indigo特性的人员都可以下载这个RC beta版，并学习Avalon和Indigo提供的重大特性。

　　起步

　　如果你希望在Windows XP上试验Avalon，需要安装下面一些内容：

　　·微软预发布的软件“Avalon”和“Indigo”Beta1 RC：

http://www.microsoft.com/downloads/details.aspx?familyid=b789bc8d-4f25-4823-b6aa-c5edf432d0c1&displaylang=en

　　·WinFX SDK（软件开发工具包）:

http://download.microsoft.com/download/5/4/0/5407D6E4-740E-413E-8E91-EF7AC53A478A/en_winfx_sdk_beta1_RC.iso

　　·微软Visual Studio 2005

　　编译和运行Avalon应用程序的最简单的途径是使用Visual Studio 2005，它现在处于Beta 2测试中（你可以使用WinFX SDK中包含的MSBuild工具来手动编译Avalon应用程序，但是这个过程非常乏味，我们并不推荐）。

　　XAML——Vista标记语言

　　在Avalon中，你使用XAML标记语言来建立应用程序的UI。使用XAML建立UI的过程与建立HTML页面的过程相似。你使用标记来呈现（render）那些希望显示在页面上的控件。XAML与HTML不同，它是基于XML的，因此你必须确保XAML页面严格地遵循XML的规则，例如元素（element）和属性（attribute）的名称是大小写敏感的，必须恰当地为属性提供值，等等。

　　XAML中的每个元素都被映射为一个类，属性（attribute）则被映射为属性（property）。编译XAML应用程序的时候，UI被转换为对象模型（object-model）代码并使用局部（partial）类与后台代码组合在一起。因此，除了使用XAML生成UI之外，你还可以使用代码编程来建立UI。在本文后面我将为你解释后台代码的使用方法。

　　目前的WinFX SDK不支持任何用于建立XAML UI的可视化编辑器，但是毫无疑问，微软不久就会发布一个。到时候你就可以手动编写XAML页面了。与WinFX SDK一起提供的XAMLPad编辑器允许你快速地建立和测试那些用XAML建立的用户界面。

　　载入XAMLPad的步骤是“开始-＞程序-＞微软WinFX SDK -＞工具-＞ XAMLPad”。

　　XAMLPad编辑器窗口被分成两个面板：你在下面的面板中输入XAML代码，上面的面板将根据你输入的XAML代码实时地显示UI。XAMLPad易于使用，不需要你编译。现在我将介绍少量的简单练习内容，用于演示Avalon可以建立的不同类型的应用程序。

　　我们开始建立示例应用程序，在XAMLPad中输入下面的代码：

＜StackPanel Background="LightBlue" xmlns="http://schemas.microsoft.com/winfx/avalon/2005"＞ ＜Button Name="Button1" Width="100" HorizontalAlignment="Left" Margin="10,10,10,5"＞ 　This is a button ＜/Button＞ ＜TextBlock HorizontalAlignment="Left" Margin="10,5,10,5"＞ 　This is a text block ＜/TextBlock＞ ＜TextBox Name="Button1" Width="200" HorizontalAlignment="Left" Margin="10,5,10,5"＞ 　This is a textbox ＜/TextBox＞ ＜/StackPanel＞

　　输入完成以后，你将看到XAMLPad呈现的UI（图1所示）。

图1：呈现UI的 XAMLPad。XAMLPad上面的面板实时地呈现下面的面板中输入的代码。

　　如果XAML代码中有错误，代码将会显示为红色，错误信息会出现在屏幕底部。

　　现在仔细查看一下你刚刚输入的代码。首先，StackPanel元素处理页面的布局，同时作为其它控件（例如按钮和文本框）的容器。StackPanel控件把自己所包含的控件排列成一条线，要么水平排列，要么垂直排列。在默认情况下，对齐方式是垂直的，也就是一个控件在另外一个控件的上面（图1所示）。如果要水平地排列控件，只需要简单地把StackPanel元素的Orientation属性设置为“Horizontal”（图2所示）。

图2：水平排列控件。 通过把StackPanel 元素的Orientation属性设置为Horizontal，还可以改变控件默认的垂直排列方式。

　　Button元素在页面上显示一个按钮。在默认情况下，按钮的宽度刚刚能够容纳你所设置的文本（使用该元素的文本内容设置）。但是，你可以通过设置Width属性手动地调整按钮控件的宽度。你可以使用HorizontalAlignment属性来调整的按钮元素的位置。Margin（页边空白）属性在控件上设置了一个不可见的包装，这样就保证了控件之间有最小的距离，因此避免了控件偶然的“重叠”（图3所示）。Margin属性的值按次序设置——分别是“左、上、右、下”。

图3：使用Margin属性。 按钮控件被“空白”包围着，可以防止其它控件被放置得过于靠近。

　　TextBlock元素在页面上显示标签（平面文本内容不能被选中或改变），TextBox控件在页面上显示文本框（用户可修改的文本）。