[WPF] 使用Grid与GridSplitter排版布局

前言

 

在开发应用程序时，一个很重要的工作项目就是设计用户接口的排版布局。WPF中所提供的Grid控件，让开发人员拥有将版面分割为栏列交错表格区域的能力。而开发人员在使用Grid控件分割版面之后，还可以在版面中加入GridSplitter控件，用以在执行期间提供用户动态调整表格区域大小的功能。

 

本篇文章介绍使用Grid控件与GridSplitter控件，来设计几个常见的基本排版布局，为自己留个纪录也希望能帮助到有需要的开发人员。

 

一上二下布局

 

 

上图是一个一上二下的布局样式，MSDN网站采用这个布局样式来提供各种信息内容。

 

 

 

加入GridSplitter控件：
*在第0列、第0栏表格区域下方，附加一个定义为Grid.ColumnSpan="2"的GridSplitter控件，用以提供动态调整上下两列表格区域高度的功能。
*在第1列、第0栏表格区域右方，附加一个GridSplitter控件，用以提供动态调整下方左右两栏表格区域宽度的功能。

 

 

 

在完成加入这些Grid控件、GridSplitter控件之后，记得将GridSplitter控件的背景颜色定义为透明色(Background="Transparent")，用以提供漂亮的排版布局。

 

一左二右布局

 

 

上图是一个一左二右的布局样式，Outlook采用这个布局样式来提供各种信息内容。

 

 

 

加入GridSplitter控件：
*在第0列、第0栏表格区域右方，附加一个定义为Grid.RowSpan="2"的GridSplitter控件，用以提供动态调整左右两栏表格区域宽度的功能。
*在第0列、第1栏表格区域下方，附加一个GridSplitter控件，用以提供动态调整右方上下两栏表格区域高度的功能。

 

 

 

在完成加入这些Grid控件、GridSplitter控件之后，记得将GridSplitter控件的背景颜色定义为透明色(Background="Transparent")，用以提供漂亮的排版布局。

 

四分割布局

 

 

上图是一个四分割的布局样式，电视墙采用这个布局样式来提供各种信息内容。

 

 

 

完成这个布局样式可以透过Grid控件，将版面切割为2栏2列的表格。

 

 

加入GridSplitter控件：
*在第0列、第0栏表格区域下方，附加一个定义为Grid.ColumnSpan="2"的GridSplitter控件，用以提供动态调整上下两列表格区域高度的功能。
*在第0列、第0栏表格区域右方，附加一个定义为Grid.RowSpan="2"的GridSplitter控件，用以提供动态调整左右两栏表格区域宽度的功能。

 

 

 

在完成加入这些Grid控件、GridSplitter控件之后，记得将GridSplitter控件的背景颜色定义为透明色(Background="Transparent")，用以提供漂亮的排版布局。

 

原始码下载

 

点此下载原始码：GridLayoutSample.rar

<script type="text/javascript"> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>