About the TabStrip WebControl

Article
10/23/2013

This article provides an introduction to the TabStrip control, which is one of the Windows Internet Explorer WebControls. This control simplifies the authoring of tabbed menus and is particularly useful for authoring UI elements that navigate site content.

The TabStrip and the MultiPage controls can be synchronized so that the content of a PageView element is rendered whenever a Tab menu item is selected. This feature enables a Web page to present content that can be paged, without requiring navigation. For more information on using these controls together, see the MultiPage overview.

Most interfaces using the TabStrip can be authored declaratively using a simple markup syntax. The TabStrip control also implements both client-side and server-side objects, which enable page content to be controlled dynamically using script in ASP.NET or Microsoft Internet Explorer 5.5 or later versions.

Like the other WebControls, the TabStrip makes use of Dynamic HTML (DHTML) behaviors in uplevel browsers. With WebControls, an uplevel browser is Internet Explorer 5.5 or later.

This document includes the following sections.

Authoring with the TabStrip Control
TabStrip Objects
- Client Behavior
- ASP.NET Objects
Features
Formatting and Customization
- CSS
- Graphics
TabStrip Samples
- Using TabStrip with MultiPage
- Using TabStrip without MultiPage
Related Topics

Authoring with the TabStrip Control

For general requirements and recommendations for authoring in ASP.NET with the WebControls, see Authoring Web Forms with the WebControls.

In ASP.NET, any HTML element in a Web page can be marked as a server control. When an element is marked as a server control, ASP.NET processes the element on the Web server and generates output that is tailored to render correctly in the specific client. In the case of the WebControls, the Web pages sent to Internet Explorer 5.5 include DHTML behaviors and make use of several advanced browser features.

The TabStrip supports two distinct modes of authoring. TabStrip interfaces can be implemented in ASP.NET Web Forms using the elements and objects exposed by the TabStrip server-side controls. And, TabStrip interfaces can also be written in HTML pages using the TabStrip behavior. In either case, the same set of elements is used, but due to differences in the component architecture in ASP.NET and Internet Explorer 5.5, the client and server object models are slightly different.

In general, when the client browser is not known, it is recommended that you author ASP.NET Web forms using the TabStrip server controls. Using this approach ensures that the content renders correctly in most commonly used browsers. Because the ASP.NET controls detect the browser type, the content downloaded in Internet Explorer 5.5 automatically includes the TabStrip behavior.

When authoring content specifically for Internet Explorer 5.5 or later versions, it is recommended to write Web pages that use client-side script in conjunction with the TabStrip behavior. This approach results in slightly faster downloads because server-side processing is avoided. Also, Web pages that use the TabStrip behavior provide a better user experience because round trips to the Web server are unnecessary.

TabStrip Objects

To author the TabStrip control, use one or more of the following elements.

Client Behavior	ASP.NET	Description
TabStrip	TabStrip	A container element for other TabStrip elements.
Tab	Tab	Defines a tab element within a TabStrip control.
TabSeparator	TabSeparator	Defines a separator element, which is placed between two adjacent Tab controls.

For links to the complete set of reference documentation for the client-side and server-side objects implemented by the TabStrip control, see TabStrip Reference. The reference documentation is organized into client-side and server-side object pages. The client objects are exposed by the TabStrip behavior, and the ASP.NET objects pages are presented separately.

The next two sections explain the main differences between the client-side and server-side objects exposed by the TabStrip.

Client Behavior

The component object model in Internet Explorer 5.5 or later versions enables custom XML elements to be defined. These custom elements are called element behaviors. An element behavior can be defined using a HTML Component (HTC) file, containing script that defines the behavior of the custom element.

When defining an element behavior, the script component can only define the behavior of a single-element. However, as already shown in the previous section, a TabStrip UI is implemented using up to three different element types. Therefore, because the implementation of the TabStrip behavior uses a single HTC file, the child elements of the TabStrip are authored as literal content of the TabStrip custom element.

In the implementation of the TabStrip behavior, the script in the HTC file parses the literal content elements inside the TabStrip element and generates the appropriate UI with DHTML. This approach enables several different element types to be authored and scripted using a single element behavior.

The objects exposed by the TabStrip behavior can be scripted using either Microsoft JScript or Microsoft Visual Basic Scripting Edition (VBScript)

ASP.NET Objects

In contrast to DHTML behaviors, ASP.NET controls can implement as many custom elements as are needed in a single assembly. In the case of the WebControls, all of the ASP.NET elements are implemented by an assembly named Microsoft.Web.UI.WebControls.dll, the filename of this assembly is the same as the namespace used by these controls.

