Custom ASP.NET Container Control

Question

I've been trying to create a custom control that works exactly like the Panel control except surrounded by a few divs and such to create a rounded box look. I haven't been able to find a decent example of how to do this.

I need to be able to place text and controls inside the control and access it directly without referencing the panel (exactly the way the Panel control works).

Does anyone have any examples of this?

Answer 1

There is two ways to do this. One is to implement INamingContainer on your control, and it takes a lot of effort.

The other way is to inherit from Panel, and override the RenderBeginTag and RenderEndTag methods to add your custom markup. This is easy.

public class RoundedCornersPanel : System.Web.UI.WebControls.Panel
{
    public override RenderBeginTag (HtmlTextWriter writer)
    {
        writer.Write("Your rounded corner opening markup");
        base.RenderBeginTag(writer);
    }

    public override RenderEndTag (HtmlTextWriter writer)
    {
        base.RenderEndTag(writer);
        writer.Write("Your rounded corner closing markup");                     
    }
}

Answer 2

Create a class that inherits System.Web.UI.Control, and overrride the Render ( HtmlTextWriter ) method. In this method, render surrounding start tags, then render the children(RenderChildren), then render end tags.

protected override void Render ( HtmlTextWriter output )
{
  output.Write ( "<div>" );
  RenderChildren ( output );
  output.Write ( "</div>" );
}

Rounded corners is typically achieved using CSS and corner images for the top left, top right, bottom left and bottom right corners. It could be done using 4 nested divs, acting as layers, each of them having one corner image as their background image.

Answer 3

public class myCustomPanel : Panel
{
    public override void RenderBeginTag(HtmlTextWriter writer)
    {
        writer.AddAttribute(HtmlTextWriterAttribute.Class, "top_left_corner");
        writer.RenderBeginTag(HtmlTextWriterTag.Div);
            base.RenderBeginTag(writer);
    }

    public override void RenderEndTag(HtmlTextWriter writer)
    {
            base.RenderEndTag(writer);
        writer.RenderEndTag();
    }

}

Answer 4

Just another thing you can use, there's a rounded corner extender in the ASP.Net ajax toolkit.

I know it's not exactly what you asked for, but you don't have to write any custom code.

Hope that helps!