How to: Add Tab Items to a TabControl

  • Article

The Windows Presentation Foundation (WPF) TabControl class contains multiple tab items that share the same space on the screen. Starting with Visual Studio 2008 Service Pack 1, the design experience for the TabControl has changed. At design time, you can add tab items to a TabControl in the WPF 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 WPF Designer, select a TabControl.

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

  3. Select Add Tab from the context menu.

    A new TabItem is added to the TabControl.

Note

By default, the WPF 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 DockPanel 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 WPF 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 WPF Designer.

Using the XAML Editor

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

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

  1. In the XAML editor, locate a TabControl element.

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

    <TabControl Name="tabControl1">
    <TabItem Header="tabItem1" />
</TabControl>

See Also

Reference

TabControl

TabItem

Other Resources

WPF Container Controls