Click here to Skip to main content
15,393,863 members
Articles / Web Development / ASP.NET
Posted 28 Apr 2004


53 bookmarked

Web Tabstrip Control for Frames

Rate me:
Please Sign up or sign in to vote.
3.87/5 (21 votes)
13 Jun 20044 min read
Building a custom ASP.NET Tabstrip Control


There are plenty of tabstrip controls available for download that use panels to decide which content to display. But what if your existing web application's / web site's content is stored on separate pages, or you have to use frames? This article will take you through the basics of creating a custom tabstrip control that can be loaded in one frame, and change content in another frame.

Using the code

Using the code is quite simple. The library contains a Tab control, as well as a TabList Control. You add Tabs to the TabList. To demonstrate, very quickly,

myTab.DisplayName = " Project Home ";<br>
myTab.DisplayPosition = 0;<br>
myTab.URL = "projectHome.aspx?pjID=" + ourID;<br>

The TabList Control has a number of properties that you can set, namely:

Settings Properties

  1. UseFrames (default is true - provided so that I can incorporate panel tabs later)
  2. TargetFrame (the name of the frame to load the content pages in)
  3. SelectedTab (the index of the selected tab)
  4. TabsAcross (the number of horizontal tabs before creating a new line)

Appearance Properties

  1. LeftImage (the image to appear on the left hand side of the tab)
  2. RightImage (the image to appear on the right hand side of the tab)
  3. TopImage (the image to appear on the top of the tab)
  4. BottomImage (the image to appear below the tab)
  5. LeftImageOver (the image to appear on the left hand side of the tab when the tab is selected)
  6. RightImageOver (the image to appear on the right hand side of the tab when the tab is selected)
  7. TopImageOver (the image to appear on the top of the tab when the tab is selected)
  8. BottomImageOver (the image to appear below the tab when the tab is selected)
  9. CssClass (the style sheet element for the unselected tabs)
  10. CssClassOver (the style sheet element for the selected tab)

How it all works

The Tablist Control has a private member named m_items which is an arraylist of Tab. This is where the collection of tabs are stored. To order the tabs (by the tab display position) I had to have a way to compare the tabs to one another. For that I created a TabCompare class, inheriting from IComparer.

This allowed me to compare one tabs display position to another, and return a value representing whether the first tab should appear before or after the second tab. By inheriting from the IComparer interface, I could now also make use of the arraylist method Sort, which, as it now had a way to compare one tab to another, could automatically order my tabs for me, simply by calling m_items.Sort(new TabCompare()), which I wrapped in a private method called order.

I also wanted my control to be able to have fancy images around it (you know, so it looks like a tab), so my control renders 3 html rows per tab line (the top row for the top image, the middle row for the side images and tab, and the bottom row for the bottom images). I wrote a method that returns a string for each of the rows.

The ChangeTab method is the event handler for the linkbuttons (which is what i used to display the tab link and handle click events), and simply changes the selected tab index, and uses JavaScript to change the target page.

State Management

Because my TabList control inherits from Control, I can override the LoadViewState and SaveViewState methods to maintain the state of the control. The only value I needed to maintain was the selected tab index, m_intSelTab.

//Saves the View State
protected override object SaveViewState()
 object[] allStates = new object[2];
 allStates[0] = base.SaveViewState();
 allStates[1] = m_intSelTab;
 return allStates;
//Loads View State Info 'Load Saved State Values
protected override void LoadViewState(object savedState)
 if (savedState != null)
  object[] myState = (object[])savedState;
  if (myState[0] != null)
  if (myState[1] != null)
   m_intSelTab = Convert.ToInt32(myState[1]);

In my CreateChildControls method (which renders the control to the screen) I simply set the start position (index of first tab to display - i.e. 0), and work out how many tabs to display in the first row. I also set a counter to keep track of which tabs I've displayed. I then order the tabs by calling the order method I created before.

