Share via


Layout with Absolute and Dynamic Positioning

[This documentation is for preview only, and is subject to change in later releases. Blank topics are included as placeholders.]

When you create a window in an application, you must decide how to lay out the controls on that window. You must also decide how the controls on the window behave when the user resizes the window. These are issues of absolute and dynamic positioning.

When you create a window in an application, you set its size, and the sizes of the controls on that window. You must decide how the window and the controls behave if their content changes. For example, if you add a label control to a window, you can specify how the label behaves if the text is translated into another language. These are issues of dynamic sizing.

Types of Layouts

The following are three types of layouts that you can create in the WPF Designer for Visual Studio:

  • Absolute
    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. The child elements do not move when the parent element is resized. For more information, see How to: Construct a Layout Based on Absolute Positioning or Walkthrough: Constructing a Layout Based on Absolute Positioning.

  • Dynamic
    You arrange child elements by specifying how they should be arranged and how they should wrap relative to their parent. For example, you can arrange controls on a panel and specify that they should wrap horizontally. If the parent element is reduced, the child elements move to the next row. As the parent element is enlarged, the child elements move to the previous row. For more information, see How to: Construct a Dynamic Layout or Walkthrough: Constructing a Dynamic Layout.

  • Data-Driven Dynamic
    You bind a control to data. The control is filled with the data and the rows and columns are automatically styled to fit the data.

Whenever possible, it is preferable to use a dynamic layout. Dynamic layouts are the most flexible, and allow the end user the most control over their environment. Dynamic layouts allow your content to adapt to localization and other content changes. Absolute layouts should be reserved for cases when precise and unchanging positioning of elements is important, or when there is only a single child element, such as an image or a graphic.

Note

Absolute and dynamic layouts can be combined. For example, you might have a window with a dynamic layout overall, but that has a part of the window that uses absolute positioning.

Note

Set the UseLayoutRounding property to specify when non-integral pixel values that are calculated during the Measure and Arrange passes are rounded to whole pixel values. This property is inherited by child controls.

Panels

WPF provides many Panel controls that support absolute and dynamic positioning. Panel controls can be combined by adding one panel control as the child of another. You can use the following panel controls to position elements in your applications:

Panel

Layout Type

Description

Grid

Dynamic

Defines an area where you can position child elements in rows and columns.

DockPanel

Dynamic

Defines an area where you can arrange and stack child elements at the top, bottom, left or right edge.

WrapPanel

Dynamic

Automatically arranges child elements in sequential position, moving content to the next line at the edge of the parent container. Ordering occurs sequentially from top to bottom or from left to right, depending on whether the orientation is set to horizontal or vertical.

StackPanel

Dynamic

Automatically arranges child elements into a single line that can be oriented horizontally or vertically.

UniformGrid

Dynamic

Automatically arranges child elements in rows and columns. The rows and columns are evenly spaced. If an element does not fit in a cell, it is truncated.

Canvas

Absolute

Defines an area where you can position child elements explicitly by using coordinates.

Controls

WPF provides controls that support data-driven dynamic positioning. These controls can be bound to data and sized automatically to fit the data. You can use the following controls to display data dynamically in your applications:

Control

Layout Type

Description

ListView

Data-Driven Dynamic

Displays a list of data items.

GridView

Data-Driven Dynamic

Displays data items in columns for a list view control.

Dynamic Sizing

In dynamic sizing, you configure controls so that they expand or contract automatically to fit their content. For example, if you size a label control to fit text in one language, and the text is translated into another language, you can set the label to resize automatically to fit the new text. Dynamic positioning supports dynamic sizing by adjusting the position of controls automatically when their sizes change.

The following are properties that you can set to help you create dynamic layouts:

Property

Values

Applies To

Notes

Width

double, Auto, *

Windows, controls, grid columns.

Use Auto and star sizing for maximum flexibility. See the next section for more information. * applies only to grid columns.

Height

double, Auto, *

Windows, controls, grid rows.

Use Auto and star sizing for maximum flexibility. See the next section for more information. * applies only to grid rows.

MinWidth

double

Windows, controls, grid columns.

Set to 0 for maximum flexibility.

MinHeight

double

Windows, controls, grid rows.

Set to 0 for maximum flexibility.

MaxWidth

double, Infinity

Windows, controls, grid columns.

Set to Infinity for maximum flexibility.

MaxHeight

double, Infinity

Windows, controls, grid rows.

Set to Infinity for maximum flexibility.

ResizeMode

NoResize

CanMinimize

CanResize

CanResizeWithGrip

Windows

Set to CanResize for maximum flexibility. This allows the user to resize the window.

SizeToContent

Manual

Width

Height

WidthAndHeight

Windows

Set to WidthAndHeight for maximum flexibility. This allows the window to resize itself automatically when its content expands.

Auto and Star Sizing

Auto sizing is used to allow controls to fit their content, even if the content changes size. Star sizing is used to distribute available space among the rows and columns of a grid by weighted proportions. In Extensible Application Markup Language (XAML), star values are expressed as * (or n*). For example, if you have a grid with 4 columns, you could set the widths of the columns as follows:

Column 1

Auto

The column will size to fit its content.

Column 2

*

After the Auto columns are calculated, the column gets part of the remaining width. Column 2 will be one-half as wide as Column 4.

Column 3

Auto

The column will size to fit its content.

Column 4

2*

After the Auto columns are calculated, the column gets part of the remaining width. Column 4 will be two times as wide as Column 2.

For more information, see Star.

See Also

Concepts

Alignment in the WPF Designer

Layout

WPF and Silverlight Designer Overview

Other Resources

Layout Walkthroughs