Passo a passo: Construindo um layout com base no posicionamento absoluto

In absolute positioning, you arrange child elements by specifying their exact locations relative to their parent element. For example, you arrange controls on a panel by specifying the left and top coordinates of the controls relative to the panel. For more information, see Layout com absoluto e dinâmica posicionamento.

O WPF Designer for Visual Studio fornece um Canvas painel de controle que suporte o posicionamento absoluto. You can use the Canvas panel control to position elements absolutely in your applications.

Importante
Whenever possible, it is preferable to use a dynamic layout. Dynamic layouts are the most flexible, adapt to content changes such as localization, and allow the end user the most control over their environment. To see examples of dynamic layouts, see Walkthrough: Criando um aplicativo redimensionável usando o WPF Designer and Passo a passo: Construindo um layout dinâmico.

In this walkthrough, you perform the following tasks:

• Create a WPF application.

• Add a Canvas panel control to the application.

• Add controls to the panel.

• Test the layout.

The following illustration shows how your application will appear.

Observação
Caixas de diálogo e comandos de menu que você vê podem diferir das descritas na Help dependendo das suas configurações ativas ou edição. Para alterar as configurações, escolha Import and Export Settings sobre o Ferramentas menu. For more information, see Trabalhando com configurações.

Pré-requisitos

You need the following components to complete this walkthrough:

• Visual Studio 2010

Creating the Project

The first procedure is to create the project for the application.

To create the project

1. Create a new WPF Application project in Visual Basic or Visual C# named AbsoluteLayout. For more information, see Como: Criar um novo projeto de aplicativo WPF.

   Observação
   You will not write any code in this walkthrough. The language that you choose for your project is the language that is used for the code-behind pages in your application.

   MainWindow. XAML é aberto no WPF Designer.

2. In Design view, select the window. For more information, see Como: Selecionar e mover elementos na superfície de design.

3. In the Properties window, set the following properties for the Window:

   Property	Value
   Width	400
   Height	200

   Dica

   You can also use the resize handles to resize the window in Design view.

4. (Optional) To lock the size of the window, use one of the following methods:

   1. In the Properties window, set the following property for the Window:

      Property	Value
      ResizeMode	NoResize

   2. In the Properties window, set the following properties for the Window:

      Property	Value
      MinWidth	400
      MinHeight	200
      MaxWidth	400
      MaxHeight	200

5. On the File menu, click Save All.

Adding a Panel Control

By default, the new WPF application contains a Window with a Grid panel. To create a layout based on absolute positioning, you must use a Canvas panel. In this procedure you remove the default Grid and add a Canvas.

To add a panel control

1. In Design view, select the grid.

2. Press the DELETE key to delete the Grid.

3. From the Toolbox, in the Controls group, drag a Canvas control onto the Window.

4. In the Properties window, set the Height property of the Canvas to Auto.

   The Canvas stretches to fill the height of the Window.

5. In the Properties window, set the Width property of the Canvas to Auto.

   The Canvas stretches to fill the width of the Window.

6. On the File menu, click Save All.

Adding Controls to the Panel

Next you add controls to the panel and use the Left and Top attached properties of the Canvas to position them absolutely.

To add controls to the panel

1. From the Toolbox, in the Common group, drag a Label control onto the Canvas.

2. In the Properties window, set the following properties for the Label:

   Property	Value
   Content	Name:
   Canvas.Left	20
   Canvas.Top	20
   Width	120
   Height	23

3. From the Toolbox, in the Common group, drag a Label control onto the Canvas.

4. In the Properties window, set the following properties for the Label:

   Property	Value
   Content	Password:
   Canvas.Left	20
   Canvas.Top	60
   Width	120
   Height	23

5. From the Toolbox, in the Common group, drag a TextBox control onto the Canvas.

6. In the Properties window, set the following properties for the TextBox:

   Property	Value
   Canvas.Left	160
   Canvas.Top	20
   Width	200
   Height	23

7. From the Toolbox, in the Common group, drag a TextBox control onto the Canvas.

8. In the Properties window, set the following properties for the TextBox:

   Property	Value
   Canvas.Left	160
   Canvas.Top	60
   Width	200
   Height	23

9. From the Toolbox, in the Common group, drag a Button control onto the Canvas.

10. In the Properties window, set the following properties for the Button:

    Property	Value
    Content	OK
    Canvas.Left	196
    Canvas.Top	120
    Width	75
    Height	23

11. From the Toolbox, in the Common group, drag a Button control onto the Canvas.

12. In the Properties window, set the following properties for the Button:

    Property	Value
    Content	Cancel
    Canvas.Left	283
    Canvas.Top	120
    Width	75
    Height	23

13. On the File menu, click Save All.

Testing the Layout

Finally, you run the application and verify that the controls respect the absolute positioning.

To test the layout

1. (Optional) If you locked the size of the window in a previous step, you must unlock it to perform this procedure. In the Properties window, set the following properties for the Window:

   Property	Value
   MinWidth	0
   MinHeight	0
   MaxWidth	Infinity
   MaxHeight	Infinity
   ResizeMode	CanResize

2. On the Debug menu, click Start Debugging.

   The application starts and the window appears.

3. Resize the window.

   The controls respect the absolute positioning and do not change size or position.

4. Close the window.

Putting it all Together

Este é o arquivo de MainWindow. XAML completo:

<Window x:Class="MainWindow"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="200" Width="400" ResizeMode="CanResize" Name="MainWindow" 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: Criar um layout com base no posicionamento absoluto

Conceitos

Alinhamento no WPF Designer

Sistema de layout

Visão geral do WPF e do Silverlight Designer

Outros recursos

Walkthroughs de layout