How to: Add Tab Items to a Tab Control

Microsoft Silverlight will reach end of support after October 2021. Learn more.

The Silverlight TabControl class is used as a container for TabItem objects that share the same space on the screen. At design time, you can add tab items to a TabControl in the Silverlight Designer. This topic discusses three ways that you can add tab items to a TabControl.

Using the Designer

You can add a tab item to a TabControl by right-clicking the design surface.

To add tab items to a TabControl by using the designer

1. In the Silverlight Designer, drag a TabControl from the Toolbox to the design surface or select an existing TabControl. When you drag a TabControl from the Toolbox on to the design surface, a TabItem is automatically added to the control. 

2. In the upper part of the TabControl, right-click a TabItem.

3. Select Add Tab from the context menu. The following illustration shows the context menu.

   

   A new TabItem is added to the TabControl.

   Note:
   By default, the Silverlight Designer uses a Grid as the tab item's root container. If you need a different root container, you can delete the Grid and add a different container, for example, a StackPanel control.

Using the Collection Editor

You can also add tab items to a TabControl by using the collection editor. When you use the collection editor to configure tab items, Design view and XAML view are updated automatically.

To add tab items to a TabControl by using the collection editor

1. In the Silverlight Designer, select a TabControl.

2. In the Properties window, locate the Items property, and click the ellipsis button in the property value column.

   The Collection Editor dialog box appears.

   

3. Click Add to add a new tab item.

4. (Optional) Set the properties of the tab item.

5. (Optional) Repeat steps 3 and 4 to add more tab items.

6. Click OK to close the Collection Editor and return to the Silverlight Designer.

Using XAML View

You can also add tab items to a TabControl manually by typing in XAML view. Design view is automatically updated with the new tab items.

To add tab items to a TabControl by using XAML view

1. In XAML view, locate a TabControl element.

2. Add a TabItem element as a child of the TabControl element. The XAML should resemble the following.

   <sdk:TabControl Name="tabControl1" Height="100" Width="200">
       <sdk:TabItem Header="tabItem1" Name="tabItem1">
       </sdk:TabItem>
   </sdk:TabControl>
   

   In the previous XAML, sdk has the following XML namespace mapping.

   xmlns:sdk="https://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
   

See Also

Reference

TabControl

TabItem