Draw a headered control

  • Article

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 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 an items control (a TabControl). You can also use this procedure with other headered content controls that are listed under "Types" in HeaderedContentControl Types Cc295310.xtlink_newWindow(en-us,Expression.40).png on MSDN. Headered items controls are listed in HeaderedItemsControl Types Cc295310.xtlink_newWindow(en-us,Expression.40).png on MSDN.

To create a headered content control

  1. In the Tools panel on the left side of the Microsoft Expression Blend application window, click Assets Cc295310.0d8b8d29-1af9-418f-8741-be3097d76eab(en-us,Expression.40).png. In the Controls category, select TabControl Cc295310.f13847cd-7fdf-4757-a648-d5ece98fcaea(en-us,Expression.40).png from the list.

    The icon for the TabControl control appears underneath the Assets button, and is selected, ready for you to add a TabControl control to the artboard.

    Tip

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

  2. To add a TabControl object to the artboard, double-click the icon for the TabControl control. By default, the TabControl contains two TabItem objects.

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

    Cc295310.b5763b4e-3032-468e-bbdf-42057fd0cb08(en-us,Expression.40).png

    Tip

    You can add other TabItem objects to the TabControl object if you want to. In the Objects and Timeline panel, right-click the TabControl object, and then click Add TabItem.

  3. On the artboard, make the tab control larger by holding down the CTRL key and dragging the bottom-right-corner sizing handle. Make the TabControl object large enough to display three tabs across the top.

    Tip

    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 in the Objects and Timeline panel, and type a name for the Header property in the Common Properties category of the Properties panel. For example, name the first TabItem object Personal Info.

    Tip

    Alternatively, you can use another control, such as an Image control, as the header for your TabItem. In the Objects and Timeline panel, expand the TabItem object, click the Header object to make it the activated object. You can add an Image control either from the Tools panel or from the Projects panel.

  5. To add content to one of the TabItem objects, activate it by clicking it in the Objects and Timeline panel.

  6. In the Tools panel, double-click StackPanel Cc295310.ec58af86-cc2a-4e1f-91c0-883c5406fdfb(en-us,Expression.40).png to add a StackPanel object to your TabItem object.

  7. In the Objects and Timeline panel, click the StackPanel object to make it the active object. You can now add as many objects to the TabItem object as you like. For example, you could add a TextBlock or ListBox control from the Tools panel.

  8. If you want to add a border and a header for the whole TabControl, you can use another headered content control, the GroupBox control. With the LayoutRoot object activated in the Objects and Timeline panel, select the GroupBox control in the Assets panel, and then use your mouse to draw the control on the artboard, slightly larger than the TabControl object.

  9. To make the TabControl object a child object of the GroupBox object, drag the TabControl object to the GroupBox object in the Objects and Timeline panel.

  10. Change the title of the GroupBox object by selecting it in the Objects and Timeline panel, 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 object, see the GroupBox Sample Cc295310.xtlink_newWindow(en-us,Expression.40).png on MSDN. The sample code is included in the "WPFSamples.exe" package available from Windows SDK .NET Framework 3.0 Samples Cc295310.xtlink_newWindow(en-us,Expression.40).png.

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.