Partilhar via

Demonstra Passo a passo: Construindo um layout dinâmico

  • Artigo

No posicionamento dinâmico, você organiza elementos filho, especificando como eles devem ser organizados e como eles devem quebrar em relação ao seu pai.Você também pode definir as janelas e controles para expandir automaticamente quando seu conteúdo expande.Para obter mais informações, consulte Layout com absoluto e dinâmica posicionamento.

O Windows Presentation Foundation (WPF) Designer for Visual Studio fornece vários Panel controles que suportam posicionamento dinâmico.Painel controles podem ser combinados adicionando um painel de controle como o filho de outra.Você pode usar os seguintes controles do painel para posicionar elementos dinamicamente em seus aplicativos:

Observação importante:

Sempre que possível, é preferível para usar um layout dinâmico.Layouts dinâmicos são os mais flexível, se adapte a alterações, como localização, conteúdo e permitir que a usuário final mais controle sobre seu ambiente.Para ver um exemplo de um layout absoluto, consulte Demonstra Passo a passo: Construindo um layout baseado no posicionamento absoluto.

Nesta explicação passo a passo, você executa as seguintes tarefas:

  • Criar um aplicativo WPF.

  • Configurar o padrão Grid painel de controle.

  • Para adicionar controles ao formulário

  • Teste o layout.

A ilustração a seguir mostra como o aplicativo será exibido.

Observação:

As caixas de diálogo e comandos de menu demonstradas podem ser diferentes daqueles descritas na Ajuda, dependendo das configurações ativas ou configurações de edição.Para alterar as configurações, escolher Importar e exportar configurações on the Ferramentas menu.Para obter mais informações, consulte Configurações do Visual Studio.

Pré-requisitos

Para completar este passo a passo, são necessários os seguintes componentes:

  • Visual Studio 2008

Criando o projeto

O primeiro procedimento é criar um projeto para o aplicativo.

Para criar o projeto

  1. Criar um novo projeto de Aplicativo WPF em Visual Basic ou Visual C# chamado DataDrivenLayout.Para obter mais informações, consulte Como: Criar um novo projeto de aplicativo do WPF.

    Observação:

    Nessa explicação passo a passo, você não irá escrever nenhum código de programa.O idioma que você escolhe para seu projeto é o idioma que é usado para as páginas code-behind de seu aplicativo.

    Window1.xaml é aberto no WPF Designer.

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

  3. Na janela Properties, defina as propriedades a seguir Window:

    Propriedade

    Valor

    Width

    400

    Height

    200

    SizeToContent

    WidthAndHeight
    Dica:

    Você também pode usar as alças de redimensionamento para redimensionar a janela no modo de design.

  4. No menu File, clique em Save All.

Configurando o Controle do Painel de Grade Padrão

Por padrão, o novo aplicativo WPF contém um Window com um painel Grid.Nesse procedimento você adicionar quatro linhas e quatro colunas para a grade.Você definir a largura de cada coluna para *, de modo que a largura disponível é dividida igualmente entre as quatro colunas.Você definir a altura de três das linhas Para automaticamente, de modo que eles contenham serão dimensionados para se ajustar seu conteúdo.Você define a altura da outra linha para *, que ele use a altura disponível restante.

Para adicionar um controle Wizard

  1. No modo Design, selecione .

  2. (Opcional) Na janela Properties,localize a propriedade ShowGridLines e selecione a caixa de seleção.

    Quando o aplicativo é executado, as linhas de grade aparecerá na janela.Isso é útil para depuração, mas você deve limpar a propriedade ShowGridLines caixa de seleção para código de produção.

  3. Na janela Properties,localize a propriedade RowDefinitions e clique no botão de reticências na coluna valor da propriedade.

    O Editor de coleção caixa de diálogo aparece.

    1. Clique em Add quatro vezes para adicionar quatro colunas.

    2. Defina a propriedade largura da primeira linha como Automático.

    3. Definir a propriedade largura da segunda linha Para *.

    4. Defina a propriedade largura da primeira linha como Automático.

    5. Defina a propriedade largura da primeira linha como Automático.

    6. Clique em OK para fechar o Editor de coleção e retornar para a WPF Designer.

      Agora, há quatro colunas na grade, mas somente uma coluna aparece.As colunas cujas largura propriedades são definidas como automático são temporariamente ocultas porque eles não têm qualquer conteúdo.Para essa explicação passo a passo, está tudo bem.Para evitar que isso aconteça no futuro, você pode usar dimensionamento de estrela enquanto você trabalha, e alterar para automático quando tiver terminado.

  4. Na janela Properties,localize a propriedade RowDefinitions e clique no botão de reticências na coluna valor da propriedade.

    O Editor de coleção caixa de diálogo aparece.

    1. Clique em Add quatro vezes para adicionar quatro linhas.

    2. Defina a propriedade largura da primeira linha como Automático.

    3. Defina a propriedade Altura da segunda linha para Automático.

    4. Defina a propriedade de altura da primeira linha para *.

    5. Defina a propriedade Altura da segunda linha para Automático.

    6. Clique em OK para fechar o Editor de coleção e retornar para a WPF Designer.

      Agora há duas linhas na grade, mas aparece apenas uma linha.As colunas cujas largura propriedades são definidas como automático são temporariamente ocultas porque eles não têm qualquer conteúdo.Para essa explicação passo a passo, está tudo bem.Para evitar que isso aconteça no futuro, você pode usar dimensionamento de estrela enquanto você trabalha, e alterar para automático quando tiver terminado.

  5. No menu File, clique em Save All.

Adicionar os controles ao formulário

