菜鸟学Windows Phone 8开发(3)——布局和事件基础

本系列文章来源MSDN的 面向完全新手的 Windows Phone 8 开发 

本文地址：http://channel9.msdn.com/Series/Windows-Phone-8-Development-for-Absolute-Beginners/Part-5-Basics-of-Layout-and-Events

源代码：http://aka.ms/absbeginnerdevwp8

 

在这节课中我将谈论布局，也就是说控件式如何被安排在我们应用程序中展示界面的。

我的计划如下：

1、我将谈论在布局和定位中两个主要的元素：Grid和StackPanel；

2、对于Grid我们将讨论行和列的定义并且你可以使用多种选择和技术来发挥Grid的功能；

3、接下来我们也将学习StackPanel我们将我们的Grid布局转换成StackPanel来学习他们之间的不同点；

4、最后我们将讨论事件怎么在XAML和C#代码中处理

 

1、理解Grid基础

默认的Windows Phone 页面模版会创建一个一个叫ContentPanel的<Grid>元素。

这个Grid是用于其他控件的布局，它允许我们自定义行和列，里面的每一个控件都可以通过指定行和列来布局。

 

现在你会发现在MainPage.xaml的页面模版中<Grid></Grid>是空的，也就是没有行和列的定义，但是它总是有一个行和列的定义，尽管你没有明确定义，它这一行占据整个<Grid></Grid>之间的空间来呈现一个大的空间，任何在Grid></Grid>之间的控件都可以理解为他是在这个大的空间里面。

 

2、Grid的行定义和列定义，以及默认尺寸

一个定义了行的例子是LayoutRoot Grid，它定义了两行;

现在你可以注意在项目和页面标题之间的第一行的StackPanel，他有一个Grid.Row=0的属性，你可以引用一个从0开始的数字方案。

注意第二行叫ContentPanel的Grid，他是设置了Grid.Row=1

 

第一行是设置了高度为Auto第二行是*；有三种语法来设置行和列的尺寸，我特意用了“persuade”术语，，那是因为在XAML布局中，高和宽是相对的，并且他们受许多因素影响，布局引擎要考虑多有的因素来确定元素的布局。

例如，Auto是意味着这一行的高度必须能容纳添加在这一行的所有控件。如果里面最高的控件式150像素，那么这就是实际高度，因此，Auto意思是他的高度取决于这行里面最高的控件的高度。

星号是被叫做“星号尺寸” 意思是这行的高度应该占据整个剩余的可用高度。

这有一个例子使用星号布局的，我们定义三行在ContentPanel中，注意每一行的高度：

 

你会发现在星号前面有一个数字，意思是对于所有的可用空间给我1份2份3份，所有的加起来就是6，所以每一份是可用高度的1/6，因此，3*代表一半的空间，

 

除了Auto和*你还可以指定固定的高和宽。事实上当你只用数字的时候就表示多少像素的高或宽，一般使用固定的数字来确定高和宽是不好的，因为他不能适应不同大小的屏幕，相反使用Auto和*是更可取的。

我想指出的是Grid也有一个列定义的集合，在我创建的GridsRowsAndColumns项目中，你可以看到，它有3行3列：

 

 

另外一件我想提醒你的事是如果你没有指定行和列，那么他将假设第一行和第一列是他们的值，我们可以依赖默认属性让代码更简洁。

 

3、Grid的Alignment和Margin属性

我有另外一个叫AlignmentAndMatgins的项目来说明这个，XAML如下：

效果是：

 

如果你盯着代码看一会而你就会发现它是显而易见的，但是Alignment和Margin他们也有细微（finer）的差别（distinction）首先我们来讲解下VerticalAlignment和HorizontalAlignment是如何在Gid中工作的，_Alignment属性是将控件往边界靠拢，Margin是将控件远离边界。第二个发现是Margin的定义，他是一系列的用逗号分开的数字，这个语法是来自于CSS，这数字代表从左边开始顺时针不同方向据边界的像素。

Margin="10,20,30,40"

意思是：据左边界10，上边界20，右边界30，下边界40，这这个例子中边界值得是那个大的Grid因为他还没定义其他的行和列。

在前面说布局最好使用Auto和*，那为什么现在又用Margin呢，因为Margin是用于指定两个相对元素的空间，他不会影响没页面的整体布局。

 

4、StackPanel基础

第二种布局控件是StackPanel，他将元素从上到下布局。

