# Add Tab Pages

Learn how to add tab pages via designer and code.

## Content



Each tab on the DockingTab control when clicked, open a tab page. Users can add tab pages to the DockingTab control both via the designer and code using the code-editor.

### Adding Tab pages via Designer

You can use both smart tag and collection editor to add tab pages to the DockingTab via designer.

### Smart Tag

When DockingTab is dropped on the CommandDock control, the DockingTab gets added with a default DockingTabPage. Users can add more tab pages using the **Add page** option in **C1DockingTab Tasks** menu of the DockingTab smart tag.

This image depicts the DockingTab smart tag.

![Snapshot of smart tag of docking tab](https://cdn.mescius.io/document-site-files/images/1086a5ae-7197-4f26-942b-edb381682c69/images/dockingtab-smarttag.png)

### Collection Editor

You can also use the **TabPages** property in the Properties window to open the **C1DockingTabPage Collection Editor**.

![Snapshot of collection editor UI](https://cdn.mescius.io/document-site-files/images/1086a5ae-7197-4f26-942b-edb381682c69/images/dockingtab-collectioneditor.png)

In the collection editor, individual DockingTabPages can be added via the Add button and deleted via the Remove button. The properties of each DockingPageTab can be set using the **c1DockingTabPage** **properties** panel.

### Adding Tab pages via Code

You can also add the DockingTab Pages programmatically using the [C1DockingTabPage](/componentone/docs/win/online-command5/) class and **Add** method, as shown in the code below:

```csharp
// Initialize docking tab pages
C1DockingTabPage tabPage1 = new C1DockingTabPage();
C1DockingTabPage tabPage2 = new C1DockingTabPage();
C1DockingTabPage tabPage3 = new C1DockingTabPage();
// Add the tab pages to docking tab
dockingTab.Controls.Add(tabPage1);
dockingTab.Controls.Add(tabPage2);
dockingTab.Controls.Add(tabPage3);
```

### Add a caption to Tab page

You can add a caption to the DockingTabPage using the [ShowCaption](/componentone/docs/win/online-command5/) property in the Properties Window or by using the code snippet below:

```csharp
dockingTab.ShowCaption = true;
```

The image below depicts the DockingTab control with caption.

![DockingTab showing caption area](https://cdn.mescius.io/document-site-files/images/1086a5ae-7197-4f26-942b-edb381682c69/images/caption-tabpage.png)