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

См. также