Поделиться через

Практическое руководство. Изменение размера строк с помощью GridSplitter

  • Статья

В этом примере показано, как использовать горизонтальную GridSplitter для распределения пространства между двумя строками в Grid без изменения измерений Grid.

Пример

Как создать GridSplitter, наложенный на край строки

Чтобы указать GridSplitter, который изменяет размер смежных строк в Grid, задайте для присоединенного свойства 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, занимающий строку

Чтобы указать GridSplitter, которая занимает строку в Grid, задайте для присоединенного свойства Row одну из строк, которые вы хотите изменить размер. Если у вашего Grid более одного столбца, установите для присоединенного свойства ColumnSpan число столбцов. Затем задайте для VerticalAlignment значение Center, задайте для свойства HorizontalAlignment значение Stretchи задайте Height строки, содержащей GridSplitter, значение 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"/>

См. также