Click here to Skip to main content
Click here to Skip to main content

Create an ASP.NET Rounded Panel WebControl

, 25 Sep 2007
Rate this:
Please Sign up or sign in to vote.
A custom WebControl that emits CSS to create a stylable ASP.NET panel with rounded corners.
Screenshot - RoundedPanel.jpg

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

License

This article, along with any associated source code and files, is licensed under The GNU General Public License (GPLv3)

About the Author

UsualDosage
Architect
United States United States
I have been an ASP.NET/C# Programmer/Software Architect for about 10 years, specializing in web architecture, user interface, and user experience. I formerly wrote business applications for mortgage banking front-ends in C++ before switching to the .NET Framework many years ago, and I've never looked back. I'm an evangelist of HTML5 and web standards, and spend the majority of my time working on front end design, performance and scale.

My primary website is located at http://www.usualdosage.com

Comments and Discussions

 
GeneralWhy the label cannot show inside the rounded panel PinmemberYee Cheing Seah24-Jun-09 18:12 
GeneralRe: Why the label cannot show inside the rounded panel PinmemberYee Cheing Seah25-Jun-09 18:15 
GeneralRe: Why the label cannot show inside the rounded panel Pinmemberwasanaeng4-Aug-09 8:15 
GeneralRe: Why the label cannot show inside the rounded panel PinmemberMember 415218429-Jun-11 0:18 
GeneralFix Rendering Child controls bug Pinmemberdreammaker_tr27-Nov-07 3:42 
GeneralNested Controls not working for me Pinmemberrlax3115-Nov-07 2:04 
GeneralRe: Nested Controls not working for me PinmemberSteven Szelei11-May-10 20:07 
QuestionBorder Width PinmemberBen Millspaugh23-Oct-07 7:03 
AnswerRe: Border Width PinmemberUsualDosage23-Oct-07 8:08 
QuestionData Binding Problem PinmemberBen Millspaugh23-Oct-07 6:49 
GeneralRe: Data Binding Problem Pinmemberstixoffire14-Dec-07 2:04 
GeneralProblems with Updatepanels PinmemberWayne Gibson15-Oct-07 23:06 
GeneralRe: Problems with Updatepanels Pinmemberstixoffire14-Dec-07 2:00 
GeneralReally nice idea, but... Pinmemberintooitive25-Sep-07 3:02 
GeneralRe: Really nice idea, but... PinmemberUsualDosage25-Sep-07 4:58 
GeneralRe: Really nice idea, but... Pinmemberintooitive25-Sep-07 8:08 
GeneralRe: Really nice idea, but... PinmemberUsualDosage25-Sep-07 9:27 
GeneralQuestion on Foregroundcolor PinmemberDaProgramma25-Sep-07 2:29 
GeneralRe: Question on Foregroundcolor PinmemberUsualDosage25-Sep-07 5:00 
GeneralDoes not render properly PinmemberDaProgramma24-Sep-07 10:40 
GeneralRe: Does not render properly PinmemberUsualDosage24-Sep-07 11:09 
GeneralRe: Does not render properly PinmemberDaProgramma24-Sep-07 19:44 
GeneralRe: Does not render properly PinmemberUsualDosage25-Sep-07 2:14 
GeneralRe: Does not render properly PinmemberDaProgramma25-Sep-07 2:26 
GeneralPanel clash with DropDownList PinmemberMohammadHafizullah23-Sep-07 15:21 
GeneralRe: Panel clash with DropDownList PinmemberUsualDosage24-Sep-07 1:49 
GeneralRe: Panel clash with DropDownList Pinmemberstixoffire14-Dec-07 1:43 
GeneralTiny issue PinmemberMikeRetzler21-Sep-07 3:30 
GeneralRe: Tiny issue PinmemberUsualDosage21-Sep-07 4:45 
Questionthanx, really cool, but... Pinmemberbarbod_blue19-Sep-07 1:28 
AnswerRe: thanx, really cool, but... PinmemberUsualDosage19-Sep-07 9:05 
GeneralRe: thanx, really cool, but... Pinmemberbarbod_blue19-Sep-07 19:13 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140721.1 | Last Updated 25 Sep 2007
Article Copyright 2007 by UsualDosage
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid