Compartilhar via

Como redimensionar linhas com um GridSplitter

  • Artigo

Este exemplo mostra como usar um horizontal GridSplitter 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 que redimensiona linhas adjacentes em um GridSplitterGrid, defina a propriedade anexada Row como uma das linhas que você deseja redimensionar. Se você Grid tiver mais de uma coluna, defina a propriedade anexada ColumnSpan 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). Finalmente, defina a HorizontalAlignment propriedade como Stretch.

O exemplo a seguir mostra como definir um horizontal GridSplitter 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 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 que ocupa uma linha em um GridSplitterGrid, defina a propriedade anexada Row como uma das linhas que você deseja redimensionar. Se você Grid tiver mais de uma coluna, defina a propriedade anexada ColumnSpan como o número de colunas. Em seguida, defina o para Center, defina a HorizontalAlignment propriedade como Stretche defina o Height da linha que contém o GridSplitterVerticalAlignment para Auto.

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

Confira também