Click here to Skip to main content
16,015,296 members
Articles / Web Development / ASP.NET
Article

Create an ASP.NET Rounded Panel WebControl

Rate me:
Please Sign up or sign in to vote.
4.70/5 (14 votes)
25 Sep 2007GPL33 min read 130.9K   2.6K   67   32
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();

C#
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)


Written By
Architect Swivel
United States United States
I’m a very hands-on, full-stack, architect and engineer with management and leadership experience. I have operated primarily in the .NET environment, though I embrace Open Source wholeheartedly. I absolutely love writing code, developing standards and patterns, working with talented engineers, and mentoring individuals; I thrive in non-managerial environments. I’m passionate about the technology, science, mathematics, and engineering behind the craft of computer science. Even when I’m not working my full-time job, I’m still honing my technical skills, whether it’s building rockets on my 3D printer, designing software for personal use, writing white papers, or contributing to my many open-source projects.

Comments and Discussions

 
GeneralWhy the label cannot show inside the rounded panel Pin
Yee Cheing Seah24-Jun-09 18:12
Yee Cheing Seah24-Jun-09 18:12 
GeneralRe: Why the label cannot show inside the rounded panel Pin
Yee Cheing Seah25-Jun-09 18:15
Yee Cheing Seah25-Jun-09 18:15 
GeneralRe: Why the label cannot show inside the rounded panel Pin
wasanaeng4-Aug-09 8:15
wasanaeng4-Aug-09 8:15 
GeneralRe: Why the label cannot show inside the rounded panel Pin
Member 415218429-Jun-11 0:18
Member 415218429-Jun-11 0:18 
GeneralFix Rendering Child controls bug Pin
dreammaker_tr27-Nov-07 3:42
dreammaker_tr27-Nov-07 3:42 
GeneralNested Controls not working for me Pin
rlax3115-Nov-07 2:04
rlax3115-Nov-07 2:04 
GeneralRe: Nested Controls not working for me Pin
Steven Szelei11-May-10 20:07
Steven Szelei11-May-10 20:07 
QuestionBorder Width Pin
Ben Millspaugh23-Oct-07 7:03
Ben Millspaugh23-Oct-07 7:03 
AnswerRe: Border Width Pin
DreamInHex23-Oct-07 8:08
DreamInHex23-Oct-07 8:08 
QuestionData Binding Problem Pin
Ben Millspaugh23-Oct-07 6:49
Ben Millspaugh23-Oct-07 6:49 
GeneralRe: Data Binding Problem Pin
stixoffire14-Dec-07 2:04
stixoffire14-Dec-07 2:04 
GeneralProblems with Updatepanels Pin
Wayne Gibson15-Oct-07 23:06
Wayne Gibson15-Oct-07 23:06 
GeneralRe: Problems with Updatepanels Pin
stixoffire14-Dec-07 2:00
stixoffire14-Dec-07 2:00 
GeneralReally nice idea, but... Pin
intooitive25-Sep-07 3:02
intooitive25-Sep-07 3:02 
GeneralRe: Really nice idea, but... Pin
DreamInHex25-Sep-07 4:58
DreamInHex25-Sep-07 4:58 
GeneralRe: Really nice idea, but... Pin
intooitive25-Sep-07 8:08
intooitive25-Sep-07 8:08 
GeneralRe: Really nice idea, but... Pin
DreamInHex25-Sep-07 9:27
DreamInHex25-Sep-07 9:27 
GeneralQuestion on Foregroundcolor Pin
DaProgramma25-Sep-07 2:29
DaProgramma25-Sep-07 2:29 
Hello,
I can set the foregroundcolor in the Designer, and the text will be shown correctly in the designer. But when I run the control, the text is black. Is that normal?
Greetz... Paule
GeneralRe: Question on Foregroundcolor Pin
DreamInHex25-Sep-07 5:00
DreamInHex25-Sep-07 5:00 
GeneralDoes not render properly Pin
DaProgramma24-Sep-07 10:40
DaProgramma24-Sep-07 10:40 
GeneralRe: Does not render properly Pin
DreamInHex24-Sep-07 11:09
DreamInHex24-Sep-07 11:09 
GeneralRe: Does not render properly Pin
DaProgramma24-Sep-07 19:44
DaProgramma24-Sep-07 19:44 
GeneralRe: Does not render properly Pin
DreamInHex25-Sep-07 2:14
DreamInHex25-Sep-07 2:14 
GeneralRe: Does not render properly Pin
DaProgramma25-Sep-07 2:26
DaProgramma25-Sep-07 2:26 
GeneralPanel clash with DropDownList Pin
MohammadHafizullah23-Sep-07 15:21
MohammadHafizullah23-Sep-07 15:21 

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

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