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

  • Статья

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

Пример

Создание GridSplitter, который накладывается на границы столбца

Чтобы задать элемент GridSplitter, который меняет размеры соседних столбцов в элементе Grid, задайте присоединенное свойство Column одному из двух столбцов, размеры которых нужно менять. Если в элементе Grid большой одной строки, в качестве значения для присоединенного свойства RowSpan укажите число строк. Затем задайте для свойства HorizontalAlignment значение Left или Right (выбор выравнивания зависит от двух столбцов, размеры которых нужно менять). Наконец, присвойте свойству VerticalAlignment значение Stretch.

<GridSplitter Grid.Column="1" 
              Grid.RowSpan="3" 
              HorizontalAlignment="Left" 
              VerticalAlignment="Stretch"
              Background="Black" 
              ShowsPreview="true"
              Width="5"/>

Если у элемента GridSplitter нет собственного столбца, он может скрываться другими элементами управления в элементе Grid. Дополнительные сведения о том, как предотвратить возникновение этой проблемы, см. в разделе Проверка видимости GridSplitter.

Создание GridSplitter, который занимает столбец

Чтобы задать элемент GridSplitter, который занимает столбец в элементе Grid, задайте присоединенное свойство Column одному из двух столбцов, размеры которых нужно менять. Если в элементе Grid большой одной строки, в качестве значения для присоединенного свойства RowSpan укажите число строк. Затем задайте для свойства HorizontalAlignment значение Center, для свойства VerticalAlignment — значение Stretch, а для свойства Width столбца, в котором находится GridSplitter, — значение Auto.

В следующем примере показано, как определить вертикальный разделитель GridSplitter, который занимает столбец и изменяет размеры соседних столбцов.

<Grid.ColumnDefinitions>
  <ColumnDefinition/>
  <ColumnDefinition Width="Auto" />
  <ColumnDefinition/>
</Grid.ColumnDefinitions>

<GridSplitter Grid.Column="1"
              HorizontalAlignment="Center"
              VerticalAlignment="Stretch"
              Background="Black" 
              ShowsPreview="True"
              Width="5"
              />

См. также