Hoang Ha's Blog

When I approached writing my simple tab control, I had this article in the back of my mind, CSS and Round Corners: Build Accessible Menu Tabs: a nice article on how to make a tab control using CSS tricks and images. What I wanted to do was combine the ideas in this CSS article with the ASP.NET Menu and MultiView controls to create a relatively nice looking tab control. This is what I came up with: First, I dropped a Menu control onto my page. The Menu control was going to render my "tabs" and also be the controller of the MultiView control. I set the menu to be orientated horizontally. Likewise, I gave each MenuItem an ImageURL that pointed to my tab image. Note, you will have to implement your own tab image as you see fit. Below is my Menu control specification:

<asp:Menu
        ID="Menu1"
        Width="168px"
        runat="server"
        Orientation="Horizontal"
        StaticEnableDefaultPopOutImage="False"
        OnMenuItemClick="Menu1_MenuItemClick">
    <Items>
        <asp:MenuItem ImageUrl="~/selectedtab.GIF" 
                      Text=" " Value="0"></asp:MenuItem>
        <asp:MenuItem ImageUrl="~/unselectedtab.GIF" 
                      Text=" " Value="1"></asp:MenuItem>
        <asp:MenuItem ImageUrl="~/unselectedtab.GIF" 
                      Text=" " Value="2"></asp:MenuItem>
    </Items>
</asp:Menu>

Next, I put my MultiView control onto my page. Note, each View control contains a table with a tag that will hold all the contents for the active tab. Think of the element as your placeholder for the tab contents. I put this element in a CSS class called "TabArea". This class puts a border around the contents. Refer to the stylesheet in the sample download.

<asp:MultiView 
    ID="MultiView1"
    runat="server"
    ActiveViewIndex="0"  >
   <asp:View ID="Tab1" runat="server"  >
        <table width="600" height="400" cellpadding=0 cellspacing=0>
            <tr valign="top">
                <td class="TabArea" style="width: 600px">
                    <br />
                    <br />
                    TAB VIEW 1
                    INSERT YOUR CONENT IN HERE
                    CHANGE SELECTED IMAGE URL AS NECESSARY
                </td>
            </tr>
        </table>
     </asp:View>
    <asp:View ID="Tab2" runat="server">
        <table width="600px" height="400px" cellpadding=0 cellspacing=0>
            <tr valign="top">
                <td class="TabArea" style="width: 600px">
                <br />
                <br />
                    TAB VIEW 2
                    INSERT YOUR CONENT IN HERE
                    CHANGE SELECTED IMAGE URL AS NECESSARY
                </td>
            </tr>
        </table>
    </asp:View>
    <asp:View ID="Tab3" runat="server">
        <table width="600px" height="400px" cellpadding=0 cellspacing=0>
            <tr valign="top">
                <td class="TabArea" style="width: 600px">
                <br />
                <br />
                  TAB VIEW 3
                  INSERT YOUR CONENT IN HERE
                  CHANGE SELECTED IMAGE URL AS NECESSARY
                </td>
            </tr>
        </table>
    </asp:View>
</asp:MultiView>

Last, I wired the MenuItemClick event of the Menu control to the method below:

Protected Sub Menu1_MenuItemClick(ByVal sender As Object, _
          ByVal e As MenuEventArgs) Handles Menu1.MenuItemClick
    MultiView1.ActiveViewIndex = Int32.Parse(e.Item.Value)
    Dim i As Integer
    'Make the selected menu item reflect the correct imageurl

    For i = 0 To Menu1.Items.Count - 1
        If i = e.Item.Value Then
            Menu1.Items(i).ImageUrl = "selectedtab.gif"
        Else
            Menu1.Items(i).ImageUrl = "unselectedtab.gif"
        End If
    Next
End Sub

In this event, you can see that I set the pertinent view to be visible based upon which tab (really a MenuItem) was clicked. Likewise, I set the correct ImageUrl for the selected MenuItem. This is basically swapping in and out images for the tabs. This should be the image of what you want a selected tab to look like. In my example, I have two images, a selected tab and an unselected tab.