I then loop through all my tabs and write them to the screen, using my counters to determine when to draw a new row, and when to finish off the table. I used linkbuttons as the hyperlinks, so that I could control their events server side.

  protected override void CreateChildControls() 
   int intColRows = (m_items.Count / m_intTabsAcross) + 1;
   int intPositionRendered = 0;
   int intStartPosition = 0;



   this.Controls.Add(new LiteralControl(
"<table cellpadding=\"2\" cellspacing=\"1\" border=\"0\" ID="Table1">"));

   for (int i=1; i <= intColRows; i++) 
    if ((m_strTopImage.Length > 0) || (m_strSelTopImage.Length > 0))
     this.Controls.Add(new LiteralControl(TopRow(intStartPosition, 
         ref intPositionRendered, m_intSelTab)));
    MiddleRow(intStartPosition, ref intPositionRendered, m_intSelTab);
    if ((m_strBottomImage.Length > 0) || (m_strSelBottomImage.Length > 0)) 
     this.Controls.Add(new LiteralControl(BottomRow(intStartPosition, 
        ref intPositionRendered, m_intSelTab)));
    intStartPosition = intPositionRendered;

   this.Controls.Add(new LiteralControl("</table>"));


And that's it. I hope you find both the control (I included the dll for use), and this article useful.


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Doug Wilson
Web Developer
South Africa South Africa
Doug is an Applications Integrator for an online gaming company. He has been programming for 9 years, and has been working with the .NET framework since the beginning of 2003, in both VB.NET & C#.

Comments and Discussions

GeneralNot Implimented Pin
deepaks316-Nov-06 3:30
Memberdeepaks316-Nov-06 3:30 
QuestionStylesheet?? Pin
mo7amad1-Oct-06 4:42
Membermo7amad1-Oct-06 4:42 
AnswerRe: Stylesheet?? Pin
Doug Wilson2-Oct-06 7:25
MemberDoug Wilson2-Oct-06 7:25 
QuestionHow to add panels Pin
jijog5-Aug-06 4:43
Memberjijog5-Aug-06 4:43 
Generalexamples in VB.NET Pin
sunojiik13-May-06 21:19
Membersunojiik13-May-06 21:19 
QuestionTabstrip without Frames. Pin
mrizwansiddiqui26-Jan-06 5:56
Membermrizwansiddiqui26-Jan-06 5:56 
Generalthird party controls Pin
hitesh kala23-Oct-05 20:01
Memberhitesh kala23-Oct-05 20:01 
Questionlocation.replace bug ? Pin
mikedepetris14-Apr-05 9:28
Membermikedepetris14-Apr-05 9:28 
GeneralTabstrip Pin
onewisehobbit28-Mar-05 5:43
Memberonewisehobbit28-Mar-05 5:43 
GeneralRe: Tabstrip Pin
Doug Wilson28-Mar-05 23:41
MemberDoug Wilson28-Mar-05 23:41 
GeneralRe: Tabstrip Pin
onewisehobbit30-Mar-05 2:12
Memberonewisehobbit30-Mar-05 2:12 
GeneralRe: Tabstrip Pin
onewisehobbit30-Mar-05 2:42
Memberonewisehobbit30-Mar-05 2:42 
GeneralGetting Microsoft JScript runtime error Pin
rajshekarreddy1-Mar-05 22:08
Memberrajshekarreddy1-Mar-05 22:08 
GeneralParse Error in .aspx and ascx Pin
mj61625-Jan-05 16:30
Membermj61625-Jan-05 16:30 
GeneralRe: Parse Error in .aspx and ascx Pin
Doug Wilson25-Jan-05 19:29
MemberDoug Wilson25-Jan-05 19:29 
Generalgive me code to use tabStrip control Pin
Member 145772125-Oct-04 2:30
MemberMember 145772125-Oct-04 2:30 
GeneralRe: give me code to use tabStrip control Pin
Doug Wilson26-Oct-04 5:25
MemberDoug Wilson26-Oct-04 5:25 
GeneralNot Implemented Pin
Larri4-Aug-04 22:01
MemberLarri4-Aug-04 22:01 
GeneralRe: Not Implemented Pin
Jehosephat8-Nov-04 6:42
MemberJehosephat8-Nov-04 6:42 
GeneralRe: Not Implemented Pin
Doug Wilson16-Nov-04 22:39
MemberDoug Wilson16-Nov-04 22:39 
GeneralRe: Not Implemented Pin
Jehosephat17-Nov-04 6:25
MemberJehosephat17-Nov-04 6:25 
GeneralRe: Not Implemented Pin
sh171731-Jan-05 6:04
Membersh171731-Jan-05 6:04 
GeneralHELP! Pin
Member 12723262-Aug-04 19:36
MemberMember 12723262-Aug-04 19:36 
GeneralRe: HELP! Pin
Doug Wilson2-Aug-04 19:51
MemberDoug Wilson2-Aug-04 19:51 
GeneralRe: HELP! Pin
Member 12723263-Aug-04 0:31
MemberMember 12723263-Aug-04 0:31 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.