Overview

A TabStrip control is made up of a hierarchical structure of tab items. It inherits from BaseNavigator and shares the same concept of Menu control. Below is a picture of the built-in Simple_Gray tabstrip:

The basic concept of MenuItem and MenuGroup also applies to TabStrip. In order to design the appearance setting, you need to understand the difference between an item and a group so that you can decide proper CSS style settings on item and group.

Tab Group

Shown as above picture, a tab group contains several tab items. TabStrip control can also have hierarchical structure like a Menu. For example, the following shows a TabStrip with two levels:

Different levels may have different "look" thus may need to apply different CSS style. In the above sample, TopGroup does not have the left and right border as the 2nd level group.

Navigation Group topic contains more details on how to configure a navigation item group and use databinding on a group. Those powerful functions also apply to a tab group.

Tab Item

Similar to a MenuItem, you can create three kinds of tab items:

• An image only tab item
• A tab item with LeftIcon, Text and RightIcon. For example:
  
• A tab item with embedded ASP.NET controls

Navigation Item topic gives more details on the above three types of items.

Tab Item States

Refer to Item Styles, Image and Icons, Look for more details.

Using TabStrip and MultiPage

To associate a TabStrip with MultiPage to create a tab control, simply specify the MultiPageID property for the TabStrip. By default, tab item automatically associates with the page view.

For example, setting TabStrip1.MultiPageID to "MultiPage1" tells the TabStrip to switch PageViews on MultiPage1. When user clicks on the first tab item, the first PageView of the MultiPage appears.

To explicitly associate a tab item with a PageView, set PageViewID to the ID of the PageView.

Scrolling features

Unlike Menu and SlideMenu, a TabStrip does not have pop-up sub menus. Hence, automatically scrolling feature which only applies to a popup submenu is not applied to TabStrip. TabStrip only supports forced-scrolling feature. You must set the following two properties to enable forced-scrolling feature:

1. Set the TabStrip's EnableScrolling property Forced scrolling - if enabled, submenu will automatically scroll if the submenu to true.
2. Set the TabStrip's Width property to a fixed value. When the actual size of the TabStrip exceeds this value, the scroller will appear.

To change the appearnce of the scrolling items, set TabStrip's ScrollUpLookID and ScrollDownLookID .

Other tab item features

Tab item and tab group inherit from NavigationItem and NavigationItemGroup object. All the powerful features that apply to navigation item and navigation item group also apply to tab item and group.