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.

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:

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:

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:

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:

For more information, see Star.

See Also

Concepts

Alignment in the WPF Designer

Layout

WPF and Silverlight Designer Overview

Other Resources

Layout Walkthroughs