Share via


WPF Container Controls Overview

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

Container controls such as Grid, Canvas, or StackPanel, allow you to rapidly design varied and functional user interfaces by providing built-in layout functionality. Each container control handles the layout and positioning of its contained controls, and can provide properties to contained controls that assist with positioning. This topic provides an overview of the different types of container controls and how they affect the layout of their contained controls.

Layout Rounding

Set the container control's UseLayoutRounding property to specify when non-integral pixel values that are calculated during the Measure and Arrange passes are rounded to whole pixel values. This property is inherited by child controls.

Grid

The most familiar container control is the Grid control. By default, each new Window opened in the WPF Designer for Visual Studio includes a Grid control. The Grid allows you to position controls within user-definable cells. Controls placed in cells maintain a fixed margin between two or more control edges and cell edges when the Window is resized. For more information about how to set the margins, see How to: Set Margins for a Control in the WPF Designer.

When added to a Window, a Grid control consists of a single cell. Additional vertical and horizontal rows can be added in code or in the WPF Designer. For more information, see How to: Add Rows and Columns to a Grid.

UniformGrid

The UniformGrid control provides a simplified grid layout for controls. As controls are added to the UniformGrid, they are laid out in a grid pattern that is automatically adjusted to keep an even distance between the controls. The number of cells is adjusted to accommodate the number of controls. For example, if four controls are added to a UniformGrid, they will be arranged in a grid with four cells.

Canvas

The Canvas control supports absolute positioning and provides the least built-in layout functionality to its contained controls. Canvas allows you to position contained controls at an offset from any corner of the panel. Canvas provides four properties to contained controls: Top, Bottom, Right, and Left. Controls contained in a Canvas control must specify one horizontal property and one vertical property, thereby designating the corner that the control will be offset from. For example, if a control specifies values for Top and Right, it will maintain a constant distance from the upper right-hand corner. If values for more than one horizontal or vertical property are specified, then one of the values will be ignored. For more information, see How to: Construct a Layout Based on Absolute Positioning.

StackPanel

StackPanel arranges contained controls in either a vertical stack or in a horizontal row, depending on the value of the Orientation property. If more controls are added to a StackPanel than can be displayed by the width of the StackPanel, they are cut off and not displayed.

WrapPanel

The WrapPanel is similar to the StackPanel in that controls are positioned in either a stack or row based on the Orientation property. In addition to stacking, the WrapPanel provides wrapping support for contained controls. Thus if more controls are added to a WrapPanel than can be displayed by the width of the WrapPanel, they are wrapped around to form an additional stack or row.

DockPanel

The DockPanel provides docking support for the easy positioning of toolbars or other controls that you want to dock to a side of the panel. The DockPanel control provides a property named DockStyle to contained controls that determines how they will be positioned. For example, a control with the DockStyle property set to DockStyle.Top will be docked to the top of the DockPanel. DockPanel also exposes a property named LastChildFill. When this property is true, the last child control added to the DockPanel automatically has its DockStyle property set to true.

TabControl

The TabControl class contains multiple tab items that share the same space on the screen. You can add and remove tab items by using the WPF Designer. For more information, see How to: Add Tab Items to a TabControl.

See Also

Other Resources

WPF Container Controls

Grid

Canvas

StackPanel

WrapPanel

DockPanel

TabControl