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

  • 项目

此示例演示如何使用水平 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"/>

另请参阅