LIDOR SYSTEMS

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()

{

this.tabControl1.SuspendUpdate();

this.tabControl1.Pages.Clear();

 

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());

 

this.tabControl1.Pages.Add(rootPage);

}

 

this

.tabControl1.ResumeUpdate();

}

 

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

{

if (level == 2)

return;

 

LidorSystems.IntegralUI.Containers.TabPage childPage = null;

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

{

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

 

parent.Pages.Add(childPage);

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

}

}

Private Sub Init()

Me.tabControl1.SuspendUpdate()

Me.tabControl1.Pages.Clear()

 

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())

 

Me.tabControl1.Pages.Add(page)

Next

 

Me.tabControl1.ResumeUpdate()

End Sub

 

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

If level = 2 Then

Return

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

 

parent.Pages.Add(page)

 

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

Next

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

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.