How to: Construct a Layout Based on Absolute Positioning
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.
.gif "Important note") Important 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
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.
Press the DELETE key to delete the Grid.
From the Toolbox, in the Controls group, drag a Canvas control onto the Window.
(Optional) In the Properties window, set the Height property of the Canvas to Auto.
(Optional) In the Properties window, set the Width property of the Canvas to Auto.
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
From the Toolbox, drag a control onto the Canvas.
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.
Repeat steps 1 and 2 until all the necessary controls have been added to the panel.
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