Introduction
There are perhaps hundreds of ideas on the internet regarding how to make those sleek rounded "Web 2.0" panels (as depicted above) that can be seen on millions of websites these days. Undoubtedly, there are many server controls that do the same thing. I've seen some good, and most bad. This was my attempt at creating a sleek solution to what certainly should be a simple problem.
Background
Because there is no one "right" answer to making rounded corners, I opted for what I deemed to be the simplest and highest performance solution. From a scalability standpoint, it didn't make sense to have to do it with images. While I'm a fan of JavaScript, I wanted to plan for the times when the client has JavaScript turned off. Sure, it's rare, but it happens. Finally, I wanted to encapsulate all of this functionality into a drag-n-drop server control that would require minimal configuration in Visual Studio and, of course, be cross-browser compliant.
Because I'm no CSS genius, I looked around on the web to find a few solutions that did what I wanted to do. I really just wanted pure CSS, and, as I said above, no images or JavaScript. I found exactly what I wanted on Stu Nicholls' website, CSSPlay. He had an elegant CSS solution that seemed like it would work well inside of a web control. And, since he didn't mind anyone using his code, I thought this would be the best approach. Thanks, Stu!
Inside the Code
The control itself contains only five properties and one overridden method. I allow the user to configure the Panel Border Color, Panel Text Color, Panel Inner Background Color, Panel Outer Background Color and the text inside of the panel. Sure, you can nest controls in the panel (it inherits from the ASP Panel control), but sometimes you don't want to have to configure a label control. Setting the text makes it simpler.
The method simply overrides the RenderContents method to output the CSS I needed nested in style tags, and the divs and nested tags that comprise the panel. I changed the CSS to reference elements by its unique Client ID, so it becomes feasible to have several panels on a page that have varying styles (as in the screenshot above). All the rest of the design functionality is inherited from the Panel control, including visibility.
On a final note, I made sure to render any child controls between paragraph tags. It makes the final panel rendering nice and neat. Yes, you can also use output.WriteBeginTag("p"); if you so choose. I like output.Write();
if (HasControls())
{
output.Write("<p>");
this.RenderChildren(output);
output.Write("</p>");
}
Using the Code
I included the output DLL (Web2Controls.dll) in the downloadable source as well as the code file. You can simply add it to your toolbox, drag the control on your page, and start adding nested controls. All of the properties are located under the "Rounded Panel" category, and have defaults set. The panel also accounts for differing height and width units. You can use percentages or pixels with either. Because it inherits its designer attributes from the Panel control, you won't get a graphic representation of the panel (color and style wise) until you run it. It will simply display as any Panel would, and you can drag or drop controls on it.
I tested this in IE6, IE7 and Firefox, and didn't have any problems. I don't have Opera or Safari installed locally, so if any of you test with those platforms, I'd be interested to hear your results.
Happy UI'ing!
History
- 9/25/07 - Removed a stray paragraph tag that was in for testing
- 9/22/07 - Added closing
div tag to output rendering
