Extending ASP.NET 2.0 Menu Control To Have Tabs With Rounded Corners

Introduction

Ever get tired of the square tabs on the .Net Menu Control? I did. This article combines several cool works done by others on the web to extend the .Net 2.0 Menu control to produce rounded tabs using no images for the corners.

Technologies explored in this article include:

1. Using CSS styles to produce rounded corners without the need for corner images. See More Nifty Corners for the technique used.
2. Inheriting the Menu control and overloading it's Render method to produce CSS friendly html elements in which to apply the rounded corner technique above. I borrowed a lot of the code from ASP.NET 2.0 CSS Friendly Control Adapters 1.0 but instead of an Adapter I transformed it into a custom web control.
3. Packaging this customized Menu control, along with it's CSS styles and javascripts into a separate dll that can be shared between projects. These CSS styles and javascripts are included into the dll as Web Resources.

Approach Used To Create The Rounded Corners on the Menu's Tabs

Nothing makes a web site look polished like rounded corners. This includes the menu tabs. I've seen many techniques for creating rounded corners but none as elegant as More Nifty Corners . This article shows you how to produce rounded edges w/o the use of corner images.

After reading this article, I was fired up to apply the techniques to menu tabs, however the aspx menu control uses tables which are not compatible with this technique. So I needed a method of changing these table tags to something that could be styled more easily. After, changing the tags, there was no need to change the main javascript file or the CSS file the technique uses. However, I did want to package these scripts into the control's dll to make it easier to use.

Creating a CSS friendly Menu Control is a matter of inheriting the ASP Menu control and overloading it's "Render" method to generate CSS friendly code. Fortunately, I came across: ASP.NET 2.0 CSS Friendly Control Adapters 1.0 that saved me from creating the code from scratch. This provided code for creating an Adapter for the Menu control that generated CSS Friendly html output. Adapters are cool but there seemed to be more configuration required than if you just had a custom control that did the same thing. Fortunately the way an adapter works is pretty similar to how a custom control works; so I was able to copy the code into an overloaded Render method of my Custom Control that was derived from the Menu Control. Only a few minor tweaks were required to complete the transformation from adapter to custom web control. I was also able to use all of the client side javascript w/o any changes or any need for additional client side code.

I made a several changes to the CSS style sheet. Mostly deleting the tags, which weren't being used to make it a little easier to follow.

My goal was to make this rounded tab menu easy to use, without a lot of configuration. It seemed the way to do this was to put as many of the scripts the control uses within the control itself. I elected to put the server side code, the CSS and javascript fils to create the rounded corners and the javascript file for the menu into the control's dll. This dll can be easily referenced from a web project. When the control is used these scripts are automatically included on the page. In addition, the web project will need to include one CSS file to format the menu (colors of the tabs ect) as well as two small images that are used to indicate which menu item's have child menu items.

Download Files

The download includes two projects. One sample web project "MenuRoundedTabsWebSite" which uses the custom control and one project containing the custom menu control. The web project was created using Visual Web Developer 2005 and the custom menu control was created using Visual C# 2005 Express Edition. To open up the web site in Visual Web Developer go to the file menu , Open Web Site then navigate to the "MenuRoundedTabsWebSite" folder.

The Code

I'll go over the main features of the code, download the code if you want to see all of the code:

Including script files as Web Resources

The script files, which are included as web resources in the control have their build action set to "embedded resource" (see figure 1).

Figure 1- Files included as web resources have their build action set to "Embedded Resource"

Also for these web resources to be available the following lines of code needs to be added to AssemblyInfo.cs

Next "Assembly Info.cs" file needs to have the following added to it's end(Figure 2) :

[assembly: System.Web.UI.WebResource("CustomControls.Resources.Menu.css", "text/css")]

[assembly: System.Web.UI.WebResource("CustomControls.Resources.layout.css", "text/css")]

[assembly: System.Web.UI.WebResource("CustomControls.Resources.niftyCorners.css", "text/css")]

[assembly: System.Web.UI.WebResource("CustomControls.Resources.layout.js", "text/javascript", PerformSubstitution = true)]

[assembly: System.Web.UI.WebResource("CustomControls.Resources.MenuAdapter.js", "text/javascript", PerformSubstitution = true)]
[assembly: System.Web.UI.WebResource("CustomControls.Resources.nifty.js", "text/javascript", PerformSubstitution = true)]

Figure 2 - Coded to be added to Assembly Info.cs

These web resources are used in the control's overload "Init()" method (See figure 3)

Figure 3 shows the overloaded Init() method and the private RegisterScripts() method it calls.

/// <summary>
/// Call when the control is first created
/// </summary>
/// <param name="e"></param>

protected override void OnInit(EventArgs e)

{

base.OnInit(e);

//check to make sure we don't add the scripts twice; if more than one control on the page

if (ViewState["MenuRegisterScripts"] == null)

{

RegisterScripts();

}

ViewState["MenuRegisterScripts"] = true;

}

/// <summary>

/// Load the scripts from the WebResources

/// </summary>

private void RegisterScripts()

{

string csslink=null;

LiteralControl include = null;

// add main javascript file required to round the corners to the header

HtmlGenericControl script = new HtmlGenericControl("script");

script.Attributes["type"] = "text/javascript";

script.Attributes["src"] = Page.ClientScript.GetWebResourceUrl(this.GetType(), "CustomControls.Resources.nifty.js");

this.Page.Header.Controls.Add(script);