Share via


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.

    TabItem context menu

    A new TabItem is added to the TabControl.

    NoteNote:

    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.

    TabItem collection editor

  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