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.

Important

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: Creating a Resizable Application by Using the WPF Designer and Walkthrough: Constructing a Dynamic Layout.

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.

A layout based on absolute positioning

Note

The dialog boxes and menu commands you see might differ from those described in Help depending on your active settings or edition. To change your settings, choose Import and Export Settings on the Tools menu. For more information, see Working with Settings.

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