Share via


How to: Construct a Dynamic Layout

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

  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.

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

  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 System

WPF and Silverlight Designer Overview

Other Resources

Layout Walkthroughs