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.
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
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.
- 9/25/07 - Removed a stray paragraph tag that was in for testing
- 9/22/07 - Added closing
div tag to output rendering