对于以前用 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 则被我放在了第二行,第三列
最下面的确定,取消按钮被我放在了第三行,跨了三个列