Walkthrough: Constructing a Layout Based on Absolute Positioning

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 with Absolute and Dynamic Positioning.

The WPF Designer for Visual Studio provides a Canvas panel control that supports absolute positioning. You can use the Canvas panel control to position elements absolutely in your applications.

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.

Prerequisites

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 How to: Create a New WPF Application Project.

   Note

   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 opens in the WPF Designer.

2. In Design view, select the window. For more information, see How to: Select and Move Elements on the Design Surface.

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

   Property	Value
   Width	400
   Height	200

   Tip

   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

The following is the completed MainWindow.xaml file:

<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>

See Also

Tasks

How to: Construct a Layout Based on Absolute Positioning

Concepts

Alignment in the WPF Designer

Layout System

WPF and Silverlight Designer Overview

Other Resources

Layout Walkthroughs