Como redimensionar colunas com um GridSplitter

  • Artigo

Este exemplo mostra como criar uma vertical GridSplitter para redistribuir o espaço entre duas colunas em um Grid sem alterar as dimensões do Grid.

Exemplo

Como criar um GridSplitter que sobrepõe a borda de uma coluna

Para especificar um que redimensione colunas adjacentes em um GridSplitterGrid, defina a propriedade anexada Column como uma das colunas que você deseja redimensionar. Se você Grid tiver mais de uma linha, defina a propriedade anexada RowSpan como o número de linhas. Em seguida, defina a HorizontalAlignment propriedade como Left ou Right (qual alinhamento você define depende de quais duas colunas você deseja redimensionar). Finalmente, defina a VerticalAlignment propriedade como Stretch.

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

A GridSplitter que não tem sua própria coluna pode ser obscurecida Gridpor outros controles no . Para obter mais informações sobre como evitar esse problema, consulte Verifique se um GridSplitter está visível.

Como criar um GridSplitter que ocupa uma coluna

Para especificar um que ocupa uma coluna em um GridSplitterGrid, defina a propriedade anexada Column como uma das colunas que você deseja redimensionar. Se sua Grade tiver mais de uma linha, defina a propriedade anexada RowSpan como o número de linhas. Em seguida, defina o como , defina a propriedade como e defina o da coluna que contém o HorizontalAlignmentWidthGridSplitter como AutoCenterStretch.VerticalAlignment

O exemplo a seguir mostra como definir uma vertical GridSplitter que ocupa uma coluna e redimensiona as colunas em ambos os lados dela.

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

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

Confira também