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

Практическое руководство. Изменение размера столбцов с помощью 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. Дополнительные сведения о том, как предотвратить эту проблему, см. в Make Sure That a GridSplitter Is Visible.

Как создать GridSplitter, занимающий столбец

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

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

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

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

См. также