[翻译]WP7 QuickStart-第二篇-使用XAML创建Windows Phone用户界面
【译者注:这篇文章是翻译自微软官方的WP7 QuickStart的第二篇,讲述WP下的XAML。部分内容加入了自己的理解和表达习惯。而翻译此系列的主要目的一是为了练习英语,二是让自己作为一个BI开发者对WP7的开发有一个了解。部分翻译不当的地方望各位高人指出批评指正】
原文地址:http://create.msdn.com/en-US/education/quickstarts/Creating_the_Windows_Phone_User_Inte易做图ce_(XAML)
通常来说在Windows Phone下我们用Silverlight来创建应用程序,用XNA来创建游戏。XAML就是在Silverlight下创建UI元素的一种声明式语言,因此很多在屏幕上显示的像控件,图形,文本等都可以通过它来创建。如果你熟悉网页编程,你可以认为XAML和HTML是比较相似的,但相比HTML,XAML更强大。像HTML一样,XAML也是有元素和属性组成的。然而,XAML是基于XML的,因此需要遵循XML的一些规则,包括格式化的要求等。你也许会问,“既然我有了Visual Studio或者Blend这样的创建UI工具,那为什么还要去关心XAML呢?”。即使有工具来生成这些标记,探寻和理解底层的东西也是经常需要的。另外,有时候通过代码来手动创建UI反而会更容易一些。
此部分包含如下内容::
XAML示例
XAML仅是过程代码
属性
XAML和视觉树
不只是静态的UI
XAML示例
下面的代码实例用来创建一个按钮。
XAML
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Button Height="72" Width="160" Content="Click Me" />
</Grid>
代码运行效果大致如下:
Button控件被指定为<Button>元素。Width和Height属性用来指定按钮的大小。<Grid>在你在Visual Studio中创建Windows Phone应用程序的时候就已经存在了,它被用来定位对象。关于Silverlight布局的更多信息可以参考这里。
你可以使用Visual Studio来生成XAML。比如,你可以在工具栏里拖拽一个按钮来设计界面。
如下就是Visual Studio生成的代码。(你的也许看上去会略与不同)
XAML
<Grid x:Name="ContentGrid" Grid.Row="1">
<Button Content="Button" Height="72" HorizontalAlignment="Left"
Margin="152,273,0,0" Name="button1" VerticalAlignment="Top" Width="160" />
</Grid>
需要注意的是Visual Studio会填加一些额外的属性,比如HorzontalAligment和Margin,他们用来定位按钮的位置。这些额外的属性也许有时候你是用不到的。当然在Visual Studio中也可以可视化地修改它们,但更多的时候,你可能都是在XAML里直接修改他们。
使用像XAML这样的声明式语言的最大的好处就是,可以实现UI和代码的分离。比如,在你的团队中设计师设计UI然后将XAML提交给开发人员填加逻辑代码。即使设计人员和开发人员是同一个人(通常都是),你也可以让你的UI和代码分离开。