[翻译]WP7 QuickStart-第二篇-使用XAML创建Windows Phone用户界面

 

【译者注:这篇文章是翻译自微软官方的wp7 quickstart的第二篇，讲述wp下的xaml。部分内容加入了自己的理解和表达习惯。而翻译此系列的主要目的一是为了练习英语，二是让自己作为一个bi开发者对wp7的开发有一个了解。部分翻译不当的地方望各位高人指出批评指正】

 

原文地址：http://create.msdn.com/en-us/education/quickstarts/creating_the_windows_phone_user_interface_(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和代码分离开。

 

xaml也是过程化代码

【译者注：过程化代码？原文是procedural code，求更准确的理解】

xaml元素，比如<button/>，跟在代码里实例化一个对象一样。比如，下面的xaml代码：

xaml

<grid x:name="contentpanel" grid.row="1" margin="12,0,12,0">

<button height="72" width="160" content="click me" />

</grid>

下面的代码是在里创建的方式。

// initialize the button

button mybutton = new button();

// set its properties

mybutton.width = 160;

mybutton.height = 72;

mybutton.content = "click me";

// attach it to the visual tree, specifically as a child of

// the grid object (named 'contentpanel'). in other words, position

// the button in the ui.

contentpanel.children.add(mybutton);

对于ui来说，xaml相比用代码去写要更容易。然而，有时候通过代码去动态的创建ui也是很有必要的。

 

属性

有两种方式指定xaml的属性值。

attribute语法元素

property语法元素

【译者注：此部分求更准确的中文表达】

attribute语法元素是上面提到过的类似html的形式，attribute=”值”。下面的示例会创建一个红色的rectangle。fill是以attribute的方式定义颜色的名称的。

xaml

<rectangle fill="red" />

或者，也可以通过property的方式来指定。

xaml

<rectangle>

<rectangle.fill>

<solidcolorbrush color="red" />

</rectangle.fill>

</rectangle>

在这个示例中，用的是solidcolorbrush对象赋给fill属性，而不是用字符red。从这个示例你也许会看出，property的方式是以更啰嗦的方式做同样的事。然而，并不是所有的值都支持attribute字符串的。比如，你想指定一个对象里的多个property，那么就必须用property的方式。下面的示例创建一个rectangle，并且用渐进色。

xaml

<!-- this rectangle is painted with a diagonal linear gradient. -->

<rectangle width="200" height="200">

<rectangle.fill>

<lineargradientbrush startpoint="0,0" endpoint="1,1">

<gradientstop color="yellow" offset="0.0" />

<gradientstop color="red" offset="0.25" />

<gradientstop color="blue" offset="0.75" />

<gradientstop color="limegreen" offset="1.0" />

</lineargradientbrush>

</rectangle.fill>

</rectangle>

程序运行后如下图：

如你所见，fill属性用到了更复杂的lineargradientbrush对象来创建渐进色。

 

xaml和视觉树

在xaml中，某些元素可以包含其它的元素。这个父子关系指定类似对象的定位并且如何响应事件。考虑下面的示例。

xaml

<grid x:name="contentpanel" background="red" grid.row="1" margin="12,0,12,0">

<stackpanel margin="20" background="blue" >

<textblock name="firsttextblock" fontsize="30">first textblock</textblock>

<textblock name="secondtextblock" fontsize="30">second textblock</textblock>

<textblock name="thirdtextblock" fontsize="30">third textblock</textblock>

</stackpanel>

</grid>

红色的grid包含蓝色的stackpanel。textblock包含在stackpanel中。此外，textblock在stackpanel中是按照纵向依次排开的。

下面的树形结构表名了他们之间的关系.

除了考虑到内容是如何呈现的，视觉树也会处理事件是如何被处理的。通常常见的事件都被冒泡到树的顶端。比如，可以给stackpanel定义一个鼠标左键处理代码，mouseleftbuttondown：

xaml

<grid background="red" x:name="contentpanel" grid.row="1" margin="12,0,12,0">

<stackpanel margin="20" background="blue" mouseleftbuttondown="commonmousehandler">

<textblock name="firsttextblock" fontsize="30" >first textblock</textblock>

<textblock name="secondtextblock" fontsize="30" >second textblock</textblock>

<textblock name="thirdtextblock" fontsize="30" >third textblock</textblock>

</stackpanel>

</grid>

下面的代码用来处理事件。

c#

private void commonmousehandler(object sender, routedeventargs e)

{

frameworkelement fesource = e.originalsource as frameworkelement;

switch (fesource.name)

{

case "firsttextblock":

firsttextblock.text = firsttextblock.text + " click!";

break;

case "secondtextblock":

secondtextblock.text = secondtextblock.text + " click!";

break;

case "thirdtextblock":

thirdtextblock.text = thirdtextblock.text + " click!";

break;

}

}

运行代码，点击任何一个textblock，它上面显示的信息就会变化。这里事件被冒泡到其父级元素处理。

下面演示了在树中的事件冒泡。

1. 用户单击textblock

2. 事件冒泡到父级元素

3. 持续冒泡到树根节点

因为事件是持续冒泡到树根节点的，所以在grid上来监听mouseleftbuttondown事件是一样的。

 

不仅是静态的ui

在xaml中你可以做不仅是静态ui可以做的事。你可以创建动画，集成视频，或者用标记语言来绑定数据。这些在接下来的内容将有讲述。这里展示一个简单的动画例子。点击下面的rectangle来看看效果。

xaml

<stackpanel background="#fdf5e6">

<stackpanel.resources>

<storyboard x:name="mystoryboard">

<doubleanimationusingkeyframes

storyboard.targetname="myrectangle"

storyboard.targetproperty="height">

<!-- this key frame resets the animation to its starting

value (30) at the beginning of the animation. -->

<lineardoublekeyframe value="30" keytime="0:0:0" />

<!-- spline animations are used to create acceleration. this

splinedoublekeyframe creates an animation that starts out slow

and then speeds up. the rectangle "falls". -->

<splinedoublekeyframe keyspline="0,0 1,0" value="300"

keytime="0:0:0.8" />

<!-- this spline animation creates the "bounce" at the end where

the rectangle shortens its length quickly at first and then

slows down and stops. -->

<splinedoublekeyframe keyspline="0.10, 0.21 0.00, 1.0" value="250"

keytime="0:0:1.5" />

</doubleanimationusingkeyframes>

</storyboard>

</stackpanel.resources>

<rectangle x:name="myrectangle" mouseleftbuttondown="mouse_clicked" fill="blue"

width="200" height="30" />

</stackpanel>

c#

// when the user clicks the rectangle, the animation begins.

private void mouse_clicked(object sender, mouseeventargs e)

{

mystoryboard.begin();

}

这里展示了使用xaml定义动态效果。storyboard中定义动画的属性，比如给哪个元素来定义动画。其中的子元素定义lineardoublekeyframe，执行动画如何执行【译者注：就是动画的小姑】。关于动画可以参考这里。

 

来自博客园的netx宋卫东