Create a headered control
.png "This page applies to WPF and Silverlight 2")
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 the topic HeaderedContentControl Types on MSDN. Headered items controls are listed in HeaderedItemsControl Types on MSDN.
Note
Headered controls are not available in Microsoft Silverlight 1.0 projects. However, you can layer Canvas layout panels that contain TextBlock objects, and then hook up a JavaScript event hander to make the items appear or disappear depending on which tab the user clicks on. For information about JavaScript, see Silverlight scripting and mouse events.
Note
Microsoft Expression Blend 2 with service pack 1 does not come with Silverlight 2 versions of headered controls. However, the Silverlight 2 SDK (included in the Microsoft Silverlight Tools for Visual Studio) comes with assemblies that contain headered controls such as the TabControl. For information about how to include assemblies in your project, see Import a custom control by adding a reference.
To create a headered content control
In the Toolbox along the left side of Microsoft Expression Blend, click the Asset Library
.png "Cc295310.0224cabd-5da1-4e01-bddd-4a647401a098(en-us,Expression.10).png")
button. In the Controls tab, click System Controls (if it is not already selected), and select the TabControl .png "Cc295310.f13847cd-7fdf-4757-a648-d5ece98fcaea(en-us,Expression.10).png")
control 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.
Tip
The most common user interface (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.
To add a button to the artboard, double-click the Toolbox 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 (top-left)
.png "Cc295310.b5763b4e-3032-468e-bbdf-42057fd0cb08(en-us,Expression.10).png")
Tip
You can add other TabItem objects to the TabControl if you want. 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 check box). Double-click the icon for the TabItem control to add it as a child element in the TabControl.
On the artboard, make the tab control larger by dragging the bottom-right corner sizing handle. Your pointer changes to a double-ended arrow
.png "Cc295310.7d350cd4-6d4f-40bc-9d04-d46d2d54ebee(en-us,Expression.10).png")
to indicate the resizing operation. Make the TabControl 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.
To name one of the TabItem objects, select it under Objects and Timeline, and type a name for the Header property in the Common Properties category of the Properties panel. For example, name the first TabItem object as Personal Info.
Tip
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.
To add content to one of the TabItem objects, activate it by double-clicking it under Objects and Timeline.
In the Toolbox, double-click StackPanel
.png "Cc295310.ec58af86-cc2a-4e1f-91c0-883c5406fdfb(en-us,Expression.10).png")
to add a StackPanel to your TabItem. The content property of the TabItem is changed from the default Grid object to a StackPanel object.Tip
A content property can contain only one item. It is useful to use a panel control such as the StackPanel or Grid as that one item, and then add multiple items to the panel control.
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
.png "Cc295310.f20233a8-3a71-46a5-863b-57a0f5b54f0b(en-us,Expression.10).png")
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 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.
To make the TabControl a child element of the GroupBox, drag the TabControl to the GroupBox under Objects and Timeline.
Dragging the TabControl to the GroupBox
.png "Cc295310.bbfefd21-01bb-4725-bfb0-30e55de6c4df(en-us,Expression.10).png")
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.
Build your project (F5) to see the resulting application.
Note
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.