Demonstra Passo a passo: Construindo um layout baseado no posicionamento absoluto

No posicionamento absoluto, você organiza elementos filho especificando suas localizações exatas Relative to o elemento pai.Por exemplo, você organizar controles em um painel, especificando as coordenadas dos controles em relação ao painel esquerdo e superior.Para obter mais informações, consulte Layout com absoluto e dinâmica posicionamento.

O Windows Presentation Foundation (WPF) Designer for Visual Studio fornece um controle do painel Canvas que ofereça suporte ao posicionamento absoluto.Você pode usar o controle do painel Canvas para posicionar elementos absolutamente 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 exemplos de layouts dinâmicos, consulte Demonstra Passo a passo: Criando um aplicativo de redimensionamento por meio do WPF Designer e Demonstra Passo a passo: Construindo um layout dinâmico.

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

• Criar um aplicativo WPF.

• Adicione um Canvas painel de controle ao aplicativo.

• 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

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

4. (Opcional) Para bloquear o tamanho da janela, use um dos seguintes métodos:

   1. Na janela Properties,defina a propriedade a seguir para o Window:

      Propriedade	Valor
      ResizeMode	NoResize

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

      Propriedade	Valor
      MinWidth	400
      MinHeight	200
      MaxWidth	400
      MaxHeight	200

5. No menu File, clique em Save All.

Adicionar um controle do painel

Por padrão, o novo aplicativo WPF contém um Window com um painel Grid.Para criar um layout com base no posicionamento absoluto, você deve usar um Canvas painel.Esse procedimento você remover o padrão Grid e adicionará uma Canvas.

Para adicionar um controle Wizard

1. No modo Design, selecione .

2. Pressione a tecla DELETE para excluir o Grid.

3. Da Caixa de Ferramentas ,no grupo de Controls, arraste um Canvas controle para o Window.

4. (Opcional) Na janela Propriedades,defina a propriedade de Canvas Altura para Automático.

   O Canvas expande para preencher a altura das Window.

5. (Opcional) Na janela P roperties,defina a propriedade de Canvas Altura para Automático.

   O Canvas expande para preencher a altura das Window.

6. No menu File, clique em Save All.

Adicionar os controles ao formulário

Em seguida, você adicione controles para o painel e use o Left e Top Propriedades de Canvas 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 Canvas.

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

   Propriedade	Valor
   Conteúdo	nome
   Canvas.Left	20
   Canvas.Top	20
   Width	120
   Height	23

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

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

   Propriedade	Valor
   Conteúdo	Senha:
   Canvas.Left	20
   Canvas.Top	60
   Width	120
   Height	23

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

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

   Propriedade	Valor
   Canvas.Left	160
   Canvas.Top	20
   Width	200
   Height	23

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

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

   Propriedade	Valor
   Canvas.Left	160
   Canvas.Top	60
   Width	200
   Height	23

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

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

    Propriedade	Valor
    Conteúdo	OK
    Canvas.Left	196
    Canvas.Top	120
    Width	75
    Height	23

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

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

    Propriedade	Valor
    Conteúdo	Cancel
    Canvas.Left	283
    Canvas.Top	120
    Width	75
    Height	23

13. No menu File, clique em Save All.

Teste o layout

Finalmente, você executar o aplicativo e verificar que os controles respeitam o posicionamento absoluto.

Teste o layout.

1. (Opcional) Se você protegido o tamanho da janela em uma etapa anterior, você deve desbloqueá-lo para executar este procedimento.Na janela Properties, defina as propriedades a seguir Window:

   Propriedade	Valor
   MinWidth	0
   MinHeight	0
   MaxWidth	Infinito
   MaxHeight	Infinito
   ResizeMode	CanResize

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

   Inicia o aplicativo e a janela é exibida.

3. Redimensione a janela.

   Os controles respeitam o posicionamento absoluto e não alteram o tamanho ou posição.

4. 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" ResizeMode="CanResize" Name="Window1" MinWidth="0" MinHeight="0" MaxWidth="Infinity" MaxHeight="Infinity">
    <Canvas Height="Auto" Name="Canvas1" Width="Auto">
        <Label Canvas.Left="20" Canvas.Top="20" Height="23" Width="120" Name="Label1">Name:</Label>
        <Label Canvas.Left="20" Canvas.Top="60" Height="23" Width="120" Name="Label2">Password:</Label>
        <TextBox Canvas.Left="160" Canvas.Top="20" Height="23" Width="200" Name="TextBox1" />
        <TextBox Canvas.Left="160" Canvas.Top="60" Height="23" Width="200" Name="TextBox2" />
        <Button Canvas.Left="196" Canvas.Top="120" Height="23" Width="75" Name="Button1">OK</Button>
        <Button Canvas.Left="283" Canvas.Top="120" Height="23" Width="75" Name="Button2">Cancel</Button>
    </Canvas>
</Window>

Consulte também

Tarefas

Como: Construir um layout baseado no posicionamento absoluto

Conceitos

Alinhamento no WPF Designer

O sistema de layout

Visão geral do designer WPF

Outros recursos

Walkthroughs de layout