如何:使用 GridSplitter 调整行的大小

下面的示例演示如何使用水平 GridSplitter 在不更改 Grid 中维度的情况下重新分配 Grid 中两行之间的空间。

示例

如何创建覆盖行边缘的 GridSplitter

若要指定对 Grid 中相邻行的大小进行调整的 GridSplitter,请将 Row 附加属性设置为要调整大小的行之一。 如果 Grid 有多列,请将 ColumnSpan 附加属性设置为指定列数, 然后将 VerticalAlignment 设置为 TopBottom(要设置哪一种对齐取决于要调整哪两行的大小), 最后将 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"/>

请参见

参考

GridSplitter

其他资源

GridSplitter 帮助主题