Simulating a Vertical TabStrip Control - Part Two by Lisa Welch

Quick solution: Simulating a TabStrip Control - Part Two

• intermediate
• uses C# ASP.NET
• builds and implements a basic web user control, a vertical tabstrip, which raises an event

This article will build on the TabStrip Control of Part One. Just as in the previous article a collection of buttons will simulate the TabStrip. How to handle the tab body content depends upon the scenario.

For variety's sake this article will demonstrate a vertical tab strip and use only one web form as the tab body content.

Continuing to use Microsoft's Northwind Database as an example basis. Let each tab represent one region: Eastern, Western, Northern and Southern. When the active tab changes fill the tab body content with the Territories of that region.

Color scheme

The color scheme is still critical to giving the tab the correct look and feel. Following the same guidelines as before place a dark border around all inactive tab buttons. The active tab button's border, which touches the tab body content, should be the same color as the tab content's background. Likewise the tab body's border, which connects to the tab button, should have the same color as its own background. The following style sheet works for a Vertical tab on the left side of tab body content.

Style Sheet: SSVTabStrip.CSS

Building the UserControl : SimVertTabStrip

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": Eastern,Western,Northern and Southern.

• In the Design mode of the new control place the needed number of buttons on the page within an HTML TABLE. The table should have one column and one row per button. Drag the SSVtab style sheet over the control.
• Once again give each button a simple name that follows a distinct pattern: btnTab0, btnTab1,btnTab2 and btnTab3. This will allow you to easily determine which one was clicked.

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 SimVertTabStrip.asx.cs and expose an enumerated type to make the indexes more understandable.
  
  
  public enum VTabIndx:int
  {
  Eastern=0,
  Western=1,
  Northern=2,
  Southern=3
  }
  
  
  
  
• In the previous example we exposed a method to set one of the tab's appearance as the current tab. This control will grow a little sophistication by exposing a current tab property. The method which changes the tab's appearance will become private and automatically called when the current tab property changes. Just as in the last article the tab's appearance is altered by changing the button's "CSS" property.
  //expose the current tab index
  //when this value is changed
  //alter the tabs appearance as well
  private int curtab;
  public int CurTab
  {
      get
     {
         return curtab;
     }
      set
     {
         curtab = value;
         SetCurrentTabtoHOT(curtab);
     }
  }
  protected 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 = "ColdVertTabBtn";
     }
     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 = "HotVertTabBtn";
  }
  
  
  
  
• 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 change the current tab property and raise an event. The consumer web form can detect the tab click event and then re-populate the web form controls with values related to that tab.
  protected void OnTabClick(object sender,EventArgs e)
  {
  //tell who was clicked by taking the index from the name
  // tabIndex property
  Button CurBtn = (Button) sender;
  string sTabName = CurBtn.ID;
  string sIndx = sTabName.Substring(6);
  int iTabIndx = int.Parse(sIndx);
  //Reset the CurTab property
  CurTab = iTabIndx;
  Click(this,e); //raise the event
  }
  
  
  
• Now to define the Click event for the tab control:
  First expose the event followed by its required "On" method.
  public event EventHandler Click;
  protected void OnClick(EventArgs e)
  {
      if (Click != null)
      {
          Click(this, e);
      }
  }
  
  
  
• Return to SimVertTabStrip.ascx 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

NNow to create the tab body content pages which will consume the SimVTabStrip control.

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

• Switch to HTML mode. Add a table to the webform which contains two columns. Set the tables cellpadding and cellspacing to 0. Make sure the first column's valign property is set to "top". Give the second column 80% of the entire tables width and set its class to TabBodyContent.

• Add HTML space - nbsp to each cell to make it easier to drag controls into the table. Return to Design mode. Drag the SimVTabStrip user control into the first cell.

• Using the property pages name the control SVTabRegions. Notice that even though your control raises an event , events for user controls do not appear within the property pages.
  
  
• Switch back to design mode and within the HTML declaration for the user control enter a method,SVTabRegions_Click, for the OnClick event.

• Next go to the code behind for the form, NWRegions.aspx.cs Insert a protected declaration of the control to allow references throughout the code.
  protected SimVertTabStrip SVTabRegions;
  
  
  
• Within the page load event set the tab initially to "Eastern" using the enumerated type.
  private void Page_Load(object sender, System.EventArgs e)
  {
  if (!IsPostBack)
  {
  //first time around set the tab to the first one
  //Eastern
  SVTabRegions.CurTab = (int) SimVertTabStrip.VTabIndx.Eastern;
  }
  }
  
• Finally create the method which will be called when the tabstrip's click event is fired. Give it the same name as you declared for the controls "OnClick" event in the HTML.
  protected void SVTabRegions_Click (object sender,EventArgs e)
  {
  //get current tab from the control
  int iCurTab = SVTabRegions.CurTab;
  
  Label1.Text = "CURRENT TAB INDEX " + iCurTab.ToString();
  
  //Regions begin with 1
  int iRegionCode = iCurTab + 1;
  Label2.Text = "REGION CODE " + iRegionCode.ToString();
  
  //rebind all data controls according to this tab
  }
  

  In summary this is a simple control which is easily maintained. It raises an event allowing the consuming webform to determine what it should do. The webform can always retrieve the current tab using the exposed property. Changing the current tab will automatically reset the tab buttons CSS style to appear "hot".

  
  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