How to: Construct a Layout Based on Absolute Positioning

  • Article

The Windows Presentation Foundation (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 noteImportant Note:

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 How to: Construct a Dynamic Layout and Walkthrough: Constructing a Dynamic Layout.

Adding a Panel Control

By default, each 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.

    Note

    You can select the grid in various ways, such as by clicking anywhere inside it or by using the TAB key. For more information about how to select elements in the WPF Designer, see How to: Select and Move Elements on the Design Surface.

  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. (Optional) In the Properties window, set the Height property of the Canvas to Auto.

    The Canvas stretches to fill the height of the Window.

  5. (Optional) 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, drag a control onto the Canvas.

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

    • Canvas.Left

    • Canvas.Top

    Note

    There are two sets of mutually exclusive properties: Left / Right, and Top / Bottom. Only Left and Top are exposed in the Properties window, but you can specify Right and Bottom in the XAML editor. If you specify both Left and Right, only the last declaration is used. If you specify both Top and Bottom, only the last declaration is used.

  3. Repeat steps 1 and 2 until all the necessary controls have been added to the panel.

  4. On the File menu, click Save All.

See Also

Tasks

Walkthrough: Constructing a Layout Based on Absolute Positioning

Concepts

Layout with Absolute and Dynamic Positioning

Alignment in the WPF Designer

The Layout System

WPF Designer Overview

Other Resources

Layout Walkthroughs