Ugly looking custom controls in designer?

Published 01 November 05 10:15 PM

On this new project, we are very carefully designing the whole solution. I will be posting what we are doing.

Now about current topic, we have decided to introduce a layer between ASP .NET server controls. We will define our own custom controls and will use them, even for simple text boxes. These custom controls will inherit from the original respective ASP .NET server control. Example follows...

public class Testing : System.Web.UI.WebControls.TextBox

This will help us in easily modifying the UI based upon the future change requests. Like right now we are not sure, but we may need to provide tool tips for all input screens in different languages. For the time being we have added a new property called ControlID. In future, we will be reading the tooltip from cache for a particular control. That cache will have a dependcy on an XML file.

Now if you drag/drop the control called Testing on a webform, it will automatically render itself in form of a text box. So UI does not get dirty.

Now what if you are generating a pure custom control which will render HTML? How to manage design time support? For this you need to write designer support class. This class inherits from System.Web.UI.Design.ControlDesigner. Here is a generic designer support class which can be used for almost all component.

using System;
using System.IO;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.Design;

namespace Testing
/// <summary>
/// Summary description for Designer.
/// </summary>
public class Designer : System.Web.UI.Design.ControlDesigner
public override string GetDesignTimeHtml()
WebCustomControl1 test = (WebCustomControl1) Component;

StringWriter sw = new StringWriter();
HtmlTextWriter tw = new HtmlTextWriter(sw);


return sw.ToString();

To associate a custom control with this designer, add following attribute on the top of the custom control.

Designer("Testing.Designer, Testing")

The method called GetDesignTimeHtml is called every time a property of the control is updated. Hence your designer will always produce the look which it will have after rendering.

Happy Designing <smile>



<doughhhhh type="Simpson">me got technical after long time...</doughhhhh>

Anonymous comments are disabled