Практическое руководство. Изменение размера строк с помощью разделителя 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"/>

См. также