分享
 
 
 

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

王朝system·作者佚名  2008-06-01
窄屏简体版  字體: |||超大  

大多数开发人员对于即将到来的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控件在页面上显示文本框(用户可修改的文本)。进入讨论组讨论。

更复杂的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控件类型。进入讨论组讨论。

Avalon应用程序

首先,选中Avalon应用程序模板并点击“确定”。你将看到默认的Window1.xaml窗口和图6所示的解决方案浏览器。

图6:Avalon应用程序项目。这个截图显示了Visual Studio 为Avalon应用程序模板建立的模板

请注重,Avalon应用程序项目类型的根元素是Window。除了我们在上一部分讨论的StackPanel和DockPanel之外,你还可以使用Grid元素对窗口中的控件进行定位。Window1.xaml.vb是页面后台的代码,也是你编写应用程序代码的地方。Window元素中的x:Class属性指定了类的名称。在编译阶段,这个页面会被编译为一个局部(partial)类,与后台代码(Window1.xaml.vb)一起形成完整的应用程序。

复制列表1中的代码并替换Window1.xaml文件中的Grid元素。在Button元素中,增加Click属性并设置它的值(图7所示)。

图7:设置点击事件。给Button(按钮)元素添加一个事件

从本质来看,你为按钮控件建立了一个事件处理程序。当按钮被点击的时候,ButtonClick事件会处理这个点击事件。假如你要完善这个事件,请双击解决方案浏览器中的Window1.xaml.vb。你会看到两个示例事件都被注释了。取消ButtonClick事件的注释并删除该事件处理程序末尾的Handles子句。ButtonClick事件现在应该是这样的:

' Button1的事件处理程序

Private Sub ButtonClick(ByVal sender As Object, ByVal e As RoutedEventArgs)

End Sub

对于这个例子来说,我们只需要简单地显示一个“Hello World!”消息,看看事件处理程序是否起作用了。在未来一些文章中我将仔细地解释这个特性。

' Button1的事件处理程序

Private Sub ButtonClick(ByVal sender As Object, _

ByVal e As RoutedEventArgs)

' 添加下面的内容

MsgBox("Hello World!")

End Sub

我们完成了!现在按F5运行应用程序。你将看到应用程序窗口,当你点击OK按钮的时候,会看到一个消息框(图8所示)。

图8:测试应用程序,你的第一个Avalon应用程序

现在点击窗口上的“Page 2”链接,没有发生任何事情。这是因为Avalon应用程序项目类型不支持导航。你必须像传统的Windows应用程序一样打开新窗口。

停止调试并给应用程序添加一个新的Avalon窗口(在解决方案浏览器中右键点击项目名称,并选择添加->新项目)。选择Avalon窗口模板并添加“添加”(图9所示)。

图9:放入一个窗体。这个截图显示了如何给项目添加一个新的Avalon窗体。

你的项目现在有两个窗口了(图10所示)——Window1.xaml和Window2.xaml。

图10:两个窗体。它显示了项目中的文件。

应用程序中的每个窗体都有一组Window.xaml文件。

我们修改ButtonClick事件:

Private Sub ButtonClick(ByVal sender As Object, _

ByVal e As RoutedEventArgs)

Dim win2 As New Window2

win2.Show()

End Sub

按F5调试应用程序并再次点击OK按钮。你现在会看到新窗口出现了(图11所示)。

图11:下一个窗体。点击按钮打开一个新窗体。

进入讨论组讨论。

Avalon Express应用程序

Avalon Express应用程序会寄宿在Internet浏览器中。我们使用Visual Studio 2005,通过选择Avalon Express应用程序模板来建立Avalon Express应用程序。

在默认情况下,它会建立Page1.xaml(图12所示)。

图12:Visual Studio为Avalon Express应用程序模板建立的模板

请注重该XAML页面的根元素是Page,而不是Window。同样,我们用列表1中的内容替换Grid元素。在解决方案浏览器中右键点击项目,选择添加->新项目给项目添加一个新的页面。在“添加新项目”对话框中,选择Avalon页面(图13所示),默认的名称不改。点击“添加”。

图13:从“添加新项目”对话框中选择Avalon页面给项目添加一个新的Avalon页面。

按F5调试应用程序。Internet浏览器会载入,应用程序的样子如图14所示。

图14:在IE中。这个截图再次显示了该应用程序,不过这次是寄宿在IE中。

这种项目类型的一个有趣的特性是,你假如仍然使用MsgBox()函数来显示消息框,它还是可以工作的。

请注重应用程序上方的导航按钮(图15所示)。这两个按钮答应你在页面之间进行导航,与浏览Web页面类似。

图15:导航按钮。

在Express项目中Avalon为你建立了传统浏览器样式的动画按钮

假如你想看到页面导航是如何工作的,请点击“Page 2”链接,它会载入Page2.xaml。对于Avalon Express应用程序项目类型来说,所有的导航都发生在浏览器之中;不会建立新窗口。你可以通过点击Page2.xaml.的“后退”导航按钮返回到前一个页面(Page1.xaml)。

Avalon导航应用程序

Avalon应用程序的第三种类型就是Avalon导航应用程序,它可能会成为最普遍的Avalon应用程序类型。使用Visual Studio 2005,选择Avalon导航应用程序模板即可建立新的Avalon导航应用程序。

与Avalon Express应用程序类似,在默认情况下会建立Page1.xaml页面。像上面一样,用列表1中的内容替换Grid元素。给项目添加一个新的页面。在“添加新项目”对话框中选择Avalon页面,默认名称不改。点击“添加”。

按F5调试应用程序。这一次应用程序没有寄宿在IE中,它有自己的窗口,与IE非常相似(图16所示)。

图16:运行应用程序。这是最终的应用程序。

点击“Page 2”链接会载入Page2.xaml。假如要返回前面一个页面,只需要点击“后退”导航按钮。

与Avalon Express应用程序项目类型相似,Avalon导航应用程序中的所有导航会在窗口内部发生,不会建立新窗口。

在本文中,你看到了Avalon的一些基础知识,以及XAML在建立Avalon应用程序UI的过程中是扮演什么样的角色。你还看到了几种不同的Avalon应用程序类型以及它们之间的差别。但是,这仅仅是冰山一角。进入讨论组讨论。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有