设计UI的语言—

XAML是什么

对于以往桌面程序开发来说，需求分析结束后，UI设计师完成效果图，再由程序员通过编程实现，两者是“串行”的关系，但是再优秀的团队也会在沟通和整合上消耗巨大精力，比如设计师的设计跟不上逻辑的变化、程序员未能完全实现设计的UI效果图等。如果UI设计师能与程序员“并行”工作的话，那么上面提到的问题就得以解决。因此，微软创造了一种新的开发语言——XAML，这种语言借鉴了网络开发模式(即设计师使用HTML、CSS、JavaScript直接生成UI，程序员则在UI产生的同时实现背后的功能逻辑)。XAML全称是可扩展应用程序标记语言(Extensible Application Markup Language)，它成为了设计师与程序员之间沟通的枢纽，设计师使用Blend来设计静态UI和动画，程序员使用Visual Studio开发后台逻辑代码，其中特别重要的是，这些设计出的静态UI和动画会以XAML的形式保存进项目，无需转化就可以直接编译。

XAML的优点

XAML可以设计出专业的UI和动画——好用
XAML不需要专业的编程知识，它简单易懂、结构清晰——易学
XAML使设计师能直接参与软件开发，随时沟通、无需二次转化——高效
XAML真正实现了UI与逻辑的剥离——降低耦合度

XAML是一种声明语言，它只能用来声明一些UI元素、绘制UI和动画(在XAML里实现动画是不需要编程的)，根本无法在其中加入程序逻辑，这就强制地把逻辑代码和UI代码分开，与UI相关的元素全部集中在表示层、与逻辑相关的代码全部集中在逻辑层，形成了高内聚低耦合的结构，提高了程序的可维护性。

XAML代码简单解析

上面介绍了什么是XAML以及优点，接下来让我们通过简单示例更直观的认识一下XAML。
首先，在Visual Studio 2019中选择WPF应用(.NET Framework)项目模板来新建一个WPF项目：

现在我们已经新建了一个WPF的项目，在Solution Explorer窗口中我们看到，WPF应用项目模板为我们准备了一系列源代码：

Properties分支：主要是程序用到的一些资源和配置文件
References分支：标记了当前项目需要引用的其他项目，比如.NET Framework中的类库、其他程序员编写的项目和类库。
App.xaml：这个文件的作用就是声明了程序的进程会是谁，同时指定了程序的主窗体是谁。在这个分支里还有一个文件——App.xaml.cs，它是App.xaml的后台代码
Window1.xaml分支：程序的主窗体，同样具有自己的后台代码Window1.xaml.cs。

对于XAML文件，VS2019提供了可视化编辑能力，你可以切换XAML代码和预览视图，也可以将两者同时展示，如下图：

下面我们开始重点分析一下Window1.xaml文件和它的后台代码，在Window1.xaml代码中可以看到：

<Window x:Class="WpfApp1.Window1"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="Window1" Height="300" Width="300"><Grid></Grid>
</Window>

看到这段代码的第一感觉就是里面有很多标签，其中还有两个很像主页地址的东西。。。XAML是一种XML派生而来的语言，所有很多XML中的概念在XAML是通用的，比如使用标签声明一个元素(每个元素对应内存中的一个对象)，需要使用起始标签和终止标签，夹在起始标签和终止标签中的XAML代码表示是隶属于这个标签的内容，如果没有内容，则这个标签称为空标签：

非空标签：<标签名 Attribute1=Value1 Attribute2=Value2>Content</标签名>
空标签：<标签名 Attribute1=Value1 Attribute2=Value2/>

这里提到了Attribute，因为大多数中文翻译都将Attribute译为“属性”，而Property也被译为“属性”，关于两者如何辨别区分，将会在后续的博文中单独说明，此处略过。

因为XAML是用来绘制UI控件的，而控件本身就是面向对象的产物，所以XAML标签的Attribute里有一大部分是与控件对象的Property互相对应，还有一些Attribute并不对应控件对象的Property。XAML是一种声明式语言，一个标签就意味着声明了一个对象，对象之间的层级关系要么包含、要么并列，全都提现在标签的关系上，上面代码的总体结构就是一个Window标签内部包含一个Grid标签(也可以说Grid标签是Window标签的内容)，代表的含义就是一个窗体对象内嵌套着一个Grid对象，对于Window标签来说，其中的Title、Height、Width这些Attribute(相对于标签叫Attribute，相对于对象叫Property)与Window对象的Property相对应，两个xmlns是声明名称空间，x:Class=“WpfApp1.Window1”是使用名为Class的Attribute，这个Attribute来自于x:前缀所对应的名称空间，xmlns特征的语法格式如下：

xmlns[:可选的映射前缀]="名称空间"

xmlns后可以跟一个可选的映射前缀，之间用冒号分隔，如果没有写可选映射前缀，那就意味着所有来自于这个名称空间的标签前都不用加前缀，这个没有映射前缀的名称空间称为“默认名称空间”——默认名称空间只能有一个，所以一般选择其中元素被最频繁使用的名称空间来充当默认名称空间。我们改一下上面代码，将xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"改为xmlns:n=“http://schemas.microsoft.com/winfx/2006/xaml/presentation”，则整体代码需要改成如下格式才能编译通过：

<n:Window x:Class="WpfApp1.Window1"xmlns:n="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="Window1" Height="300" Width="300"><n:Grid></n:Grid>
</n:Window>

XAML中引用外来程序集和.NET名称空间的语法时，需要先添加对程序集的引用，然后再在根元素的起始标签中写上xmlns:可选前缀=""这样一句话，这些看上去像主页地址的字符串只是XAML解析器的一个硬性编码，VS2019有自动提示功能，所以不用担心。
最后来说一下x:Class这个Attribute，来自于x映射的名称空间是对应XAML的解析功能的，x:Class的作用是当XAML解析器将包含它的标签解析成C#类后，这个类的类名是什么，我们可以看到Window1.xaml.cs中Window1类的声明时使用了partial关键字，这个关键字可以把一个类拆分在多处定义，只要各部分代码不冲突即可，XAML解析成的类也具有partial这个关键字，所以XAML解析成的类和C#文件里定义的部分就合二为一了。正因为partial这种机制，我们可以把类的逻辑代码留在.cs文件里，用C#语言来实现，把那些与声明及布局UI元素相关的代码分离出去，用XAML语言编写，从而实现UI与逻辑分离。

总结

至此，我们对XAML语言有了一定了解，下一篇我们将学习XAML的语法及编程知识！