WPF循序渐进:XAML入门 .
1. 基本概念
在WPF发布之前,如果开发人员构建应用程序用户界面,那么可能会感到比较繁琐和复杂。例如,当创建Windows Forms应用程序时需要完全使用C#代码构建每个窗体。即使使用Visual Studio开发工具,通过拖放方式创建窗体,所生成的用户界面也是千篇一律,索然无味。如果需要构建丰富一些的用户界面,那么必须通过图形设计人员来设 计一些图形皮肤,并由开发人员实现皮肤与应用程序的整合。这个过程不仅复杂低效,而且也很难实现一些诸如透明,倒影等效果,尤其是在窗体大小变化时,用户 界面可能会变得不堪入目。
以上这些问题,在全新一代的WPF应用程序中都得到了妥善解决,其核心解决方案就是本文关注的焦点XAML。
XAML的英文全称是eXtensible Application Markup Language,中文翻译为“可扩展应用程序标记语言”。这种语言是微软公司为构建新一代应用程序用户界面而创建的一种全新的描述性语言。读者可能会对 以上XAML的定义感到抽象和难以理解,那么可以类比想象一下HTML、XML或者ASP.NET文件中的代码标记,它们之间非常相似。
XAML是一种基于XML的,格式组织良好的标记语言(比HTML要严格和准确)。其支持快速高效实现应用程序用户界面。例如,XAML不仅能够呈现按 钮,文本框等的信息显示,输入等方面的基本功能,而且通过自身的一些高级特性,还可提供支持动画,3D,特效等。同时,XAML是强类型的,所以为元素支 持属性,事件等。另外,XAML还具有广泛的扩展性。正如XAML的名字“可扩展应用程序标记语言”一样,XAML允许开发人员创建自定义控件、事件和函 数等。同时,由于XAML各元素在本质上是WPF类的映射,所以开发人员可以很轻松地使用面向对象的技术对XAML元素进行扩展。这种扩展性为创建功能强 大的WPF应用程序提供了强大支持。
根据WPF应用程序的编程模式可知,这种应用程序通常同时包含程序逻辑代码和XAML标记代码。即,使用XAML生成WPF应用程序的初始用户界面,然后 再编写相应的功能逻辑实现代码。需要重要注意的是,不使用任何XAML也能够创建功能完整的WPF应用程序,因为XAML文档中的每个元素都对应一个. NET类,能够使用XAML实现的所有功能都可以使用程序代码实现。显然,使用XAML的效率和方法会更高效和简单。
在下面的内容中,将以上一篇文章中示例使用的XAML为基础,介绍与之有关的多个内容。
2.XAML示例回顾
首先,回顾一下上一篇文章中示例所使用的XAML代码:
以上代码呈现为一个包括按钮控件的窗口。代码中包括三个元素:(1)处于顶层的Window元素,它呈现为整个窗口;
(2)Grid元素用于实现布局,其中可放置任何控件;(3)Button元素表示按钮控件。
虽然这些代码很简单,但是包含了XAML的多个核心概念,例如基本语法规则、<Window>及其他根元素、命名空间和Code-Behind类,属性和事件等。
3 基本语法规则
如前文所述,XAML是基于XML的,格式组织良好的标记语言。因此,在编写XAML代码时必须遵循以下几个原则,这样才能够尽可能的少犯错误。
XAML是大小写区分的,元素和属性的名称必须一个严格区分大小写。例如,以上述代码中的Button而言,开发人员必须将其声明为<Button>,而不能使<button>。
所有的属性值,无论它是什么数据类型,都必须包含在双引号中。
所有的元素都必须自我封闭。自我封闭可采取两种方式:(1)一个起始标记和一个结束标记,例如<Button>...</Button>。
(2)起始和结束标记在一个标记中,例如<Button ... />。
最终的XAML代码文件必须符合XML文档要求。XML文档要求比较严格,例如,元素不能重叠交叉,必须成对出现,缩进量要规范等。
4 <Window>及其他根元素
如上代码文档所示,在XAML中包括很多描述用户界面的元素。通常情况下,这些元素都必须包含在根元素中,例如以上代码中的<Window> 就是一个最为常见的根元素。根元素是用于包含所有用户界面元素的基本容器,每个XAML文件代码必须包含一个根元素,每个根元素下可包含一个根元素或者多 个XAML元素(称为根元素的子元素)。除此之外,开发人员也可以根据业务需求,采用继承扩展根元素对应类(例如,<Window>元素对应 的是System.Windows.Window类)。
开发人员常用的根元素包括Window、Page、StackPanel、Canvas、Grid等。下面简单介绍一下这些根元素:
<Window>元素
该元素对应的是System.Windows.Window类,其呈现为与用户交互的,最常用的标准窗口。使用该元素呈现的窗口显示了客户区域、最大化最小化关闭按钮、图标、系统菜单、边框等。
<Page>元素
该元素对应的是System.Windows.Controls.Page类,其封装了一个可实现导航的内容页,该内容页可宿主在Window、 NavigationWindow、Frame、UserControl等对象中。该元素对应的基类是 System.Windows.Controls.Panel。
<StackPanel>元素
该元素对应的是System.Windows.Controls.StackPanel类,其能够将子元素置于可垂直或者水平排列的单行中。与< StackPanel>类似的还有<DockPanel>、<TabPanel>、<WrapPanel>等 元素,它们的基类都是System.Windows.Controls.Panel。
<Canvas>元素
该元素对应的是System.Windows.Controls.Canvas类,其定义了一个可使用相对坐标(相对于Canvas定义的区域)显式定位 子元素的区域,例如使用属性Top、Left、Bottom、Right。该元素对应的基类是 System.Windows.Controls.Panel。
<Grid>元素
该元素对应的是System.Windows.Controls.Grid类,其允许开发人员自定义一个包括行和列的表格区域。接着,可在单元格中放入其他子元素。该元素对应的基类是System.Windows.Controls.Panel。
通常情况下,在使用根元素时,必须引用适当的命名空间。在下面一节中将介绍有关命名空间的知识。
5.命名空间和Code-Behind类
在上文代码中设置了两个XAML命名空间(NameSpace),它们是Visual Studio 2008自动生成的,具体如下所示:
设置命名空间的主要目的是帮助XAML解析器了解类所在的位置,其能够减少冲突的可能性。设置命名空间通过xmlns属性来实现,该属性值通常必须是URI(统一资源标志符),例如上面所设置的值。在每个XAML文档中都应该声明类似这样的命名空间。
是WPF的核心命名空间,其涵盖所有WPF类,包括构建用户界面使用的控件。在本例中,该命名空间没有使用前缀,所以它是整个文档的默认命名空间。换言之,在没有特殊情况下,每个元素都自动归置于该命名空间之下。
是XAML的命名空间,其包括影响文档解释的各种XAML特性。该命名空间映射为前缀x。这意味着,通过在任何元素名称之前放置这个前缀,都可使用该前缀,例如<x:ElementName>。
在了解命名空间之后,读者一定还看到在其之上有一行:
这行代码表示的并不是命名空间,而是设置所引用的Code-Behind类。HelloWpf.Window1类中包括有关按钮单击的事件处理程序。
如前文所述,开发人员使用XAML可构建用户界面,同时为了实现业务逻辑还需要撰写程序逻辑代码,例如事件处理程序等。这些程序逻辑代码包含在Code- Behind类文件中。显而易见,必须在XAML与Code-Behind类文件之间建立一定的引用关系,其使用的就是上面那行代码。
注意:在使用<Window>元素时必须设置x:Class。
6.属性和事件
如上代码所示,其重点设置了<Window>和<Button>元素的属性和事件。
在<Window>元素中设置了Title、Height和Width属性。其中Title属性用于设置窗口标题文本内容。Height和 Width属性用于设置窗口的高度和宽度。除此之外,开发人员还可以设置很多有关窗口的属性,例如设置字体大小的FontSize、设置窗口图标的 Icon等等。
在<Button>元素中设置了属性Margin和Name,以及设置事件的Click。其中Margin属性用于设置按钮相对窗口四个边框的距离。Name属性用于设置按钮元素的唯一标识符。Click用于设置单击按钮事件的处理程序名称。
7. 小结
正如读者看到的那样,XAML语法简单,功能强大,是高效构建WPF应用程序的好帮手。然而,由于篇幅所限,笔者不可能讲解有关XAML的所有内容。因 此,读者必须通过自学掌握其他内容,例如学习XAML中的其他元素,包括属性,事件和命令;掌握扩展元素的方法;类型转换等等。有关内容,建议读者重点参 考MSDN中的有关内容。(ms-help://MS.MSDNQTR.v90.en/wpf_conceptual/html/5d858575- a83b-42df-ad3f-047ed2d6e3c8.htm)
在WPF发布之前,如果开发人员构建应用程序用户界面,那么可能会感到比较繁琐和复杂。例如,当创建Windows Forms应用程序时需要完全使用C#代码构建每个窗体。即使使用Visual Studio开发工具,通过拖放方式创建窗体,所生成的用户界面也是千篇一律,索然无味。如果需要构建丰富一些的用户界面,那么必须通过图形设计人员来设 计一些图形皮肤,并由开发人员实现皮肤与应用程序的整合。这个过程不仅复杂低效,而且也很难实现一些诸如透明,倒影等效果,尤其是在窗体大小变化时,用户 界面可能会变得不堪入目。
以上这些问题,在全新一代的WPF应用程序中都得到了妥善解决,其核心解决方案就是本文关注的焦点XAML。
XAML的英文全称是eXtensible Application Markup Language,中文翻译为“可扩展应用程序标记语言”。这种语言是微软公司为构建新一代应用程序用户界面而创建的一种全新的描述性语言。读者可能会对 以上XAML的定义感到抽象和难以理解,那么可以类比想象一下HTML、XML或者ASP.NET文件中的代码标记,它们之间非常相似。
XAML是一种基于XML的,格式组织良好的标记语言(比HTML要严格和准确)。其支持快速高效实现应用程序用户界面。例如,XAML不仅能够呈现按 钮,文本框等的信息显示,输入等方面的基本功能,而且通过自身的一些高级特性,还可提供支持动画,3D,特效等。同时,XAML是强类型的,所以为元素支 持属性,事件等。另外,XAML还具有广泛的扩展性。正如XAML的名字“可扩展应用程序标记语言”一样,XAML允许开发人员创建自定义控件、事件和函 数等。同时,由于XAML各元素在本质上是WPF类的映射,所以开发人员可以很轻松地使用面向对象的技术对XAML元素进行扩展。这种扩展性为创建功能强 大的WPF应用程序提供了强大支持。
根据WPF应用程序的编程模式可知,这种应用程序通常同时包含程序逻辑代码和XAML标记代码。即,使用XAML生成WPF应用程序的初始用户界面,然后 再编写相应的功能逻辑实现代码。需要重要注意的是,不使用任何XAML也能够创建功能完整的WPF应用程序,因为XAML文档中的每个元素都对应一个. NET类,能够使用XAML实现的所有功能都可以使用程序代码实现。显然,使用XAML的效率和方法会更高效和简单。
在下面的内容中,将以上一篇文章中示例使用的XAML为基础,介绍与之有关的多个内容。
2.XAML示例回顾
首先,回顾一下上一篇文章中示例所使用的XAML代码:
<Window x:Class="HelloWpf.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>
<Button Margin="101,114,102,125" Name="btn1" Click="btn1_Click">请单击按钮</Button>
</Grid>
</Window>
(2)Grid元素用于实现布局,其中可放置任何控件;(3)Button元素表示按钮控件。
虽然这些代码很简单,但是包含了XAML的多个核心概念,例如基本语法规则、<Window>及其他根元素、命名空间和Code-Behind类,属性和事件等。
3 基本语法规则
如前文所述,XAML是基于XML的,格式组织良好的标记语言。因此,在编写XAML代码时必须遵循以下几个原则,这样才能够尽可能的少犯错误。
XAML是大小写区分的,元素和属性的名称必须一个严格区分大小写。例如,以上述代码中的Button而言,开发人员必须将其声明为<Button>,而不能使<button>。
所有的属性值,无论它是什么数据类型,都必须包含在双引号中。
所有的元素都必须自我封闭。自我封闭可采取两种方式:(1)一个起始标记和一个结束标记,例如<Button>...</Button>。
(2)起始和结束标记在一个标记中,例如<Button ... />。
最终的XAML代码文件必须符合XML文档要求。XML文档要求比较严格,例如,元素不能重叠交叉,必须成对出现,缩进量要规范等。
4 <Window>及其他根元素
如上代码文档所示,在XAML中包括很多描述用户界面的元素。通常情况下,这些元素都必须包含在根元素中,例如以上代码中的<Window> 就是一个最为常见的根元素。根元素是用于包含所有用户界面元素的基本容器,每个XAML文件代码必须包含一个根元素,每个根元素下可包含一个根元素或者多 个XAML元素(称为根元素的子元素)。除此之外,开发人员也可以根据业务需求,采用继承扩展根元素对应类(例如,<Window>元素对应 的是System.Windows.Window类)。
开发人员常用的根元素包括Window、Page、StackPanel、Canvas、Grid等。下面简单介绍一下这些根元素:
<Window>元素
该元素对应的是System.Windows.Window类,其呈现为与用户交互的,最常用的标准窗口。使用该元素呈现的窗口显示了客户区域、最大化最小化关闭按钮、图标、系统菜单、边框等。
<Page>元素
该元素对应的是System.Windows.Controls.Page类,其封装了一个可实现导航的内容页,该内容页可宿主在Window、 NavigationWindow、Frame、UserControl等对象中。该元素对应的基类是 System.Windows.Controls.Panel。
<StackPanel>元素
该元素对应的是System.Windows.Controls.StackPanel类,其能够将子元素置于可垂直或者水平排列的单行中。与< StackPanel>类似的还有<DockPanel>、<TabPanel>、<WrapPanel>等 元素,它们的基类都是System.Windows.Controls.Panel。
<Canvas>元素
该元素对应的是System.Windows.Controls.Canvas类,其定义了一个可使用相对坐标(相对于Canvas定义的区域)显式定位 子元素的区域,例如使用属性Top、Left、Bottom、Right。该元素对应的基类是 System.Windows.Controls.Panel。
<Grid>元素
该元素对应的是System.Windows.Controls.Grid类,其允许开发人员自定义一个包括行和列的表格区域。接着,可在单元格中放入其他子元素。该元素对应的基类是System.Windows.Controls.Panel。
通常情况下,在使用根元素时,必须引用适当的命名空间。在下面一节中将介绍有关命名空间的知识。
5.命名空间和Code-Behind类
在上文代码中设置了两个XAML命名空间(NameSpace),它们是Visual Studio 2008自动生成的,具体如下所示:
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
在了解命名空间之后,读者一定还看到在其之上有一行:
<Window x:Class="HelloWpf.Window1"
如前文所述,开发人员使用XAML可构建用户界面,同时为了实现业务逻辑还需要撰写程序逻辑代码,例如事件处理程序等。这些程序逻辑代码包含在Code- Behind类文件中。显而易见,必须在XAML与Code-Behind类文件之间建立一定的引用关系,其使用的就是上面那行代码。
注意:在使用<Window>元素时必须设置x:Class。
6.属性和事件
如上代码所示,其重点设置了<Window>和<Button>元素的属性和事件。
在<Window>元素中设置了Title、Height和Width属性。其中Title属性用于设置窗口标题文本内容。Height和 Width属性用于设置窗口的高度和宽度。除此之外,开发人员还可以设置很多有关窗口的属性,例如设置字体大小的FontSize、设置窗口图标的 Icon等等。
在<Button>元素中设置了属性Margin和Name,以及设置事件的Click。其中Margin属性用于设置按钮相对窗口四个边框的距离。Name属性用于设置按钮元素的唯一标识符。Click用于设置单击按钮事件的处理程序名称。
7. 小结
正如读者看到的那样,XAML语法简单,功能强大,是高效构建WPF应用程序的好帮手。然而,由于篇幅所限,笔者不可能讲解有关XAML的所有内容。因 此,读者必须通过自学掌握其他内容,例如学习XAML中的其他元素,包括属性,事件和命令;掌握扩展元素的方法;类型转换等等。有关内容,建议读者重点参 考MSDN中的有关内容。(ms-help://MS.MSDNQTR.v90.en/wpf_conceptual/html/5d858575- a83b-42df-ad3f-047ed2d6e3c8.htm)