Partilhar via

Como: Redimensionar colunas com um GridSplitter

  • Artigo

Este exemplo mostra como criar um 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 redimensiona colunas adjacentes num Grid, defina a propriedade anexada Column a uma das colunas que pretende redimensionar. Se o Grid tiver mais de uma linha, defina a propriedade associada 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 tenha sua própria coluna pode ser obscurecido por outros controles no Grid. Para obter mais informações sobre como evitar este problema, consulte certifique-se de que um GridSplitter está visível.

Como criar um GridSplitter que ocupa uma coluna

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

O exemplo a seguir mostra como definir uma GridSplitter vertical 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"
              />

Ver também