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.
Grid: The most familiar container control is the Grid control. By default, each new window opened in the Windows Presentation Foundation (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.
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.
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.
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 determine 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. Starting in Visual Studio 2008 Service Pack 1, you can add and remove tab items by using the WPF Designer.
Important Tips:
- To set the rounded corners: To set the rounded corners of any control like stackpanel or grid, you can use the Border control.
For Example, see the sample code below:
<Grid>
<Border Margin="15" BorderBrush="DarkGray" BorderThickness="1" CornerRadius="6">
<StackPanel Orientation="Vertical" Margin="10" Visibility="Visible">
<Label Content="Rounded corners are all around us"/>
<Button Content="Push Me" Padding="20,5" HorizontalAlignment="Center"/>
</StackPanel>
</Border>
</Grid>
Twitter Tag: #WPF, #WPFControl
