Advanced User Interface Controls and Components

How to Create Hierarchical Structure of Tab Pages

January 30, 2012

In standard TabControl all tab pages are shown in single line or multiple lines. IntegralUI TabControl allows you to create hierarchical structure of its tab pages where each tab pages can act as a parent for its child tab pages. This is very useful if you want to show a set of tab pages related to each other.

By default TabControl has a Pages property which is a collection of all root tab pages. Every tab page also contains a Pages property which holds its child tab pages. There is no limit on how many tab pages you can add to a specific tab page.

To create this kind of hierarchical structure is simple. At first you need to create root tab pages using the Pages property of TabControl and then add child tab pages using Pages property of specific parent tab page. Here is how you can do this:

private void Init()





LidorSystems.IntegralUI.Containers.TabPage rootPage = null;

for (int i = 1; i < 4; i++)


rootPage = new LidorSystems.IntegralUI.Containers.TabPage("Page " + i.ToString());

page.UseParentTabStripPlacement = false;

page.Expanded = false;


CreateChildPages(rootPage, 0, i.ToString());









private void CreateChildPages(LidorSystems.IntegralUI.Containers.TabPage parent, int level, string prefix)


if (level == 2)



LidorSystems.IntegralUI.Containers.TabPage childPage = null;

for (int i = 0; i < 3; i++)


childPage = new LidorSystems.IntegralUI.Containers.TabPage("Page " + prefix + i.ToString());



CreateChildPages(childPage, level + 1, prefix + i.ToString());



Private Sub Init()




Dim page As LidorSystems.IntegralUI.Containers.TabPage = Nothing

For i As Integer = 1 To 3

page = New LidorSystems.IntegralUI.Containers.TabPage("Page " & i.ToString())

page.UseParentTabStripPlacement = False

page.Expanded = False


CreatePages(page, 0, i.ToString())






End Sub


Private Sub CreatePages(ByVal parent As LidorSystems.IntegralUI.Containers.TabPage, ByVal level As Integer, ByVal prefix As String)

If level = 2 Then


End If


Dim page As LidorSystems.IntegralUI.Containers.TabPage = Nothing

For i As Integer = 0 To 2

page = New LidorSystems.IntegralUI.Containers.TabPage("Page " & prefix & i.ToString())

page.UseParentTabStripPlacement = False

page.Expanded = False




CreatePages(page, level + 1, prefix & i.ToString())


End Sub

In above code the Init method will create five root tab pages, and we are setting all child pages initially to become hidden by setting the Expanded property value to false. The CreateChildPages method is a recursive method which will create and add child pages to its parent page. In this case hierarchy is limited to level 2. The result is shown on image below:

As you can see only root tab pages are shown. To show child tab pages for specific root page, you need to set the Expanded property for that page to true. The layout of TabControl will automatically update itself and show child tab pages. By default child pages are shown next to its parent page, in the same tab strip.

In some cases you may need to show them to the other side of TabControl. There are four sides on which tabs can be shown. Any page (parent or child) can be placed on any side regardless whether its parent belongs to the same side. For example if you want a specific page to be shown on left side, just set its TabStripPlacement property to TabStripPlacement.Left value. The code below will put the selected tab page to the left side of TabControl:

if (this.tabControl1.SelectedPage != null)


this.tabControl1.SelectedPage.UseParentTabStripPlacement = false;

this.tabControl1.SelectedPage.TabStripPlacement = TabStripPlacement.Left;


If Me.tabControl1.SelectedPage IsNot Nothing Then

Me.tabControl1.SelectedPage.UseParentTabStripPlacement = False

Me.tabControl1.SelectedPage.TabStripPlacement = TabStripPlacement.Left

End If

In this way you can show tabs on multiple sides simultaneously. However, only one page can be selected at given time. All other pages hide their content.

A complete sample project in C# and VB showing how to create a TabControl with tab pages displayed in hierarchy is available for download from here:

Download TabControl Hierarchy demo


Sign-up to our newsletter and you will receive news on upcoming events, latest articles, samples and special offers.
Name: Email: *
*By checking this box, I agree to receive a newsletter from Lidor Systems in accordance with the Privacy Policy. I understand that I can unsubscribe from these communications at any time by clicking on the unsubscribe link in all emails.