WPF实例--TextReader

前面简单介绍了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-12 实例TextReader界面设计效果

注意：界面设计图中只有窗体工作区，不包括窗体标题栏等非工作区内容。

示例代码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" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF实例--TextReader" Height="513" Width="602" WindowStartupLocation="CenterScreen" Icon="logo.ico" Closing="Window_Closing" Loaded="Window_Loaded" Name="wndMain"> <Grid Name="grid1" ShowGridLines="False" Background="DarkGoldenrod"> <Grid.RowDefinitions> <RowDefinition Height="30" /> <RowDefinition Height="416*" /> <RowDefinition Height="29" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="200" /> <ColumnDefinition Width="417*" /> </Grid.ColumnDefinitions> <Menu Grid.ColumnSpan="2" Name="menu1" FontSize="15" Background="DarkKhaki"> <MenuItem Header="开始" Name="miStart" Background="DarkKhaki"> <MenuItem Header="关于" Name="miAbout" Click="miAbout_Click" Background="LightCoral" /> <Separator /> <MenuItem Header="退出" Name="MiExit" Click="MiExit_Click" Background ="LightCoral" /> </MenuItem> </Menu> <TreeView Grid.Row="1" Margin="0,9" Name="tvDic" SelectedItemChanged="tvDic_SelectedItemChanged" MouseDoubleClick="tvDic_MouseDoubleClick"/> <GridSplitter Grid.Column="1" Margin="6,0,0,0" Name="gridSplitter1" MinWidth="2" HorizontalAlignment="Left" Width="2" Grid.Row="1" Background="Beige" /> <TabControl Grid.Column="1" Grid.Row="1" Margin="14,9,8,9" Name="t