Layout com absoluto e dinâmica posicionamento

Artigo
08/01/2011

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 Como: Criar um layout com base no posicionamento absoluto or Passo a passo: Construindo um layout com base no posicionamento absoluto.
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 Como: Criar um layout dinâmico or Passo a passo: Construindo um layout dinâmico.
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.

Observação
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.

Observação
Definir o UseLayoutRoundingdepropriedade para especificar quando a pixel integral não-valores que são calculados durante a Measure e Arrange passagens são arredondadas para valores de pixel inteiro. Esta propriedade é herdada por controles filho .

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	Definido como CanResize para máxima flexibilidade. This allows the user to resize the window.
SizeToContent	Manual Width Height WidthAndHeight	Windows	Definido como WidthAndHeight para máxima flexibilidade. 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.