2023年7月19日发(作者：)

WPF教程六：布局之Grid⾯板Grid:⽹格⾯板 Grid顾名思义就是“⽹格”，以表格形式布局元素，对于整个⾯板上的元素进⾏布局，它的⼦控件被放在⼀个⼀个事先定义好的⼩格⼦⾥⾯，整齐配列。 Grid和其他各个Panel⽐较起来，功能最多也最为复杂。要使⽤Grid，⾸先要向RowDefinitions和ColumnDefinitions属性中添加⼀定数量的RowDefinitions和 ColumnDefinitions元素，从⽽定义⾏数和列数。⽽放置在Grid⾯板中的控件元素都必须显⽰采⽤Row和Column附加属性定义其放置所在的⾏和列，这两个属性的值都是从0开始的索引数，如果没有显式设置任何⾏或列，Grid将会隐式地将控件加⼊在第0⾏第0列。由于Grid的组成并⾮简单的添加属性标记来区分⾏列，这也使得⽤户在实际应⽤中可以具体到某⼀单 元格中，所以布局起来就很精细了。 列宽和⾏⾼，分别可以在ColumnDefinition、RowDefinition⾥⾯指定Width、Height的值。 Grid的单元格可以是空的，⼀个单元格中可以有多个元素，⽽在单元格中元素是根据它们的Z顺序⼀个接着⼀个呈现的。与Canvas⼀样，同⼀个单元格中 的⼦元素不会与其他元素交互布局，信息——它们仅仅是重叠⽽已。 Grid⾯板将元素分割到不可见的⾏列⽹格中。尽管可以在⼀个单元格中放置多个元素（这时这些元素会相互重叠），但在每个单元格中只放置⼀个元素通常更合理。当然，在Grid单元格中的元素本⾝也可能是另⼀个容器，该容器组织它所包含的⼀组控件。 注意：尽管Grid⾯板被设计成不可见的，但可将idLines属性设置为True，从⽽更清晰的观察Grid⾯板，⽅便调试，可以更准确地控制Grid⾯板如何选择列宽和⾏⾼。1、定义⼀个两⾏三列的Grid，在每个单元格⾥⾯放置⼀个Button按钮使⽤XAML代码实现： 1 5 6 7 8 9 10 11 12 13 14 15 16 Top Left17 Middle Left18 Button Right19 Button Middle20 21 注意：如果不知道属性，Grid⾯板会假定该属性的值为0。对于属性也是如此。因此，在Grid⾯板的第⼀个单元格中放置元素时可不指定这两个属性值。2、 调整⾏⾼和列宽 如果Grid⾯板只是按⽐例分配尺⼨的⾏和列的集合，它也就没有什么⽤处了。为了充分发挥Grid⾯板的潜能，可更改每⼀⾏和每⼀列的尺⼨设置⽅式。 Grid⾯板⽀持以下三种设置尺⼨的⽅式：名称绝对设置尺⼨⽅式说明使⽤设备⽆关单位准确地设置尺⼨，就是给⼀个实际的数字，但通常将此值指定为整数。这是最⽆⽤的策略，因为这种策略不够灵活，难以适应内容⼤⼩和容器⼤⼩的改变，⽽且难以处理本地化。⾃动设置尺⼨⽅式值为Auto，实际作⽤就是取实际控件所需的最⼩值，每⾏和每列的尺⼨刚好满⾜需要，这是最有⽤的尺⼨设置⽅式。按⽐例设置尺⼨⽅式按⽐例将空间分割到⼀组⾏和列中。这是对所有⾏和列的标准设置。通常值为*或N*，实际作⽤就是取尽可能⼤的值，当某⼀列或⾏被定义为*则是尽可能⼤，当出现多列或⾏被定义为*则是代表⼏者之间按⽐例⽅设置尺⼨。 为了获得最⼤的灵活性，可混合使⽤这三种尺⼨设置⽅式。例如，创建⼏个⾃动设置尺⼨的⾏，然后通过按⽐例设置尺⼨的⽅式让最后的⼀⾏或两⾏充满剩余的空间，这通常是很有⽤的。 可通过设置ColumnDefinition对象的Width属性或者RowDefinition对象的Height属性来确定尺⼨设置⽅式。 （1）设置100设备⽆关单位的绝对宽度： （2）使⽤⾃动尺⼨设置⽅式，需要使⽤Auto值 （3）使⽤按⽐例尺⼨设置⽅式，需要使⽤星号(*) 如果希望不均匀的分割剩余空间，可指定权重，权重必须放在星号之前。例如，如果有两⾏是按⽐例设置尺⼨，并希望第⼀⾏的⾼度是第⼆⾏⾼度的⼀半，那么可以使⽤如下设置来分配剩余空间： 使⽤XAML代码定义⼀个3⾏4列的Grid

