Compartilhar via

Como redimensionar linhas com um GridSplitter

  • Artigo

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

Exemplo

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

Para especificar um GridSplitter que redimensione linhas adjacentes em um Grid, defina a propriedade anexada Row como uma das linhas que você deseja redimensionar. Se o Grid tiver mais de uma coluna, defina a propriedade ColumnSpan anexada para especificar o número de colunas. Em seguida, defina o VerticalAlignment como Top ou Bottom (qual alinhamento você define depende de quais duas linhas você deseja redimensionar). Por fim, defina a propriedade HorizontalAlignment como Stretch.

O exemplo a seguir mostra como definir uma GridSplitter horizontal que redimensiona linhas adjacentes.

<GridSplitter Grid.Row="1" 
              Grid.ColumnSpan="3" 
              HorizontalAlignment="Stretch" 
              VerticalAlignment="Top"
              Background="Black" 
              ShowsPreview="true"
              ResizeDirection="Rows"
              Height="5"/>

Um GridSplitter que não ocupa a própria linha pode ser obscurecido por outros controles no Grid. 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 linha

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

O exemplo a seguir mostra como definir uma GridSplitter horizontal que ocupa uma linha e redimensiona as linhas em ambos os lados.

<Grid.RowDefinitions>
  <RowDefinition Height="50*" />
  <RowDefinition Height="Auto" />
  <RowDefinition Height="50*" />
</Grid.RowDefinitions>

<StackPanel Grid.Row="0" Grid.Column="1" Background="Tan"/>
<GridSplitter Grid.Row="1"
              HorizontalAlignment="Stretch"
              VerticalAlignment="Center"
              Background="Black" 
              ShowsPreview="True"
              Height="5"
           />
<StackPanel Grid.Row="2" Grid.Column="0" Background="Brown"/>

Consulte também