下面的示例演示如何使用水平 GridSplitter 在不更改 Grid 中维度的情况下重新分配 Grid 中两行之间的空间。
示例
如何创建覆盖行边缘的 GridSplitter
若要指定对 Grid 中相邻行的大小进行调整的 GridSplitter,请将 Row 附加属性设置为要调整大小的行之一。 如果 Grid 有多列,请将 ColumnSpan 附加属性设置为指定列数, 然后将 VerticalAlignment 设置为 Top 或 Bottom(要设置哪一种对齐取决于要调整哪两行的大小), 最后将 HorizontalAlignment 属性设置为 Stretch。
下面的示例演示如何定义对相邻行的大小进行调整的水平 GridSplitter。
<GridSplitter Grid.Row="1"
Grid.ColumnSpan="3"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Background="Black"
ShowsPreview="true"
ResizeDirection="Rows"
Height="5"/>
不占据自身行的 GridSplitter 可能会被 Grid 中的其他控件遮盖。 有关如何避免此问题的更多信息,请参见如何:确保 GridSplitter 可见。
如何创建占据一行的 GridSplitter
若要指定在 Grid 中占据一行的 GridSplitter,请将 Row 附加属性设置为要调整大小的行之一。 如果 Grid 有多列,请将 ColumnSpan 附加属性设置为列数, 然后将 VerticalAlignment 设置为 Center,将 HorizontalAlignment 属性设置为 Stretch,将包含 GridSplitter 的行的 Height 设置为 Auto。
下面的示例演示如何定义占据一行并对任意一侧的行大小进行调整的水平 GridSplitter。
<Grid.RowDefinitions>
<RowDefinition Height="50*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="50*" />
</Grid.RowDefinitions>
...
<StackPanel Grid.Row="0" Grid.Column="1" Background="Tan"/>
<GridSplitter Grid.Row="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
Background="Black"
ShowsPreview="True"
Height="5"
/>
<StackPanel Grid.Row="2" Grid.Column="0" Background="Brown"/>