通过

如何：使用 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，该 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"/>

另请参阅