How to: Construct a Dynamic Layout

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

The WPF Designer for Visual Studio provides many Panel controls that support 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 dynamically in your applications:

• Grid

• DockPanel

• WrapPanel

• StackPanel

• UniformGrid

Grid defines an area where you can position child elements in rows and columns. StackPanel and WrapPanel automatically position child elements in rows or columns. DockPanel automatically positions child elements along the edges. For more information about the different panels, see Layout with Absolute and Dynamic Positioning.

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 How to: Add Rows and Columns to a Grid.

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.

   Note

   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.

   Note

   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.

   Note

   The values shown are the default values.

See Also

Tasks

Walkthrough: Constructing a Dynamic Layout

Concepts

Alignment in the WPF Designer

Layout

WPF and Silverlight Designer Overview

Other Resources

Layout Walkthroughs