Click here to Skip to main content
Click here to Skip to main content

Web Tabstrip Control for Frames

, 13 Jun 2004
Rate this:
Please Sign up or sign in to vote.
Building a custom ASP.NET Tabstrip Control

Introduction

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 ";

myTab.DisplayPosition = 0;

myTab.URL = "projectHome.aspx?pjID=" + ourID;

TabList2.AddTab(myTab);

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) 
    {
     base.LoadViewState(myState[0]);
    }
    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;

   order();

   this.Controls.Clear();

   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.

License

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

Share

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 Pinmemberdeepaks316-Nov-06 4:30 
QuestionStylesheet?? Pinmembermo7amad1-Oct-06 5:42 
AnswerRe: Stylesheet?? PinmemberDoug Wilson2-Oct-06 8:25 
QuestionHow to add panels Pinmemberjijog5-Aug-06 5:43 
Generalexamples in VB.NET Pinmembersunojiik13-May-06 22:19 
QuestionTabstrip without Frames. PinmemberRiz8126-Jan-06 6:56 
Generalthird party controls Pinmemberhitesh kala23-Oct-05 21:01 
Questionlocation.replace bug ? Pinmembermikedepetris14-Apr-05 10:28 
GeneralTabstrip Pinmemberonewisehobbit28-Mar-05 6:43 
GeneralRe: Tabstrip PinmemberDoug Wilson29-Mar-05 0:41 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.141223.1 | Last Updated 14 Jun 2004
Article Copyright 2004 by Doug Wilson
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid