Win10系列：UWP界面布局基础1

随着技术的不断发展，使用者对应用程序的界面体验提出了更高的要求，为了应对越来越复杂的界面设计需求和有效的简化界面开发过程，微软公司在其应用程序的开发技术当中引入一套新的应用程序界面描述语言，这就是XAML。

XAML是eXtensible Application Markup Language的英文缩写，相应的中文名称为可扩展应用程序标记语言。与很多读者所熟知的HTML相似，XAML的作用同样也是用来对应用程序的界面进行描述的，并且相比提供了丰富的界面元素和便于定位扩展的语法。

本章将从XAML基础说起，重点介绍适用于开发Windows应用商店应用所使用的XAML语法，读者通过对本章的学习可以为后面要讲解的内容打好基础。

3.1 XAML的起源

在实际开发工作中，设计者和开发者一般都会使用两种不同的软件工具来完成应用程序的界面设计和代码编写，由于传统应用程序的界面布局和逻辑代码是集成在一起的，因此对于开发传统应用程序而言，开发人员往往是通过参考设计人员给出的界面示意图和说明文档对应用程序的界面进行开发，而无法完全让设计人员也参与到软件开发中来，这往往会使开发出来的应用界面与实际设计之间产生一定的偏差。如果在开发过程中反复修改应用界面，会降低开发人员的工作效率，并对项目进度产生影响。

为解决这一问题，微软在其应用程序开发技术中引入了XAML，使用XAML对应用程序的界面进行描述，可以将应用程序开发中的界面设计和逻辑代码独立分开。设计人员在使用熟悉的软件工具对应用程序界面进行设计的同时，软件工具会实时地将所设计的应用界面用XAML描述出来。这样在设计人员完成对应用界面的设计之后，可以把应用界面所对应的XAML代码交给开发人员应用到项目开发当中，同样，开发人员对XAML所做的更改也会反映在设计人员所熟悉的设计界面当中，从而去除了细节上的反复沟通，减少了错误的产生。

3.2 XAML基础知识

由于XAML是基于XML（可扩展标记语言）的语法规则定义而来的，其本身就是一个组织良好的XML文档，因此XAML文档的内部组成结构与XML非常相似，包括元素的定义格式和属性的设置等。另外，XAML也具有广泛的可扩展性，允许开发人员创建自定义控件、事件和方法等。

在本节中，我们将介绍XAML语言中的一些基础知识，首先是一个完整的XAML文件的组成部分，包括命名空间的声明、元素的定义、元素的属性设置、用于属性赋值时的标记扩展和数据类型转换器；然后介绍XAML中的资源字典，包括资源字典的分类以及如何进行资源的引用、重用和合并；最后将对XAML中的事件以及依赖项属性和附加属性进行讲解。

3.2.1 命名空间

XAML中的命名空间（NameSpace）和C#代码中的using及VB.Net代码中的Imports作用相似，当在XAML文件中定义元素时，需要使用命名空间提前对元素的类库进行引用声明。

通过在Page元素的开始标签中加入"xmlns:命名空间前缀"格式的属性并赋值上一个URI来声明一个命名空间，其中命名空间前缀规定了XAML文件中定义的元素或元素的属性应该包含在相应的命名空间内，URI表示唯一标识符。例如，在Page元素中声明一个前缀为x、URI为"http://schemas.microsoft.com/winfx/2006/XAML"的命名空间，代码如下所示：

<Page xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

</Page>

在声明整个XAML文档的默认命名空间时，可以不加命名空间前缀。如下例所示：

<Page xmlns="http://schemas.microsoft.com/winfx/2006/XAML/presentation">

</Page>

这样，XAML文件中那些没有前缀的元素或属性都属于默认命名空间。

需要注意的是，命名空间的声明要放在XAML文件的Page元素中，而且一个命名空间的前缀名不要与其他的命名空间前缀重名。

3.2.2 元素定义

在XAML中，一个元素被看做是一个对象。根据XAML语法，可以通过如下方法来定义元素。

（1）直接定义

一个起始标签和一个结束标签：<元素名>…</元素名>。这种定义元素的方式是以标签<元素名>开始，以标签</元素名>结束，开始标签和结束标签之间的XAML代码表示这个元素的内容。例如，定义一个Button元素，对应的XAML代码如下所示：

<Button>...</Button>

其中，"<Button>"是开始标签，"</Button>"是结束标签，Button是元素名称，省略部分表示Button元素的内容。

此外，如果元素不包含其他内容，就可以使用一个自结束标签来定义该元素，其语法格式如下所示：

<元素名 />

（2）使用属性元素方式定义元素

有些元素的属性值并不是基础元素，可以通过定义属性元素来设置属性的值，其语法格式如下所示：

<元素名>

<元素名.属性名>

...

</元素名.属性名>

</元素名>

例如，要向Canvas画布中添加一个矩形并填充成蓝色背景，那么就可以将矩形的Fill属性定义成Rectangle.Fill元素来设置这个矩形，对应的XAML代码片段如下所示：

<Canvas>

<Rectangle>

<Rectangle.Fill>

<SolidColorBrush Color="Blue"/>

</Rectangle.Fill>

</Rectangle>

</Canvas>

这里使用SolidColorBrush（纯色画刷）来初始化Fill属性，并且将画刷的颜色设置为蓝色。

需要注意的是，XAML中元素和属性的名称是区分大小写的。例如，如果将TextBox写成textbox，XAML语法解析器将提示错误信息"Windows应用程序项目中不支持textbox"。