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

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

См. также