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

　更复杂的UI

　　现在我考虑使用XAML建立一个相对复杂的UI。把列表1中的代码复制到XAMLPad中。图4是XAMLPad所显示的UI。

　　列表1：

＜DockPanel Background="LightGreen" xmlns="http://schemas.microsoft.com/winfx/avalon/2005"＞ ＜TextBlock DockPanel.Dock="Bottom" HorizontalAlignment="Center"＞StatusBar＜/TextBlock＞ ＜StackPanel Name="StackPanel1" DockPanel.Dock="Left" Background="LightYellow"＞ ＜TextBlock Margin="10,10,10,0"＞Select country＜/TextBlock＞ ＜ComboBox Name="cbCountries" Margin="10,5,10,5"＞ 　＜ComboBoxItem＞Singapore＜/ComboBoxItem＞ 　＜ComboBoxItem＞United States of America＜/ComboBoxItem＞ 　＜ComboBoxItem＞United Kingdom＜/ComboBoxItem＞ ＜/ComboBox＞ ＜ListBox Name="lstCountries" Margin="10,5,10,5"＞ 　＜ListBoxItem＞Singapore＜/ListBoxItem＞ 　＜ListBoxItem＞United States of America＜/ListBoxItem＞ 　＜ListBoxItem＞United Kingdom＜/ListBoxItem＞ ＜/ListBox＞ ＜CheckBox Name="checkbox1" Margin="10,5,10,5"＞Checkbox＜/CheckBox＞ ＜RadioButtonList Name="RadioButtonList1" Margin="10,5,10,5"＞ 　＜RadioButton＞Radio Button 1＜/RadioButton＞ 　＜RadioButton＞Radio Button 2＜/RadioButton＞ 　＜RadioButton＞Radio Button 3＜/RadioButton＞ ＜/RadioButtonList＞ ＜TextBlock Margin="10,5,10,5"＞ 　＜Hyperlink NavigateUri="page2.xaml"＞Page 2＜/Hyperlink＞ ＜/TextBlock＞ ＜/StackPanel＞ ＜DockPanel DockPanel.Dock="Right"＞ 　＜TextBlock DockPanel.Dock="Top" HorizontalAlignment="Center"＞Title Bar＜/TextBlock＞ ＜DockPanel DockPanel.Dock="Bottom" Background="Red"＞ 　＜TextBlock Margin="10,10,10,10" HorizontalAlignment="Left"＞Enter your name＜/TextBlock＞ 　＜TextBox Name="txtName" Margin="10,5,10,5" HorizontalAlignment="Left" Width="200"＞＜/TextBox＞ 　＜Button Name="btnOK" Margin="5,5,10,5" Width="50" HorizontalAlignment="Left" ＞OK＜/Button＞ ＜/DockPanel＞ ＜StackPanel Name="StackPanel2" Background="VerticalGradient Lavender Yellow"＞ 　＜TextBlock Margin="10,10,10,10"＞Hello Avalon!＜/TextBlock＞ 　＜Button Margin="10,5,10,5" HorizontalAlignment="Left" Width="100"＞Left Button＜/Button＞ 　＜Button Margin="10,5,10,5" HorizontalAlignment="Center" Width="100"＞Center Button＜/Button＞ 　＜Button Margin="10,5,10,5" HorizontalAlignment="Right" Width="100"＞Right Button＜/Button＞ ＜/StackPanel＞ ＜/DockPanel＞ ＜/DockPanel＞

图4：XAMLPad中更高级的UI。这次我让XAMLPad显示了更多复杂的控件。

　　请注意这段代码的下述特性：

　　·除了使用StackPanel元素之外，你还可以使用DockPanel元素对元素和其它的面板（例如StackPanel和DockPanel元素）进行分组。你可以使用DockPanel.Dock属性把 “锁定”在DockPanel元素内特定的位置（例如“”上、“左”、“右”或“下”）。

　　·你可以使用ComboBox、ListBox、Checkbox和RadioButtonList元素来建立习惯使用的控件（例如组合框、列表框、检查框和单选框）。

　　·除了设置元素的背景色之外，你还可以用值（例如VerticalGradient Lavender Yellow）把它设置为倾斜填充。

　　·你可以使用HyperLink元素导航到另一个页面。但是这个元素只能在某些特定类型的Avalon应用程序中起作用。你在下一部分可以看到这方面更多的内容。

　　Avalon应用程序的类型

　　到目前为止我一直使用XAMLPad来建立UI。但是，真实的应用程序需要实现业务逻辑。因此接下来我将使用Visual Studio 2005（现在处于Beta2测试中）来建立Avalon应用程序。

　　使用Visual Studio 2005 Beta 2建立新项目的过程是选择文件-＞新建项目…。新建项目窗口就会出现（图5所示）。

图5：新建项目模板。Visual Studio为Avalon提供了四种不同的模板类型。

　　在本文中我将把Visual Basic作为编程语言，因此在Visual Basic项下面，选择Avalon，你将看到四种主要的Avalon项目模板类型：

　　·Avalon应用程序——与传统的Windows应用程序类似；

　　·Avalon Express应用程序——寄宿在Internet浏览器中的应用程序；

　　·Avalon控件类库——寄宿在其它的Avalon应用程序中的Avalon控件；

　　·Avalon导航应用程序——类似于Windows应用程序，只是它在“页面”之间导航，而不是打开新窗口。

　　我将为你演示这四种类型中的三种。在本文中没有演示Avalon控件类型。