Simulating a Horizontal TabStrip Control - Part One by Lisa Welch

It didn't take me long to find frustration with the available combination of TabStrip and Multi-page controls. Since Multi-page control has the additional drawback of loading all controls for all pages whether needed or not. I decided to search for a simpler solution.

The simplest approach is let a collection of buttons play the part of a tab strip. If these buttons are placed in a web user control - the buttons can easily be implemented in each "Tab" body page.

How to handle the tab body content depends upon the application's need. If each tab will need to contain different sets of controls then its best to create a distinct web form for each "Tab" body. If each tab contains essentially the same set of controls and merely different values then one web form acting as the tab body content would be best.

This article will demonstrate a Horizontal tab strip with four webforms. The example app will need four distinct tab bodies. Imagine working with the Microsoft sample Northwind database. Let the first tab contain general information about an employee. The second tab information about orders tied to that employee. The third holds the regions represented by that employee and the fourth will hold comments.

It's all in the color scheme

Only the correct set of colors will prevent this control from looking like a mere strip of buttons. Careful consideration to the borders will make these buttons seem to be attached to the body content. The right backgrounds will make one button appear as the current tab and the remaining tabs appear available.

The following style sheet allows the current button's bottom border to match the body content background color. The button's remaining 3 borders are darker. Likewise the body content has a top border to match its background. The remaining 3 borders of the body are also dark. This gives the illusion that the current button is attached to the body.

Style Sheet: SSTabStrip.CSS

Building the UserControl : SimTabStrip

Next create a user control to contain the collection of tab buttons. This control will be implemented on pages of tab body content. This example will have four "tabs": General, Orders, Territories and Notes.

• Create a user control within any web project by clicking "File", "Add New Item" and Choose "Web User Control". Name the control SimTabStrip.
  
• Drag the Style Sheet over the new control design page.
  
• In the Design mode of the new control place the needed number of buttons on the page within an HTML TABLE. For a more uniform appearance set the width of each TD column to an equal percentage of that TABLE.

• Give each Tab button a simple name which includes its index. The index can be stripped out of the id later to determine which one was clicked. The name can also be easily built to set the correct tab button as the current tab. In this example the base name for all tab buttons will be "btnTabXX" . All indexes will begin with zero.

Adding functionality to the appearance

Now that the control is beginning to look like a tab strip follow these remaining steps to ensure it behaves like one.

• Open the code behind of the User Control - SimTabStrip.ascx.cs.
  
  
• Expose an enumerated integer which will assign an understandable name to each tab.
  public enum TabIndx:int
  {
  General=0,
  Orders=1,
  Territories=2,
  Notes=3
  }
  
  
  
• Expose a public method. This method will set the style of the current tab as the "HOT" tab. Use the given index to build the name of the current tab button. The FindControl method will retrieve the button by name. Set the button's CSS property to the "Hot" button style.
  public void SetCurrentTabtoHOT(int iTabIndx)
  {
  //To use the control collection
  //include: using System.Web.UI;
  
  //first set all other buttons to COLD
  foreach(Control oCtl in this.Controls) //loop Text Boxes
  {
  try
  {
  Button CurCtl = (Button)oCtl;
  CurCtl.CssClass = "ColdHorizTabBtn";
  }
  catch{}
  }
  //To use the String builder class
  //include: using System.Text;
  //Known that buttons name is btnTabXX
  StringBuilder sbTabName = new StringBuilder("btnTab");
  sbTabName.Append(iTabIndx.ToString());
  Button CurBtn = (Button) this.FindControl(sbTabName.ToString());
  CurBtn.CssClass = "HotHorizTabBtn";
  }
  
  
  
  
• Create an internal array of HREFs. Assign one HREF to the array for each button. This will be used in a Click method to either Response.Redirect or Server.Transfer to the sibling page.
  protected string[] sHREFs =
  {"NWEmployeeGeneral.aspx",
  "NWEmployeeOrders.aspx",
  "NWEmployeeTerritories.aspx",
  "NWEmployeeNotes.aspx" } ;
  
  
  
• Create an internal method OnTabClick. This generic method will be assigned to the onClick event for each tab button. Within this method take the name of the control from the "Sender" parameter. From the name of the sender control retrieve the tab index substring. Use this index to redirect the page to the correct HREF.
  protected void OnTabClick(object sender,EventArgs e)
  {
  //tell who was clicked by taking the index from the name
  //known the name is btnTabXX
  Button CurBtn = (Button) sender;
  string sTabName = CurBtn.ID;
  string sIndx = sTabName.Substring(6);
  int iTabIndx = int.Parse( sIndx);
  
  //Send it on its way to the sibling form
  Server.Transfer(sHREFs[iTabIndx]);
  }
  

• Return to the aspx for the user control and using the Properties pages for each button assign the button's Click event to the protected OnTabClick method just created.

Using the User Control

Now to create the tab body content pages which will utilize the SimTabStrip control.

• Add a webform to the project. Drag the Style Sheet over it.

• Placement works best by using two HTML tables. Let the first table contain the SimTabStrip control and the second table contain the tab body content.

  Its simplest to begin by building the table within HTML mode. Add only one row and one column with a space " " as a placeholder. Then switch to Design mode and drag the user control from the Solution Explorer on the right into the table cell.

  Switch back to HTML mode. Add the second table. Set the class of the second table to use style sheet class "TabBodyContent"
  
  

Example of the HTML for webform associated with Tab0 - NWEmployees General Information.

• In the code behind of this page insert a protected declaration of the control to allow references throughout the code.
  protected SimTabStrip SimTabStrip1;
  
  
  
  
• Within the page load event set the correct tab button to "HOT" by calling the method exposed by the control.
  private void Page_Load(object sender, System.EventArgs e)
  {
  SimTabStrip1.SetCurrentTabtoHOT((int)SimTabStrip.TabIndx.General);
  }
  
  
  
  
• Repeat these steps creating a web form for each tab button. The names of each web form are those mentioned in the array of HREFs: "NWEmployeeGeneral.aspx", "NWEmployeeOrders.aspx", "NWEmployeeTeritories.aspx", "NWEmployeeNotes.aspx"

  The simulation of changing tabs occurs smoothly. Now each form is ready for the proper content.

  Maintenance of this control only requires upkeep of the array of HREFs and enumerated index of tabs. Also new tab buttons must follow the existing naming convention.

  
  About the author: Lisa D. Welch
  Lisa has been completing applications for nine years. She acquired her MCSD in 1996. She is currently under contract completing internet and intranet development. Contact her at ldwelch@dcr.net