回到PetSounds项目中，我们在里面定义下下面的StackPanel的代码，

 

他们占据整个grid的宽度，并且在垂直方向上堆叠现在让我们改变我们的ContentPanle：

 

将Grid变成StackPanel

 

这个改变只移动了Meow Button在垂直方向上，

 

如果我们一处Quack Button按钮的Width和HorizontalAlignment属性，同时我们也移除Background属性：

并且在C#代码中注释掉Meow Button的Width和HorizontalAlignment属性和Margin属性：

然后你将看到两个Button垂直的堆叠布局在StackPanel中，

 

因此正如你看到的你可以实现你想要的任何布局，只需要通过设置4个属性：

1、一个包含行和列定义的Grid；

2、StackPanel

3、Margin来布局他们四个方向离边界的距离；

4、水平和垂直对齐属性

这就是XAML布局的简单概括，接下来让我们继续学习事件

 

5、理解事件

如果你以前在Channel9看过c#基础系列，我们是在最后一节课讲解的事件，在Windows Phone API中，页面和控件触发事件在整个生命周期或者用户触发的过程中是一个重要的部分。在这个系列中我们已经在PlayAudioButton中讲过Click事件，我们称它为事件处理，我们使用事件处理术语，我们仅仅是将一个方法关联到一个事件。我们使用wired up意思是事件被绑定到一个特定的事件处理方法，一些事件能被用户触发，比如Click事件，另外一些事件发生在整个生命周期中，比如Loaded事件发生在整个页面或空间的实力被Phone API运行时引擎创建完毕时发生。

 

有两种方法将页面或空间的事件关联到处理方法，一个是通过Xaml语法，我们已经在前面的PlayAudioButton中使用过：

 

如果你还记得，我们输入

Click=""

我们在输入双引号的时候智能感知会问我们是否选着或创建一个事件处理，如果我们告诉他我们想创建一个事件处理Visual Studio就会使用事件命名方法：NameOfElement_EventName因此在我们的例子中就得到PlayAudioButton_Click。

同时Visual Studio也会在后台代码MainPage.xaml.cs中创建一个方法，这只是Visual Studio的自动感知行为，我们也可以按Esc来推出这种行为我们自己手写命名。

第二种方法是使用事件处理窗口：

 

1、首先你要确保你已经选择了这个控件，控件的名字将出现在Name的地方一边提示你在为谁添加事件，也就是说你的任何对于PlayAudioButton的设置都将反应在页面的代码中。

2、点击闪电（lithtening bolt）样的图标，将切换到事件的属性名和值列表。

3、在一个指定的Textbox中双击创建控件的事件和事件处理，双击后将会自动创建一个事件名字和在后台代码创建一个方法。

 三步后你将创建一个事件处理方法在35行的c#代码中

 

+=是用于加和设值，应此x+=1等同于x=x+1

在某种意义上他们是一样的，我们是想给点击事件添加和设置一个或多个事件处理方法，是的我们的Click可以设置多个处理方法，意思是当事件被触发的时候他的事件啊列表就会一一被执行，一个事件能触发一个或多个方法。在我们的应用中我们只希望触发一个方法，你可能会说为什么不这样设置：

myButton.Click += PlayAudioButton_Click();

注意后面的(),这是一个方法的调用而我们这里只需要告诉我运行时执行我们的方法而不是调用它的实例，

另外一个有趣的是：我们指定了两个事件执行同一个方法，那我们怎么确定他是被哪个空间执行的呢？

如果你看到下面的代码：

private void PlayAudioButton_Click(object sender, RoutedEventArgs e)
{

}

Windows Phone运行时将会传递一个Sendr参数。因为我们可以将事件和任何空间关联，sender就是源类型，我们需要做的事情是确定他是什么类型，比如是Button还是Rectangle控件的时间，我们确定之后，我们就可以调用他们的属性了。

这种方法签名是Windows PhoneAPI的典型的一种，除了Sender参数外还有RoutedEventArgs类型来传递一些额外的信息.在很多场景中你都会看到这个情况。但是我不保证在这个系列中你能看到。

 

回顾

这节课重点是讲解了页面和控件的布局，对于Grid布局我们学习了使用Auto，星号和像素来设置高和宽，我们学习了使用HorizontalAlignment和VerticalAlignment属性来是空间和边界对齐，Margin来布局控件和边界的距离，最后我们学习了不同的方法来触发事件和事件处理，以及事件处理方法的参数传递。