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 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.
Important
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 How to: Construct a Layout Based on Absolute 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
In Design view, select the window.
In the Properties window, set the following properties for the Window:
Property
Value
Effect
This allows the user to resize the window to make more room for controls.
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
In Design view, select the panel.
In the Properties window, set the following properties for the Panel:
Property
Value
Effect
Auto
The panel stretches to fill the width of the parent window or panel.
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.
Tip
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
In Design view, select the grid.
In the Properties window, locate the ColumnDefinitions property, and click the ellipsis button in the property value column.
The Collection Editor appears.
Select or add a new column definition.
Use Auto and star sizing to set the column widths for maximum flexibility.
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.
In the Properties window, locate the RowDefinitions property, and click the ellipsis button in the property value column.
The Collection Editor appears.
Select or add a new row definition.
Use Auto and star sizing to set the row heights for maximum flexibility.
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
In Design view, select a control.
In the Properties window, set the following properties for the control:
Property
Value
Effect
Auto
The control expands horizontally to fit its content.
Auto
The control expands vertically to fit its content.
0
The control can be reduced horizontally as much as necessary.
0
The control can be reduced vertically as much as necessary.
Infinity
The control can be expanded horizontally as much as necessary.
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
WPF and Silverlight Designer Overview