Em seguida, você adicione controles para o painel e use o Column e Row Propriedades de Grid para posicioná-las plenamente anexado.

Para adicionar controles ao formulário

  1. Da Caixa de Ferramentas,no grupo de Common, arraste um Label controle para o Grid.

  2. Na janela Properties, defina as propriedades a seguir Label:

    Propriedade

    Valor

    Conteúdo

    nome

    Grid.Column

    0

    Grid.ColumnSpan

    1

    Grid.Row

    0

    Grid.RowSpan

    1

    Width

    Auto

    Height

    23

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Início

    Margin

    20,20,10,10

  3. Da Caixa de Ferramentas,no grupo de Common, arraste um Label controle para o Grid.

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

    Propriedade

    Valor

    Conteúdo

    Senha:

    Grid.Column

    0

    Grid.ColumnSpan

    1

    Grid.Row

    1

    Grid.RowSpan

    1

    Width

    Auto

    Height

    23

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Início

    Margin

    20,10,10,10

  5. Da Caixa de Ferramentas,no grupo de Common, arraste um TextBox controle para o Grid.

  6. Na janela Properties, defina as propriedades a seguir TextBox:

    Propriedade

    Valor

    Grid.Column

    1

    Grid.ColumnSpan

    3

    Grid.Row

    0

    Grid.RowSpan

    1

    Width

    Auto

    Height

    Auto

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    10,20,20,10

  7. Da Caixa de Ferramentas,no grupo de Common, arraste um TextBox controle para o Grid.

  8. Na janela Properties, defina as propriedades a seguir TextBox:

    Propriedade

    Valor

    Grid.Column

    1

    Grid.ColumnSpan

    3

    Grid.Row

    1

    Grid.RowSpan

    1

    Width

    Auto

    Height

    Auto

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    10,10,20,10

  9. Da Caixa de Ferramentas,no grupo de Common, arraste um Button controle para o Grid.

  10. Na janela Properties, defina as propriedades a seguir Button:

    Propriedade

    Valor

    Conteúdo

    OK

    Grid.Column

    2

    Grid.ColumnSpan

    1

    Grid.Row

    3

    Grid.RowSpan

    1

    Width

    75

    Height

    23

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    10,10,6,20

  11. Da Caixa de Ferramentas,no grupo de Common, arraste um Button controle para o Grid.

  12. Na janela Properties, defina as propriedades a seguir Button:

    Propriedade

    Valor

    Conteúdo

    Cancel

    Grid.Column

    3

    Grid.ColumnSpan

    1

    Grid.Row

    3

    Grid.RowSpan

    1

    Width

    75

    Height

    23

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    6,10,20,20

  13. No menu File, clique em Save All.

Teste o layout

Finalmente, você executar o aplicativo e verificar que o layout altera dinamicamente conforme o usuário redimensiona a janela, e como o conteúdo de controles expande além do tamanho dos controles.

Teste o layout.

  1. No menu Depuração, clique em Iniciar Depuração.

    Inicia o aplicativo e a janela é exibida.

  2. Em caixa de texto o nome, digite aleatoriamente para preencher a caixa de texto.Quando você chegar ao final do caixa de texto, tanto o caixa de texto a janela Expandir para ajustar o texto que você digita.

  3. Feche a janela.

  4. No menu Depuração, clique em Iniciar Depuração.

    Inicia o aplicativo e a janela é exibida.

  5. Redimensione a janela tanto vertical quanto horizontalmente.

    As colunas expandir uniformemente para usar o espaço disponível.As caixas de texto Alongar para preencher as colunas expandidas.Três linhas mantêm sua altura e a quarta linha expande para usar o espaço disponível.

  6. Feche a janela.

  7. No modo Design, selecione o rótulo Nome.

  8. No Propriedades janela, altere a propriedade Conteúdo para Please digite seu nome completo aqui:.

    No modo de exibição de design, o rótulo se expande para ajustar o texto.

  9. No menu Depuração, clique em Iniciar Depuração.

    Inicia o aplicativo e a janela é exibida.O controle de rótulo exibe o texto maior.

  10. Feche a janela.

Colocando tudo junto

Este é o arquivo Window1.xaml concluído:

<Window x:Class="Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="200" Width="400" SizeToContent="WidthAndHeight">
    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Label Grid.Column="0" Grid.Row="0" Margin="20,20,10,10" Width="Auto" Height="23" HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="Label1">Name:</Label>
        <Label Grid.Column="0" Grid.Row="1" Margin="20,10,10,10" Width="Auto" Height="23" HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="Label2">Password:</Label>
        <TextBox Grid.Column="1" Grid.Row="0" Margin="10,20,20,10" Grid.ColumnSpan="3" Height="Auto" VerticalAlignment="Stretch" Name="TextBox1" />
        <TextBox Grid.Column="1" Grid.Row="1" Margin="10,10,20,10" Grid.ColumnSpan="3" Name="TextBox2" />
        <Button Grid.Column="2" Grid.Row="3" Margin="10,10,6,20" Width="75" Height="23" HorizontalAlignment="Stretch" Name="Button1">OK</Button>
        <Button Grid.Column="3" Grid.Row="3" Margin="6,10,20,20" Width="75" Height="23" Name="Button2">Cancel</Button>
    </Grid>
</Window>

Próximas etapas

Você pode testar para saber como obter diferentes efeitos com layouts dinâmicos substituindo o painel Grid nessa explicação passo a passo com os seguintes painéis:

Consulte também

Tarefas

Como: Construir um layout dinâmico

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

Conceitos

Alinhamento no WPF Designer

O sistema de layout

Visão geral do designer WPF

Outros recursos

Walkthroughs de layout