Partilhar via

Como: Redimensionar linhas com um GridSplitter

  • Artigo

Este exemplo mostra como usar um 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 redimensiona linhas adjacentes 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 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 sua própria fileira 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 fila

Para especificar uma 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 anexada ColumnSpan 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 dela.

<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"/>

Ver também