整理WPF使用Grid与GridSplitter排版布局.docx
《整理WPF使用Grid与GridSplitter排版布局.docx》由会员分享，可在线阅读，更多相关《整理WPF使用Grid与GridSplitter排版布局.docx（16页珍藏版）》请在冰豆网上搜索。
整理WPF使用Grid与GridSplitter排版布局
（完整版）[WPF]使用Grid与GridSplitter排版布局
编辑整理：
尊敬的读者朋友们：
这里是精品文档编辑中心，本文档内容是由我和我的同事精心编辑整理后发布的，发布之前我们对文中内容进行仔细校对，但是难免会有疏漏的地方，但是任然希望（（完整版）[WPF]使用Grid与GridSplitter排版布局）的内容能够给您的工作和学习带来便利。
同时也真诚的希望收到您的建议和反馈，这将是我们进步的源泉，前进的动力。
本文可编辑可修改，如果觉得对您有帮助请收藏以便随时查阅，最后祝您生活愉快业绩进步，以下为（完整版）[WPF]使用Grid与GridSplitter排版布局的全部内容。
（完整版）[WPF]使用Grid与GridSplitter排版布局
编辑整理：
张嬗雒老师
尊敬的读者朋友们:
这里是精品文档编辑中心，本文档内容是由我和我的同事精心编辑整理后发布到文库，发布之前我们对文中内容进行仔细校对，但是难免会有疏漏的地方，但是我们任然希望（完整版）［WPF］使用Grid与GridSplitter排版布局这篇文档能够给您的工作和学习带来便利.同时我们也真诚的希望收到您的建议和反馈到下面的留言区,这将是我们进步的源泉,前进的动力.
本文可编辑可修改，如果觉得对您有帮助请下载收藏以便随时查阅，最后祝您生活愉快业绩进步，以下为〈（完整版）［WPF]使用Grid与GridSplitter排版布局〉这篇文档的全部内容。
[WPF]使用Grid与GridSplitter排版布局
前言
在开发应用程序时，一个很重要的工作项目就是设计用户接口的排版布局。
WPF中所提供的Grid控件,让开发人员拥有将版面分割为栏列交错表格区域的能力。
而开发人员在使用Grid控件分割版面之后,还可以在版面中加入GridSplitter控件，用以在执行期间提供用户动态调整表格区域大小的功能。
本篇文章介绍使用Grid控件与GridSplitter控件，来设计几个常见的基本排版布局，为自己留个纪录也希望能帮助到有需要的开发人员.
一上二下布局
上图是一个一上二下的布局样式，MSDN网站采用这个布局样式来提供各种信息内容.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
〈！
—-Definition—-〉
<！
-—Panel-—〉
<！
-—Column="1”Background=”LightSalmon" /〉-—〉
完成这个布局样式可以透过Grid控件,将版面切割为2栏2列的表格，并且合并第0列中的两个栏。
？
1
<！
—-Splitter-—>
加入GridSplitter控件：
*在第0列、第0栏表格区域下方，附加一个定义为Grid。
ColumnSpan=”2"的GridSplitter控件，用以提供动态调整上下两列表格区域高度的功能。
＊在第1列、第0栏表格区域右方,附加一个GridSplitter控件，用以提供动态调整下方左右两栏表格区域宽度的功能。
？
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<！
—-Definition—->
——Panel-—>
<！
——〈BorderGrid.Row=”0”Grid。
Column="1"Background=”LightSalmon" /〉-—〉
〈！
--Splitter——〉
在完成加入这些Grid控件、GridSplitter控件之后,记得将GridSplitter控件的背景颜色定义为透明色（Background=”Transparent”），用以提供漂亮的排版布局。
一左二右布局
上图是一个一左二右的布局样式，Outlook采用这个布局样式来提供各种信息内容。
？
1
2
3
4
5
6
7
8
9
10
11
12
13
14
〈!
-—Definition-—>
〈！
——Panel—->
<！
--Column=”0"Background="LightYellow”/〉——>
完成这个布局样式可以透过Grid控件，将版面切割为2栏2列的表格，并且合并第0栏中的两个列。
?
1
--Splitter—-〉
加入GridSplitter控件：
＊在第0列、第0栏表格区域右方，附加一个定义为Grid.RowSpan="2”的GridSplitter控件,用以提供动态调整左右两栏表格区域宽度的功能。
＊在第0列、第1栏表格区域下方,附加一个GridSplitter控件，用以提供动态调整右方上下两栏表格区域高度的功能。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
〈!
——Definition——〉
<！
——Panel-—〉
—-Row="1”Grid.Column="0"Background=”LightYellow"/>——>
〈!
--Splitter-—〉
在完成加入这些Grid控件、GridSplitter控件之后，记得将GridSplitter控件的背景颜色定义为透明色（Background=”Transparent"），用以提供漂亮的排版布局。
四分割布局
上图是一个四分割的布局样式，电视墙采用这个布局样式来提供各种信息内容。
？
1
2
3
4
5
6
7
8
9
10
11
——Definition——〉
〈！
——Panel--〉
完成这个布局样式可以透过Grid控件，将版面切割为2栏2列的表格。
?
1
<！
——Splitter——〉
加入GridSplitter控件:
＊在第0列、第0栏表格区域下方，附加一个定义为Grid。
ColumnSpan=”2”的GridSplitter控件,用以提供动态调整上下两列表格区域高度的功能。
＊在第0列、第0栏表格区域右方，附加一个定义为Grid.RowSpan=”2"的GridSplitter控件，用以提供动态调整左右两栏表格区域宽度的功能。
？
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
〈！
—-Definition——〉
〈!
——Panel-->
〈！
—-Splitter--〉
在完成加入这些Grid控件、GridSplitter控件之后，记得将GridSplitter控件的背景颜色定义为透明色（Background=”Transparent”），用以提供漂亮的排版布局。
升级会员 