Therefore, the component architecture on the ASP.NET platform requires no use of literal content elements. Any of the common language runtime languages can be used in an ASP.NET Web Form to control the TabStrip objects.

Features

The TabStrip offers a range of features.

Text-based Tabs

If the developer only wants to focus on the text content of the Tabs. The UI is provided automatically. For more information, see CSS.
Picture-based Tabs

The developer wants partial or full control over the UI. The control supports the use of graphic elements inside tabs and separator elements. For more information, see Graphics.
Orientation

The alignment of the Tab elements in a TabStrip can be defined by setting the Orientation property.

Formatting and Customization

Even with the simplest declarative authoring, the TabStrip control renders with acceptable default styles. However, it is also possible to customize the appearance of the TabStrip in various ways. The controls in a TabStrip have three basic states.

Default

The default state is used when the tab is not selected and the mouse is not hovering over the control. The TabDefaultStyle is used to define the Cascading Style Sheets (CSS) styles for this state.
Selected

When a Tab control is selected, the TabSelectedStyle is applied to the selected item.
Hover

When a mouse hovers over a control, the TabHoverStyle is applied.

The next section explains how to customize the appearance of TabStrip controls, based on their state, using CSS.

CSS

CSS formatting properties provide a convenient mechanism to customize the appearance of the TabStrip. Defining properties on the TabStrip elements is all that is required to customize the appearance; no scripting is required to update the page rendering. The following examples illustrate how various properties can be used to customize the appearance of the TabStrip control.

This TabStrip renders each Tab as a solid block.

<ie:TabStrip id="ts1" runat="server"
   TabDefaultStyle="background-color:#000000;font-family:verdana;
   font-weight:bold;font-size:8pt;color:#ffffff;width:79;height:21;
   text-align:center"
   TabHoverStyle="background-color:#777777"
   TabSelectedStyle="background-color:#ffffff;color:#000000">
<ie:Tab Text="Home"/>
<ie:Tab Text="About us"/>
<ie:Tab Text="Products"/>
<ie:Tab Text="Support"/>
<ie:Tab Text="Contact us"/>
</ie:TabStrip>

This TabStrip renders each Tab with a flat profiled style.

<ie:TabStrip id="ts1" runat="server"
   TabDefaultStyle="color:#aaaaaa;background-color:#EEEEEE;
   border-color:#AAAAAA;border-width:1px;border-style:Solid;
   font-weight:bold;font-family:Verdana;font-size:11px;height:21;
   width:79;text-align:center;"
   TabHoverStyle="color:blue"
   TabSelectedStyle="color:#000000;background-color:#FFFFFF;
   border-bottom:none"
   SepDefaultStyle="background-color:#FFFFFF;border-color:#AAAAAA;
   border-width:1px;border-style:solid;border-top:none;border-left:none;
   border-right:none">
<ie:Tab Text="Home"/>
<ie:Tab Text="About us"/>
<ie:Tab Text="Products"/>
<ie:Tab Text="Support"/>
<ie:Tab Text="Contact us"/>
</ie:TabStrip>

Note that the SepDefaultStyle property is also used in the second example, providing a profiled appearance on each Tab control.

As shown in the previous examples, several styles can be defined together. It is also possibly to modify styles dynamically, as shown by the following:

<script language="C#" runat="server">
void Page_Load(Object sender, EventArgs e)
{
     myTab.BorderColor=Color.Black;
     myTab.DefaultStyle.Add("background","white");
}
</script>
<body>
    <form id="debug" runat="server" autopostback="true">
        <ie:TabStrip id="myTab" runat="server">
            <ie:Tab Text="Home"/>
            <ie:Tab Text="About us"/>
            <ie:Tab Text="Products"/>
            <ie:Tab Text="Contact us"/>
        </ie:TabStrip>
    </form>
</body>

Graphics

Instead of using CSS, you can also use graphics to customize the appearance of the TabStrip. The following example shows a TabStrip that uses image properties to customize the UI. This provides a more versatile alternative to using CSS styles.

<ie:TabStrip id="ts1" runat="server"
    SepDefaultImageUrl="pipe.gif"
    SepSelectedImageUrl="pipe_clear.gif">
    
    <ie:TabSeparator DefaultImageUrl="cap_left.gif" SelectedImageUrl="cap_left_sel.gif"/>
    <ie:Tab selectedimageurl="home_hot.gif" defaultimageurl="home_cold.gif"/>
    <ie:TabSeparator/>
    <ie:Tab selectedimageurl="books_hot.gif" defaultimageurl="books_cold.gif"/>
    <ie:TabSeparator/>
    <ie:Tab selectedimageurl="magazines_hot.gif" defaultimageurl="magazines_cold.gif"/>
    <ie:TabSeparator/>
    <ie:Tab selectedimageurl="online_hot.gif" defaultimageurl="online_cold.gif"/>
    <ie:TabSeparator DefaultImageUrl="cap_right.gif" SelectedImageUrl="cap_sel.gif"/>
