Como: Crie aplicativos de usuário redimensionamento com GridSplitter

Você pode usar o controle GridSplitter em conjunto com a Grid caixa de controles para criar janela layouts que são redimensionáveis pelo usuário em tempo de execução.Por exemplo, em um aplicativo que tenha um interface do usuário dividido em áreas, o usuário pode arrastar um separador para tornar uma área maior, dependendo o que o usuário deseja ver mais do.

Quando você adiciona um GridSplitter controle a um Grid, é um filho do controle de grade e deve ser posicionado em uma linha e uma coluna como qualquer outro controle filho.O GridSplitter deve ter uma diferente de zero largura ou altura, para que o usuário possa capturar e arrastá-lo em tempo de execução.

Algumas práticas recomendadas para GridSplitter incluem o seguinte:

• Coloque o GridSplitter em uma linha dedicada ou coluna que não contém quaisquer outros controles.

• Defina a altura da linha ou a largura da coluna que contém o GridSplitter como Auto.

• Dedicar um único Grid para o GridSplitter.Adicione adicionais recipiente painéis ao Grid para concluir o layout.

Para criar um GridSplitter vertical

1. No modo Design, selecione Grid.Para obter mais informações, consulte Como: Selecionar e mover elementos na área de design.

2. Adicione uma coluna onde você deseja GridSplitter seja exibido.Para obter mais informações, consulte Como: Adicionar linhas e colunas a uma grade.

   Observação:
   Em alguns casos, talvez seja difícil posicionar linhas e colunas no designer.Nesse caso, você pode configurar o Grid usando o editor XAML.Consulte a seção exemplo ao final deste tópico para exemplo marcação XAML.

3. Da Caixa de Ferramentas ,arraste um GridSplitter controle para a coluna adicionada.

4. Na janela Properties, defina as propriedades a seguir GridSplitter:

   Propriedade	Valor	Valores possíveis
   ResizeBehavior	BasedOnAlignment	BasedOnAlignment CurrentAndNext PreviousAndCurrent PreviousAndNext
   ResizeDirection	Colunas	Auto Coluna Rows
   Grid.Column	A coluna na qual você deseja GridSplitter.(Coluna números são baseada em zero.)
   Grid.ColumnSpan	1
   Grid.Row	0
   Grid.RowSpan	O número total de linhas na caixa Grid.
   Width	Um número diferente de zero.Por exemplo, 10.
   Height	Auto
   HorizontalAlignment	Stretch	À esquerda Center Direita Stretch
   VerticalAlignment	Stretch	Início Center Parte Inferior Stretch
   Margin	0

5. No modo Design, selecione Grid.

6. Defina a largura de ColumnDefinition que contém o GridSplitter como Automático.

Para criar um GridSplitter horizontal

1. No modo Design, selecione Grid.Para obter mais informações, consulte Como: Selecionar e mover elementos na área de design.

2. Adicione uma coluna onde você deseja GridSplitter seja exibido.Para obter mais informações, consulte Como: Adicionar linhas e colunas a uma grade.

   Observação:
   Em alguns casos, talvez seja difícil posicionar linhas e colunas no designer.Nesse caso, você pode configurar o Grid usando o editor XAML.Consulte a seção exemplo ao final deste tópico para exemplo marcação XAML.

3. Da Caixa de Ferramentas ,arraste um controle GridSplitter para a linha adicionada.

4. Na janela Properties, defina as propriedades a seguir GridSplitter:

   Propriedade	Valor	Valores possíveis
   ResizeBehavior	BasedOnAlignment	BasedOnAlignment CurrentAndNext PreviousAndCurrent PreviousAndNext
   ResizeDirection	Rows	Auto Coluna Rows
   Grid.Column	0
   Grid.ColumnSpan	O número total de linhas na caixa Grid.
   Grid.Row	A coluna na qual você deseja GridSplitter.(Números de linha são baseada em zero.)
   Grid.RowSpan	1
   Width	Auto
   Height	Um número diferente de zero.Por exemplo, 10.
   HorizontalAlignment	Stretch	À esquerda Center Direita Stretch
   VerticalAlignment	Stretch	Início Center Parte Inferior Stretch
   Margin	0

5. No modo Design, selecione Grid.

6. Defina a altura de RowDefinition que contém o GridSplitter como Automático.

Exemplo

O XAML a seguir cria um GridSplitter horizontal:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="Auto" />
        <RowDefinition MinHeight="70" />
    </Grid.RowDefinitions>
    <DockPanel Grid.Row="0" Grid.RowSpan="1" HorizontalAlignment="Stretch" Margin="0" Background="LightBlue" Name="DockPanel1">
    </DockPanel>
    <GridSplitter Grid.Row="1" Grid.RowSpan="1" ResizeDirection="Rows" Width="Auto" Height="10" HorizontalAlignment="Stretch" Margin="0" Name="GridSplitter1" />
    <Grid Grid.Row="2" HorizontalAlignment="Stretch" Margin="0" Background="PaleGoldenrod" Name="Grid1">
    </Grid>
</Grid>

Consulte também

Tarefas

Demonstra Passo a passo: Criando um aplicativo de redimensionamento por meio do WPF Designer

Referência

GridSplitter

Outros recursos

Layouts no criador de WPF

GridSplitter