前面简单介绍了WPF应用程序的类型和开发模式,本节将通过一个WPF独立应用程序实例TextReader进一步介绍WPF应用程序开发的一般过程。
9.5.1 TextReader界面设计
实例TextReader将开发一个可以打开文本文档的小软件,它具有自动刷新目录、自动判断文件类型是否为文本类型,并查看文本类型的功能,同时还可以查看文件和目录等详细属性。
由于WPF修改了应用程序中窗体的布局方式,使得界面布局更加灵活,但也对开发人员提出了更高的要求,而且使对WPF还不太熟悉的初学者更加不知所措。WPF应用程序的界面设计有以下4个步骤:
(1) 根据软件需求,整理出软件中大致的窗体数量以及各个窗体的功能。在TextReader实例中,需要两个窗体,其中一个是主窗体(也是启动窗体),它具有提供文件导航、文件内容查看功能;另外一个窗体是关于窗体,提供实例程序的版本信息等。
(2)对每个窗体根据功能进行大体布局上的考虑,重点考虑界面分几层、各层的布局方式(网格、绝对定位、流等)、各层区域的划分、每个区域内的布局和进一步分区,逐层进行,直到全部完成。以TextReader主窗体为例,最下层用Grid整体布局,共分3行2列,第1行作为菜单,第3行作为状态栏,第2行则是主界面。主界面区域按列分成左右两部分,左边为目录和文件导航树,右边为文件内容显示区域,如图9-12所示。
(3)重复第(2)步操作,知道界面大致框架基本完成,还涉及控件的选择、控件停靠方向、控件边框位置等细节问题。
(4)基本框架完成,开始进行着色,根据界面风格要求,对各控件进行背景色、前景色、背景图片等外观美化,从下到上,直到满意为止。其中,实例TextReader的界面设计效果如图9-12所示。
注意:界面设计图中只有窗体工作区,不包括窗体标题栏等非工作区内容。
示例代码9-15是该窗体布局的XAML代码,其中还包括了事件处理函数等,这些将在随后的几节中进行介绍,这里主要关心界面的布局和外观代码。其中,<Menu>空间表示菜单;<MenuItem>表示具体菜单项;<StatuBar>表示状态栏;<StatuBarItem>表示具体的状态栏项;<GridSpliter>节点表示一个分隔条,可以调整左右Grid列的宽度;<TreeView>是树形控件,在本例中用来加载目录和文件信息;<RichTextBox>是一个文本编辑框,本例中用来以只读方式加载和浏览文件内容;<TextBox>控件是文本输入框,用来以只读方式显示文件和目录的详细属性。
示例代码9-15:
<Window x: href="http://schemas.microsoft.com/winfx/2006/xaml/presentation">http://schemas.microsoft.com/winfx/2006/xaml/presentation"
<TabControl Grid.Column="1" Grid.Row="1" Margin="14,9,8,9" N
|