用Grid和GridSplitter布局和分割WPF窗口

扣扣技术交流群：460189483

我将通过一个实例一步步添加分割栏来尽量覆盖不同的分割风格。 首先你要创建一个新的工程：启动Visual Studio 2017，在开始页面点击Create-> Project来创建一个WPF Application，姑且将此应用程序命名为WindowGridSplit。创建完成后直接运行，出现下面的界面，这就是我们要展示Power的地方：

图1 GridSplitter施展才能的地方

1. 将其分格为两列
    将主窗口分割为两列（或者两行），差不多是最常见的分割方法。
    打开Window1.xaml文件，为主窗口的Grid添加一个名字为gridMain，以便后面与其他Grid做区分。通过gridMain，我们将主窗口分解为3：7的两列，分别在其中添加标签并将其背景以不同颜色填充以便显示其拖动的效果；在gridMain中添加GridSplitter控件，我们可以看到，在没有指定任何属性的情况下，GridSplitter是一个在Column1里面且自动停靠在Column1的右侧的分割栏。认识到这一点非常重要，因为我们要控制它的停靠行为，只有通过修改相关“默认属性”才能达到目的。由于没有指定任何Grid.Row和Grid.Column属性，所以默认都是Grid.Row=“0”、Grid.Column=“0”，同样，HorizontalAlignment="Right" VerticalAlignment="Stretch"：

Column1Column2

图2 分割成两列

小技巧：
由于WPF对控件的布局是解释执行的，所以你的控件出现的先后将直接影响到他们彼此的覆盖关系，就像上面的那样：

Column1 

由于GridSplitter默认Grid.Row=“0”、Grid.Column=“0”，那么它将与Label占用同一列，GridSplitter宽为5像素，它将覆盖Label 5像素。
但是如果以上两行位置掉转，则会出现严重的问题：GridSplitter不可见：
 

Column1

2. 将Column2分割为两行
    有人可能希望将主窗口分割为左列放置TreeView，用语导航，右面分为上下两行，用于显示导航界面和信息，这是更加常见的一种需求。那么只要把上面的Column2再分解为两行，就可以达到目的了：

Column1Column2

上面的代码中我同样添加了一个具有默认属性的GridSplitter，试图将Column2分解为两行，问题出现了：

GridSplitter被默认分配到了第一行的右侧。还好，上面打了预防针，该知道怎么修改它了：
 

然后添加一些标签并分配不同颜色用于区分：
 

Column1Column2Row1Row2

运行结果如下：

图4 水平分割

3. 交叉分割
    其实大部分应用到上面就足够了。下面介绍一下交叉分割，其实也非常简单，就是RowSpan和ColumnSpan的设置问题。
    继续上面的程序，将Row1分解为四个平分窗口：

Column1Column2Row1Cell11Cell12Cell21Cell22Row2

图5 交叉分割

运行结果：

图5 交叉分割

4. GridSplitter独霸一行
    以上介绍的分割栏GridSplitter都是与Grid的其它的GridRow、GridColumn在同一行或者列的，当然你也可以把GridSplitter单独放在一行/列中，设置方式与共享栏方式一样，这里就不错过多描述了。
 

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！