第⼀⾏第⼀列 第⼆⾏第⼀列 第三⾏第⼀列 第⼀⾏第⼆列 第⼆⾏第⼆列 第三⾏第⼆列 运⾏效果图：3、跨越多⾏和多列

除了可以使⽤Row和Column附加属性在单元格中放置元素，还可以使⽤另外两个附加属性使元素跨越多个单元格，这两个附加属性是RowSpan和ColumnSpan。 例如，下⾯的按钮将占据第⼀⾏中的第⼀个和第⼆个单元格的所有空间：Span Button下⾯的代码通过跨越两⾏和两列，拉伸按钮使其占据所有4个单元格：Span Button⽰例 1 5 6

7 8 9 10 11 12 13 14 15 16 thie is a test17 OK18 Cancle19 20 界⾯运⾏效果：4、分割窗⼝ 每个Windows⽤户都见过分隔条—能将窗⼝的⼀部分与另⼀部分分类的可拖动分割器。例如，当使⽤Windows资源管理器时，会看到⼀系列⽂件夹（在左边）和⼀系列⽂件（在右边）。可拖动它们之间的分隔条来确定每部分占据窗⼝的⽐例。 在WPF中，分隔条由GridSplitter类表⽰，它是Grid⾯板的功能之⼀。通过为Grid⾯板添加GridSplitter对象，⽤户就可以改变⾏和列的尺⼨。例如： 1 5 6

7 8 9 10 11 12 13 14 15 16 Left17 Right18 Left19 Right20

21 23 24 界⾯运⾏效果： 可以通过拖动中间的分割条，来改变两列的相对宽度，效果如下图所⽰： 注意：为了成功地创建GridSplitter对象，务必为VerticalAlignment（垂直对齐⽅式）、HorizontalAlignment（⽔平对齐⽅式）以及width属性（或Height属性）提供相应的属性值。 理解如何使⽤GridSplitter类，从⽽得到所期望的效果需要⼀定的经验，下⾯列出⼏条指导原则： （1）GridSplitter对象必须放在Grid单元格中，可与以及存在的内容⼀并放到单元格中，这时需要调整边距设置，使他们不相互重叠。更好的⽅法是预留⼀列或⼀⾏专门⽤于放置GridSplitter对象，并将预留⾏或列的Height或Width属性的值设置为Auto。 （2）GridSplitter对象总是改变整⾏或整列的尺⼨（⽽⾮改变单个单元格的尺⼨）。为使GridSplitter对象的外观和⾏为保持⼀致，需要拉伸GridSplitter对象使其穿越整⾏或整列，⽽不是将其限制在单元格中。为此，可使⽤RowSpan或ColumnSpan属性。例如，上⾯的例⼦中GridSplitter对象的RowSpan属性设置为2，因此被拉伸充满整列。如果不使⽤该设置，GridSplitter对象会显⽰在顶⾏（放置它的⾏）中，即使这样，拖动分隔条时也会改变整列的尺⼨。 （3）GridSplitter对象很⼩不易看见，为了使其更可⽤，需要为其设置最⼩尺⼨。在上⾯的例⼦中，对于垂直分隔条，需要将VerticalAlignment属性设置为Stretch（使分隔条填满区域的整个⾼度），并将Width设置为固定值。对于⽔平分隔条，需要设置HorizontalAlignment属性来拉伸，并将Height属性设置为固定值。 （4）GridSplitter对齐⽅式还决定了分隔条是⽔平的（⽤于改变⾏的尺⼨）还是竖直的（⽤于改变列的尺⼨）。对于⽔平分隔条，需要将VerticalAlignment属性设置为Center（这也是默认值），以指明拖动分隔条改变上⾯⾏和下⾯⾏的尺⼨。对于垂直分隔条，需要将HorizontalAlignment属性设置为Center，以改变分隔条两侧列的尺⼨。 在上⾯的例⼦中还包含了⼀处额外的细节。在声明GridSplitter对象时，将ShowPreview属性设置为false，因此，当把分隔条从⼀边拖到另⼀边时，会⽴即改变列的尺⼨。但是如果将ShowPreview属性设置为true，当拖到分隔条时就会看到⼀个灰⾊的阴影跟随⿏标指针，⽤于显⽰将在何处进⾏分割。并且直到释放了⿏标键之后列的尺⼨才改变。如果GridSplitter对象获得了焦点，也可以使⽤箭头键改变相应的尺⼨。

提⽰：可以改变GridSplitter对象的填充⽅式，使其不只是具有阴影的灰⾊矩形。技巧是使⽤Background属性应⽤填充，该属性可以接收简单的颜⾊或更复杂的画刷。