Como: Criar um layout dinâmico

O WPF Designer for Visual Studio fornece muitos Panel controla esse suporte posicionamento dinâmico. 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 dynamically in your applications:

• Grid

• DockPanel

• WrapPanel

• StackPanel

• UniformGrid

Griddefine uma área onde você pode posicionar elementos filho em linhas e colunas. StackPanele WrapPanel Posicionar automaticamente os elementos filho em linhas ou colunas. DockPanelposiciona automaticamente os elementos filho ao longo das arestas. For more information about the different panels, see Layout com absoluto e dinâmica posicionamento.

Importante
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 an example of an absolute layout, see Como: Criar um layout com base no posicionamento absoluto.

Set Window Properties for Dynamic Behavior

When you create a new window you can set properties to maximize the flexibility of a dynamic layout.

To set window properties for dynamic behavior

1. In Design view, select the window.

2. In the Properties window, set the following properties for the Window:

   Property	Value	Effect
   ResizeMode	CanResize	This allows the user to resize the window to make more room for controls.
   SizeToContent	WidthAndHeight	This allows the window to resize itself automatically when its content expands.

Set Panel Properties for Dynamic Behavior

When you add a new panel (such as Grid, DockPanel, or StackPanel) to a window, or to another panel, you can set properties to maximize the flexibility of a dynamic layout.

To set panel properties for dynamic behavior

1. In Design view, select the panel.

2. In the Properties window, set the following properties for the Panel:

   Property	Value	Effect
   Width	Auto	The panel stretches to fill the width of the parent window or panel.
   Height	Auto	The panel stretches to fill the height of the parent window or panel.

Set Grid Properties for Dynamic Behavior

You can use Auto and star sizing to help you create grids that size dynamically to their content. 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 by weighted proportions. For more information, see Star.

When you use Design view to create new rows and columns, they are created with Star sizing by default. For more information, see Como: adicionar linhas e colunas para uma grade.

Dica

You might find it easier to add rows and columns in the Collection Editor and then set the row heights and column widths in the XAML editor.

To set grid properties for dynamic behavior

1. In Design view, select the grid.

2. In the Properties window, locate the ColumnDefinitions property, and click the ellipsis button in the property value column.

   The Collection Editor appears.

   1. Select or add a new column definition.

   2. Use Auto and star sizing to set the column widths for maximum flexibility.

   3. Click OK to close the Collection Editor and return to the WPF Designer.

   Observação
   The columns whose width properties are set to Auto are temporarily hidden because they do not have any content. To avoid this, you can use star sizing while you work, and change to Auto when you are done.

3. In the Properties window, locate the RowDefinitions property, and click the ellipsis button in the property value column.

   The Collection Editor appears.

   1. Select or add a new row definition.

   2. Use Auto and star sizing to set the row heights for maximum flexibility.

   3. Click OK to close the Collection Editor and return to the WPF Designer.

   Observação
   The rows whose height properties are set to Auto are temporarily hidden because they do not have any content. To avoid this, you can use star sizing while you work, and change to Auto when you are done.

Set Control Properties for Dynamic Behavior

When you add a new control to a window or panel, you can set properties to maximize the flexibility of a dynamic layout. You should avoid setting specific sizes for controls to ensure the controls will resize dynamically when the window or content is changed.

To set control properties for dynamic behavior

1. In Design view, select a control.

2. In the Properties window, set the following properties for the control:

   Property	Value	Effect
   Width	Auto	The control expands horizontally to fit its content.
   Height	Auto	The control expands vertically to fit its content.
   MinWidth	0	The control can be reduced horizontally as much as necessary.
   MinHeight	0	The control can be reduced vertically as much as necessary.
   MaxWidth	Infinity	The control can be expanded horizontally as much as necessary.
   MaxHeight	Infinity	The control can be expanded vertically as much as necessary.

   Observação
   The values shown are the default values.

Consulte também

Tarefas

Passo a passo: Construindo um layout dinâmico

Conceitos

Alinhamento no WPF Designer

Sistema de layout

Visão geral do WPF e do Silverlight Designer

Outros recursos

Walkthroughs de layout