Tab

In This Topic

The tab is a widget that contains tab pages, which consist of 2 widgets – Header and Content. You can easily check whether a given tab page is selected or not by using its Selected property.

Properties and Methods

The tab widget provides the following properties:

TabPages - represents a collection of tab pages the tab widget consists of. The order of tab pages in this collection reflects the order the tabs appear in the widget.
SelectedIndex - stores the index of the currently selected tab page. When the selected tab page changes, the SelectedIndexChanged event is fired.
SelectedPage - gets the currently selected tab page.
HeadersPosition - determines the way the tab page headers are position in respect to the tab widget. The possible values are: Left, Top (default), Right and Bottom.
HeadersSpacing - specifies the spacing between the tab page headers.
HeadersAlignment - determines how the tab page headers are aligned on the tab widget side they are placed on. The supported values are Near (default), Center and Far. For example if the HeadersAlignment is set to Far and the HeadersPosition to Left then the tab page headers will be placed on the bottom-left side of the tab widget.

HeadersMode - determines whether the tab page headers should be rendered inside or outside the tab widget. Can be one of the following:

Headers Mode	Description
Inner	the tab page headers are placed inside the tab widget.
Middle	half of each tab page header is placed inside the tab widget and the other half is placed outside of it.
Outer	the tab page headers are placed outside the tab widget.

When the width/height of the tab page headers is bigger than the width/height of the tab widget a spinner is displayed. The user can use the buttons of the spinner to scroll through the tab page headers. If you want to make sure that a given tab page is visible, you can use the EnsureVisible(NTabPage page) property.

Code Example

The following example creates a tab with 2 tab pages, selects the second tab page and handles the SelectedIndexChanged event:

Tab Example	Copy Code
NTab tab = new NTab(); tab.TabPages.Add(new NTabPage("Page 1", "This is the first tab page.")); tab.TabPages.Add(new NTabPage("Page 2", "This is the second tab page.")); tab.TabPages.Add(new NTabPage("Page 3", "This is the third tab page.")); tab.TabPages.Add(new NTabPage("Page 4", "This is the fourth tab page.")); tab.TabPages.Add(new NTabPage("Page 5", "This is the fifth tab page.")); tab.SelectedIndex = 1; tab.SelectedIndexChanged += new Function<NValueChangeEventArgs>(OnTabSelectedIndexChanged); private void OnTabSelectedIndexChanged(NValueChangeEventArgs arg1) { // Get the selected page index int selectedPageIndex = (int)arg1.NewValue; // Get the tab NTab tab = (NTab)arg1.CurrentTargetNode; // Get the selected page NTabPage selectedPage = tab.SelectedPage; }

Tab Example

Copy Code

NTab tab = new NTab();
 
tab.TabPages.Add(new NTabPage("Page 1", "This is the first tab page."));
tab.TabPages.Add(new NTabPage("Page 2", "This is the second tab page."));
tab.TabPages.Add(new NTabPage("Page 3", "This is the third tab page."));
tab.TabPages.Add(new NTabPage("Page 4", "This is the fourth tab page."));
tab.TabPages.Add(new NTabPage("Page 5", "This is the fifth tab page."));
 
tab.SelectedIndex = 1;
tab.SelectedIndexChanged += new Function<NValueChangeEventArgs>(OnTabSelectedIndexChanged);
 
private void OnTabSelectedIndexChanged(NValueChangeEventArgs arg1)
{
    // Get the selected page index
    int selectedPageIndex = (int)arg1.NewValue;
 
    // Get the tab
    NTab tab = (NTab)arg1.CurrentTargetNode;
 
    // Get the selected page
    NTabPage selectedPage = tab.SelectedPage;
}

The result of this piece of code will be the following tab widget: