Add tabs to a form (or panel)

This exercise describes how to add items to a TabControl:

  1. Click and drag a TabControl from the Toolbox to the Design Sheet:

    2. Resize

    Click and drag the corners of the control to resize the control.

    Reposition

    Click and drag the handle (top-left) to reposition the control.

  2. To add TabControlItems to the TabControl, select Edit Items from the control drop-down menu:

    3. In the Edit Items dialog, with TabControl selected in the left-hand pane, click the Add button to add as many TabItems as required:

    In the Properties pane on the right-hand side, use the Header property to label each tab (for easy identification you can also set the Name of the TabItem to match the Header).

    Close the Edit Items dialog. The Form Explorer will look like this:

  3. Save your changes and click Run to run the form. The TabItems you have added are shown as tabs on the TabControl:

    4. Each page of the TabControl is empty.

    When you add TabControlItems, a Grid “container” is added for each Item. A “container” is simply a control that contains other controls such as a DataGrid, ListBox, Button, etc.

    Close the preview of the form.

To add controls to a TabItem:

  1. Select the TabItem you want to add a control to:

  2. Click and drag a control from the Toolbox to the TabControl:

    3. You can continue to add controls and design the layout of each page of the TabControl in the same way you design the layout of the form.

Selecting a Tab vs Adding a column to the grid

As described above, when you add TabControlItems, a Grid “container” is added for each item. You can add a column or row to a selected grid by clicking on the blue line as shown in the following screenshot:

To select a tab control, or other control, without inadvertently adding a column or a row to the grid:

  1. Select a part of the control that is not overlapped by the blue line.

  2. Alternatively. click outside of the grid to deselect it before clicking on the control.

  3. If you have inadvertently added a column, press CTRL + Z or click Undo on the ribbon to undo the new column.