Compartilhar via

Como redimensionar colunas com um GridSplitter

  • Artigo

Este exemplo mostra como criar uma GridSplitter vertical 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 GridSplitter que redimensione colunas adjacentes em um Grid, defina a propriedade Column anexada a uma das colunas que você deseja redimensionar. Se o Grid tiver mais de uma linha, defina a propriedade anexada RowSpan com o número de linhas. Em seguida, defina a propriedade HorizontalAlignment como Left ou Right (qual alinhamento você define depende de quais duas colunas você deseja redimensionar). Por fim, defina a propriedade VerticalAlignment como Stretch.

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

Um GridSplitter que não tem coluna própria pode ser obscurecido por outros controles na Grid. Para obter mais informações sobre como evitar esse problema, consulte Certifique-se de que um GridSplitter esteja visível.

Como criar um GridSplitter que ocupa uma coluna

Para especificar um GridSplitter que ocupa uma coluna em um Grid, defina a propriedade Column anexada a uma das colunas que você deseja redimensionar. Se a Grade tiver mais de uma linha, defina a propriedade anexada RowSpan para corresponder ao número de linhas. Em seguida, defina o HorizontalAlignment como Center, defina a propriedade VerticalAlignment como Stretche defina o Width da coluna que contém o GridSplitter como Auto.

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

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

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

Consulte também