LIDOR SYSTEMS

Advanced User Interface Controls and Components

TabControl with Nested Tabs

Created: 24 December 2013

Traditionally tab headers of all tabpages in TabControl are shown either in single or multiple lines and placed on one side of their parent content space. If we want to place a child tabs shown under its parent tab, the only way we could that is to create another TabControl with child tabs and place it in the content panel of its parent tabpage.

To solve this problem, a unique feature is included in IntegralUI TabControl which allows creation of tree hierarchy of tab pages, where each tabpage can contain its own child tab pages. There is no limit on levels or number of tabs in this tree hierarchy. You can add as many tabs you like per level and per parent tab. In sections below we will show you how to do that.

Nested Tabs in TabControl .NET
Download Sample - TabControl .NET with Nested Tabs

How to Create Nested Tabs

Each tab can have its own set of child tab pages, all accessible from Pages property. The use is simple, instead of adding a page to the TabControl, we will use the Pages property of specific tab to add a page as a child. In this way we can create a tree hierarchy of tab pages. For example:

private void AddNewPage(LidorSystems.IntegralUI.Containers.TabPage parentPage)

{

LidorSystems.IntegralUI.Containers.TabPage page = new LidorSystems.IntegralUI.Containers.TabPage();

page.Text = "Page";

 

if (parentPage != null)

parentPage.Pages.Add(page);

else

this.tabControl1.Pages.Add(page);

}

Private Sub AddNewPage(ByVal parentPage As LidorSystems.IntegralUI.Containers.TabPage)

Dim page As New LidorSystems.IntegralUI.Containers.TabPage()

page.Text = "Page"

 

If parentPage IsNot Nothing Then

parentPage.Pages.Add(page)

Else

Me.tabControl1.Pages.Add(page)

End If

End Sub

In code above we are using a custom made function which accepts an argument parentPage which determines whether the newly created tab will be added as a child to some specific parent tab, or if it’s not provided, it will be added to the TabControl.

In order to show tabs as nested in other parent tabs, we need to change the value of TabNavigationMode property to Nested. Other values of this property allow you to display tabs in more classic way: single or multiple lines.

Note   At first TabControl has a TabNavigationMode property set to Default value, which shows all tabs in single line, including child tabs. In this case child tabs are shown because each parent tab has its Expanded property set to true. If this property value is changed to false, only root tabs will remain visible, and all child tabs will be removed from current view.

In Nested navigation mode, only tabs that belong to the same path in tree hierarchy are shown, all tabs that belong to a different path will remain hidden. Meaning, currently selected tab page, its siblings and its parent tab pages, including all root tab pages are visible. All other tabs remain hidden. So whenever a selected page is changed, a new set of tabs will become visible.

For example if we have this type of hierarchy:

  • Page1
    • Page11
    • Page12
      • Page121
  • Page2
    • Page21
  • Page3

If Page21 is selected, in current view of TabControl will become visible only these pages:

Page1, Page2, Page21 and Page3

All other child tabs of Page1 will remain hidden until their parent is selected.

Shape and Placement of Nested Tabs

Each parent tab can set the appearance, shape and placement of its child tabs independently from other tabs. For example, we can have a parent tab where all child tabs are colored in different color (more info), have trapezoidal shape of its tab header and are placed at left side of its parent content space.

In this way we can have different sets of child tabs shown in different way, depending on situation. Additionally we can also choose which tab is disabled or hidden.

this.tabControl1.SelectedPage.TabShape = TabShape.Trapezoidal;

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

Me.tabControl1.SelectedPage.TabShape = TabShape.Trapezoidal

Me.tabControl1.SelectedPage.TabStripPlacement = TabStripPlacement.Left

To change the colors of tab pages more details are provided in Multi-Color Tabs in TabControl article.

A sample project in C# and VB is available for download from here: Nested Tabs in TabControl .NET

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.