Home > Controls > Create a headered control

Create a headered control

Headered controls have a header property that is used to label the control. The header property can be as simple as a string of text or as complex as a Microsoft® .NET Framework object. Headered controls can also display content or a collection of items, depending on the type of headered control you are working with. For example, a TabItem inside of a TabControl is a headered content control, and ToolBar and MenuItem are both headered items controls.

The following procedure shows you how to create headered content controls (TabItem controls) inside of an items control (a TabControl). This procedure can also be used with other headered content controls that are listed under Types in the topic HeaderedContentControl Types on MSDN. Headered items controls are listed in HeaderedItemsControl Types on MSDN.

To create a headered content control

1. In the Toolbox along the left side of Microsoft Expression® Blend, click the Asset Library button . In the Controls tab, click System Controls (if it is not already selected), and select TabControl from the list.
   The icon for the TabControl control appears above the Asset Library button, and is selected, ready for you to add a TabControl to the artboard.

   The most common UI elements (such as the Button control) are already displayed in drop-down lists above the Asset Library button so that you can add them quickly.

2. To add a button to the artboard, double-click the Toolbox icon for the TabControl control.
   The TabControl contains two TabItem objects by default.

   

   A TabControl object created on the artboard at its default size and location (top-left)

   You can add other TabItem objects to the TabControl if you wish. Under Objects and Timeline, double-click the TabControl object to make it the activated element. In the Toolbox, select the TabItem control from the Asset Library (select the Show All checkbox). Double-click the icon for the TabItem control to add it as a child element within the TabControl.

3. On the artboard, make the tab control larger by dragging the bottom-right corner sizing handle. Your cursor will change to a double-ended arrow to indicate the resizing operation. Make the TabControl large enough to display three tabs across the top.

   Alternatively, you can resize the TabControl by setting the Height and Width properties in the Layout category of the Properties panel.

4. To name one of the TabItem objects, select it under Objects and Timeline, and enter a name for the Header property in the Common Properties category of the Properties panel. For example, name the first TabItem object to Personal Info.

   Alternatively, you can use another control, such as an Image control, as the header for your TabItem. Under Objects and Timeline, expand the TabItem object, double-click the Header object to make it the activated element. You can either add an Image control from the Toolbox or from the Files panel.

5. To add content to one of the TabItem objects, activate it by double-clicking on it under Objects and Timeline.
6. In the Toolbox, double-click StackPanel to add a StackPanel to your TabItem.
   The content property of the TabItem is changed from the default Grid object to a StackPanel object.

   A content property can only contain one item. It is useful to use panel control such as the StackPanel or Grid as that one item, and then add multiple items to the panel control.

7. Under Objects and Timeline, double-click the StackPanel object to make it the active element.
   You can now add as many elements to the TabItem as you like. For example, you could add a TextBlock or a ListBox control from the Toolbox.

   

   Child objects added to a TabControl object

8. If you want to add a border and a header for the entire TabControl, you can use another headered content control, the GroupBox control. With the LayoutRoot object activated under Objects and Timeline, select the GroupBox control from the Asset Library, and then use your mouse to draw the control on the artboard, slightly larger than the TabControl.
9. To make the TabControl a child element of the GroupBox, click and drag the TabControl to the GroupBox under Objects and Timeline.

   

   Dragging the TabControl to the GroupBox

10. Change the title of the GroupBox by selecting it under Objects and Timeline, and then changing the Header property in the Common Properties category of the Properties panel.
11. Build your project (F5) to see the resulting application.

For a complete sample including code that reacts to items selected in the ListBox, see the GroupBox Sample on MSDN. The sample code is included in the "WPFSamples.exe" package available from Windows SDK .NET Framework 3.0 Samples.