</ie:TabStrip>

TabStrip Samples

This section provides some useful TabStrip examples, illustrating how to use the TabStrip both with and without the MultiPage.

Using TabStrip with MultiPage

The TabStrip is often used in combination with the MultiPage. In the following example, the UI elements that present navigation options are authored with the TabStrip, whereas, the content to which each tab navigates is defined with the MultiPage elements.

TabStrip and MultiPage Controls

The following code snippet shows the most important markup used to create this UI; most of the style and layout attributes have been removed for clarity.

<%@ Import Namespace="Microsoft.Web.UI.WebControls" %>
<%@ Register TagPrefix="mytab" 
Namespace="Microsoft.Web.UI.WebControls" 
Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<head>
</head>
<body>
<form runat="server">
<table>
<tr>
<td>
<mytab:TabStrip id="tsVert" runat="server" TargetID="mpVert" Orientation="Vertical">
    <mytab:Tab Text="Inbox"/>
    <mytab:TabSeparator/>
    <mytab:Tab Text="Compose"/>
    <mytab:TabSeparator />
    <mytab:Tab Text="Addresses"/>
    <mytab:TabSeparator DefaultStyle="height:100%"/>
</mytab:TabStrip>
</td>
<td valign=top><mytab:MultiPage id="mpVert" runat="server">
    <mytab:PageView>
        <table>
        <tr>
        <td>&nbsp;</td>
        <td>From</td>
        <td>Subject</td>
        <td>Date</td>
    </tr>
.
. (other table rows go here)
.
        </table>

    </mytab:PageView>
    <mytab:PageView>
        <table>
        <tr>
        <td>To:</td>
        <td><asp:textbox runat="server"/></td>
        </tr>
.
. (other table rows go here)
.
        </table>

        <asp:TextBox runat="server" rows=5 columns=30 textmode=multiline/>
    </mytab:PageView>
    <mytab:PageView>
        <table>
        <tr>
        <td>&nbsp;</td>
        <td>Name</td>
        <td>E-mail</td>
    </tr>
        <tr>
        <td><asp:checkbox runat="server" /></td>
        <td>me</td><td>me@treyresearch.com</td>
    </tr>
.
. (other table rows go here)
.
        </table>

    </mytab:PageView>
</mytab:MultiPage>
</td>
</tr>
</table>

</form>
</body>

Like the other WebControls, the TabStrip UI can easily be customized by setting attributes. As in the following graphic, a slightly different UI is presented by setting Orientation to vertical on the TabStrip element.

TabStrip with Vertical Orientation

Using TabStrip without MultiPage

The following examples illustrates how a TabStrip can be used without using a MultiPage. In this example, the SelectedIndex property is used to control the navigation to other Web pages.

<%@ Import
 Namespace="Microsoft.Web.UI.WebControls" %>
<%@ Register TagPrefix="mytab" 
Namespace="Microsoft.Web.UI.WebControls" 
Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<script runat="server">
 protected void myTabStrip_OnSelectedIndexChange(object sender, EventArgs e) 
 {
  switch (myTabStrip.SelectedIndex)
  {
  case 0:
   Page.Navigate("/myweb/about.htm");
   break;
  case 1:
   Page.Navigate("/myweb/intranet/resources/default.aspx");
   break;
  }
 }
</script>
<myns:TabStrip runat="server"
 ID="myTabStrip"
 Orientation="Horizontal"
 AutoPostback="true">
<myns:Tab Text="About Us" ID="tabAbout"/>
<myns:TabSeparator/>
<myns:Tab Text="Resources" ID="tabResources"/>
</myns:TabStrip>

Share via

About the TabStrip WebControl

Authoring with the TabStrip Control

TabStrip Objects

Client Behavior

ASP.NET Objects

Features

Formatting and Customization

CSS

Graphics

TabStrip Samples

Using TabStrip with MultiPage

Using TabStrip without MultiPage

Additional resources

Share via

About the TabStrip WebControl

Authoring with the TabStrip Control

TabStrip Objects

Client Behavior

ASP.NET Objects

Features

Formatting and Customization

CSS

Graphics

TabStrip Samples

Using TabStrip with MultiPage

Using TabStrip without MultiPage

Related Topics

Additional resources