Layout with Absolute and Dynamic Positioning
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 Windows Presentation Foundation (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.
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 |
|---|---|---|
Dynamic |
Defines an area where you can position child elements in rows and columns. |
|
Dynamic |
Defines an area where you can arrange and stack child elements at the top, bottom, left or right edge. |
|
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. |
|
Dynamic |
Automatically arranges child elements into a single line that can be oriented horizontally or vertically. |
|
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. |
|
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 |
|---|---|---|
Data-Driven Dynamic |
Displays a list of data items. |
|
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 |
|---|---|---|---|
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. |
|
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. |
|
double |
Windows, controls, grid columns. |
Set to 0 for maximum flexibility. |
|
double |
Windows, controls, grid rows. |
Set to 0 for maximum flexibility. |
|
double, Infinity |
Windows, controls, grid columns. |
Set to Infinity for maximum flexibility. |
|
double, Infinity |
Windows, controls, grid rows. |
Set to Infinity for maximum flexibility. |
|
Windows |
Set to CanResize for maximum flexibility. This allows the user to resize the window. |
||
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.