Creating a ASP.NET Rounded Panel
These days using a Rounded Panel on your web site is almost a given. Here is an example to creating a Rounded Panel that inherits from System.Web.Ui.Panel, in a WebControls class library.
First thing I did was fire up Jasc Paintshop Pro and created some rounded rectangles (with a 4px radius) … then I cut the corners off, and pasted all of them into a new image (16×4) [its a PNG with a transparent background]
The Image I used for the corners (4corners-c.png) [the image go in your web project]
The C# code [this goes in your class library]
using System.Web.UI; using System.Web.UI.WebControls; namespace MyWebControls { [ToolboxData( "<{0}:RoundedPanel runat=\"server\"></{0}:RoundedPanel>")] public class RoundedPanel : Panel { public override void RenderBeginTag(HtmlTextWriter writer) { writer.WriteBeginTag("table"); writer.WriteAttribute("class", "RoundedPanel"); writer.WriteAttribute("cellpadding", "0"); writer.WriteAttribute("cellspacing", "0"); writer.Write(Html32TextWriter.TagRightChar); writer.WriteBeginTag("tr"); writer.Write(Html32TextWriter.TagRightChar); writer.WriteBeginTag("td"); writer.WriteAttribute("class", "tl"); writer.Write(Html32TextWriter.TagRightChar); writer.Write("<div style='width:1px;height:1px;overflow:hidden;'></div>"); writer.WriteEndTag("td"); writer.WriteBeginTag("td"); writer.WriteAttribute("class", "top"); writer.Write(Html32TextWriter.TagRightChar); writer.Write("<div style='width:1px;height:1px;overflow:hidden;'></div>"); writer.WriteEndTag("td"); writer.WriteBeginTag("td"); writer.WriteAttribute("class", "tr"); writer.Write(Html32TextWriter.TagRightChar); writer.Write("<div style='width:1px;height:1px;overflow:hidden;'></div>"); writer.WriteEndTag("td"); writer.WriteEndTag("tr"); } public override void RenderEndTag(HtmlTextWriter writer) { writer.WriteBeginTag("tr"); writer.Write(Html32TextWriter.TagRightChar); writer.WriteBeginTag("td"); writer.WriteAttribute("class", "bl"); writer.Write(Html32TextWriter.TagRightChar); writer.Write("<div style='width:1px;height:1px;overflow:hidden;'></div>"); writer.WriteEndTag("td"); writer.WriteBeginTag("td"); writer.WriteAttribute("class", "bottom"); writer.Write(Html32TextWriter.TagRightChar); writer.Write("<div style='width:1px;height:1px;overflow:hidden;'></div>"); writer.WriteEndTag("td"); writer.WriteBeginTag("td"); writer.WriteAttribute("class", "br"); writer.Write(Html32TextWriter.TagRightChar); writer.Write("<div style='width:1px;height:1px;overflow:hidden;'></div>"); writer.WriteEndTag("td"); writer.WriteEndTag("tr"); writer.WriteEndTag("table"); } protected override void RenderContents(HtmlTextWriter writer) { writer.WriteBeginTag("tr"); writer.Write(Html32TextWriter.TagRightChar); writer.WriteBeginTag("td"); writer.WriteAttribute("class", "left"); writer.Write(Html32TextWriter.TagRightChar); writer.Write("<div style='width:1px;height:1px;overflow:hidden;'></div>"); writer.WriteEndTag("td"); writer.WriteBeginTag("td"); writer.WriteAttribute("class", "content"); writer.Write(Html32TextWriter.TagRightChar); base.RenderContents(writer); writer.WriteEndTag("td"); writer.WriteBeginTag("td"); writer.WriteAttribute("class", "right"); writer.Write(Html32TextWriter.TagRightChar); writer.Write("<div style='width:1px;height:1px;overflow:hidden;'></div>"); writer.WriteEndTag("td"); writer.WriteEndTag("tr"); } } }
I chose to inherit from Panel, that way I didn’t have to deal with the complexities of creating a Container Control (a control than can contain other controls), also you can treat my panel as a regular Panel, so your code behind pretty much can stay the same.
You can see that I am using some CSS classes for the styling, you could extend those string literals as public properties if you didn’t want the class names to be hard coded.
The CSS [this goes in your web project]
.RoundedPanel { } .RoundedPanel .tl { background-image: url("images/4corners-c.png"); background-repeat: no-repeat; width:4px; height:4px; } .RoundedPanel .top { border-top: 1px solid #c0c0c0; height:3px; } .RoundedPanel .tr { background-position: -3px 0px; background-image: url("images/4corners-c.png"); background-repeat: no-repeat; width:4px; height:4px; } .RoundedPanel .left { border-left: 1px solid #c0c0c0; width:4px; } .RoundedPanel .content { } .RoundedPanel .right { border-right: 1px solid #c0c0c0; width:4px; } .RoundedPanel .bl { background-position: -8px 0px; background-image: url("images/4corners-c.png"); background-repeat: no-repeat; width:4px; height:4px; } .RoundedPanel .bottom { border-bottom: 1px solid #c0c0c0; height:3px; } .RoundedPanel .br { background-position: -11px 0px; background-image: url("images/4corners-c.png"); background-repeat: no-repeat; width:4px; height:4px; }
Also … if you wanted to you could embed your images and CSS in your WebControl library … but I will leave that to another post. (hint search for Page.ClientScript.GetWebResourceUrl())
Write a comment
You need to login to post comments!