CONTAINING AND ARRANGING CONTROLS
Layout controls determine the arrangement of the controls that they contain. For example, they may arrange controls vertically, horizontally, or in rows and columns.
The preferred style for WPF control arrangement is to make container controls determine the positions of their children and let the children take advantage of whatever space is allowed. This can be particularly useful for localized applications where you cannot easily predict how much space a control will need in a particular language.
For example, suppose a form contains a StackPanel control. The StackPanel contains several buttons that launch application dialog boxes. If you remove the buttons’ Width properties, the buttons automatically size themselves to fit the StackPanel horizontally. Now if you need to make the buttons wider to hold text for a new language, you can simply widen the form. The StackPanel widens to fill the form and the buttons widen to fit the StackPanel.
Example program ResizingButtons, which is available for download on the book’s website, demonstrates buttons with fixed heights but widths that resize when their container resizes.
Layout controls are also important because they can hold lots of other controls. Some of the WPF controls can hold only a single content item. For example, an Expander can hold only a single item. However, if you place another layout control such as a StackPanel inside the Expander, you can then place lots of other controls inside the StackPanel.
The following table briefly describes the WPF controls that are intended mainly to contain and arrange other controls.
| CONTROL | PURPOSE |
| Border1 | Provides a visible border or background to the contents. |
| BulletDecorator2 | Contains two children. The first is used as a bullet and the second is aligned with the first. For example, you can use this to align bullet images next to labels. (See example program UseBulletDecorator, available for download on the book’s website.) |
| Canvas | Creates an area in which you can explicitly position children by specifying their Width, Height, Canvas.Left, and Canvas.Top properties. (See example program UseCanvas, available for download on the book’s website.) |
| DockPanel | Docks its children to its left, right, top, or bottom much as the Dock property does in a Windows Forms application. If the control’s LastChildFill property is True, the control makes its last child control fill the remaining space. (See example program UseDockPanel, available for download on the book’s website.) |
| Expander1 | Displays a header with an expanded/collapsed indicator. The user can click the header or indicator to expand or collapse the control’s single content item. (See example program UseExpander, available for download on the book’s website.) |
| Grid | Displays children in rows and columns. This is somewhat similar to the Windows Forms TableLayoutPanel control. Grid is one of the most useful container controls. |
| GridSplitter | Enables the user to resize two rows or columns in a Grid control. |
| GridView | Displays data in columns within a ListView control. |
| GroupBox1 | Displays a border and caption much as a Windows Forms GroupBox control does. |
| Panel | Panel is the parent class for Canvas, DockPanel, Grid, TabPanel, ToolbarOverflowPanel, UniformGrid, StackPanel, VirtualizingPanel, and WrapPanel. Usually you should use one of those classes instead of Panel, but you can also use Panel to implement your own custom panel controls. |
| ScrollViewer1 | Provides vertical and horizontal scroll bars for a single content element. (See example program UseScrollViewer, available for download on the book’s website.) |
| Separator | Separates two controls inside a layout control. (See example program UseSeparator, available for download on the book’s website.) |
| StackPanel | Arranges children in a single row or column. If there are too many controls, those that don’t fit are clipped. StackPanel is one of the most useful container controls. |
| TabControl | Arranges children in tabs. TabItem controls contain the items that should be displayed in the tabs. (See example program UseTabControl, available for download on the book’s website.) |
| TabItem1 | Holds the content for one TabControl tab. |
| Viewbox1 | Stretches its single child to fill the Viewbox. The Stretch property determines whether the control stretches its child uniformly (without changing the width-to-height ratio). (See example program UseViewbox, available for download on the book’s website.) |
| Virtualizing StackPanel | Generates child items to hold items that can fit in the available area. For example, when working with a ListBox bound to a data source, the VirtualizingStackPanel generates only the items that will fit within the ListBox. If the control is not bound to a data source, this control behaves like a StackPanel. |
| WrapPanel | Arranges children in rows/columns depending on its Orientation property. When a row/column is full, the next child moves to a new row/column. This is similar to the Windows Forms FlowLayoutPanel control. (See example program UseWrapPanel, available for download on the book’s website.) |
1 This control can hold only a single child.
2 This control should hold exactly two children. Controls with no footnote can hold any number of children.
Many of the layout controls have the ability to resize their children if you let them. For example, if you place a Button inside a Grid control’s first row and column, by default the Button resizes when its row and column resize. The control’s Margin property determines how far from the cell’s edges the Button’s edges lie.
If a child control explicitly defines its Width and Height properties, those properties override the parent’s arrangement policy. For example, if you set Width and Height for a Button inside a Grid, the Button does not resize when its Grid cell does.
To get the effect that you want, consider how the control’s Margin, Width, and Height properties interact with the parent layout control.