使用Grid来对WPF页面进行布局排版.docx

使用Grid来对WPF页面进行布局排版对于以前用Windows Form来开发客户端程序的程序员，在使用WPF开发客户端的程序时，在窗体布局上将是他必须面对的一个坎。　　布局产生困惑的一个典型场景如下：　　我们在开发WPF窗体时候，我们会发现，当我们把菜单控件(Menu)、工具条（ToolBar、ToolBarPanel）、状态条（StatusBar）这些最常见的页面元素拖动到WPF窗体的时候。我们会发现WPF窗体中，这些页面元素可以放置在任何位置，而不是之前Windows Form那样：主菜单在最上面，状态条在最下面。　　WPF中每一个元素如何布局变得更加灵活了，这样可以让美工更好的设计出更漂亮的页面，但是也会让一些缺乏艺术细胞的技术人员页面布局变得巨难看无比。比如我最近在写个简单的调查系统客户端维护工具，使用WPF程序来开发，这个页面布局的事情，就让我非常头大。　　WPF跟布局有关的控件很多，System.Windows.Controls.Panel是这些所有布局有关的类的基类。需要注意的是，我们在页面布局上一般都是使用这个类的扩展类来处理布局，而不是使用这个类。这些扩展类包括：　　System.Windows.Controls.Canvas　(画布)　　System.Windows.Controls.DockPanel　(停靠布局)　　System.Windows.Controls.Grid　(表格)　　System.Windows.Controls.StackPanel　(堆栈布局)　　System.Windows.Controls.VirtualizingPanel　(虚堆栈布局)　　System.Windows.Controls.WrapPanel　(覆盖布局)　　我自己在使用中觉得：对于我们从Window Form习惯来的技术人员，使用Grid(表格)布局就可以满足我们绝大多数的布局需求，而且简单。下面我们就来介绍如何使用Grid布局控件来进行窗体布局设计。　　Grid布局控件很类似HTML标签中的Table标签。我们事先把一个区域划分成不同的表格，然后决定，某些控件放在那个表格中，那些控件是要跨多少个表格来放置。比如下面窗体效果，是由后面的XAML文件来实现这个效果的。　　这个窗口布局上，我使用了Grid控件　　我把这个窗口首先划分成三行三列的一个Grid。如上图我对这个窗体的拆分。　　最上面的显示多少条目、下拉列表框和刷新按钮，被放在第一行，跨三列；未发布的调查表列表框被放在第二行，第一列；支持来回拖动的GridSplitter被我放在了第二列，第二行；ListView则被我放在了第二行，第三列；最下面的确定，取消按钮被我放在了第三行，跨了三个列。　　上述界面效果的XAML文件如下：Windowxmlns=/winfx/2006/xaml/presentationxmlns:x=/winfx/2006/xamlx:Class=HongjunGuo.SurveySystem.Client.QuestionnaireListTitle=调查列表 Height=300 Width=500Grid Grid.ColumnDefinitionsColumnDefinition Width=150/ColumnDefinition Width=5 /ColumnDefinition Width=*//Grid.ColumnDefinitionsGrid.RowDefinitionsRowDefinition Height=35/RowDefinition Height=*/RowDefinition Height=35//Grid.RowDefinitionsDockPanel Height=30 Name=dockPanel2 Grid.ColumnSpan=3 Grid.Row=0Label显示多少条目：/LabelComboBox Height=21 Name=comboBox1 Width=120 ComboBoxItemIsSelected=True 5/ComboBoxItemComboBoxItem10/ComboBoxItemComboBoxItem20/ComboBoxItemComboBoxItem50/ComboBoxItem/ComboBoxButton Height=23 Name=button1 Width=75刷新/Button/DockPanelListBoxIsSynchronizedWithCurrentItem=True Name=lb_Type　Width=Auto Grid.Column=0 Grid.Row=1　ListBoxItem Name=lbi_Draft ToolTi