Adding the Necessary Designer Code:
To display the control in the design view, we need to create a separate Design viewer class and specify the designer HTML needed.
The Designer class should be derived from
System.Web.UI.ControlDesigner and the
GetDesignTimeHtml function should be overridden.
To do this, add a new class MyCompositeControlDesigner into the project and add the following code in the MyCompositeControl.CS file.
[Designer("MySampleControls.MyCompositeControlDesigner,MySampleControls")]
public class MyCompositeControl : System.Web.UI.WebControls.WebControl, INamingContainer
{
}
The Designer class level attribute makes sure that the Control MyCompositeControl has its designer view code in the class MyCompositeControlDesigner under the namespace MySampleControls. The actual designer code has to be written as follows. The following code goes into the overridden GetDesignTimeHtml function which is a member of MyCompositeControlDesigner.
public override string GetDesignTimeHtml()
{
StringWriter sw = new StringWriter();
HtmlTextWriter hw = new HtmlTextWriter(sw);
TextBox text1 = new TextBox();
TextBox text2 = new TextBox();
DropDownList ddlist1 = new DropDownList();
Button cmdResult = new Button();
Label lblResult = new Label();
text1.Height = Unit.Pixel(25);
text1.Width = Unit.Pixel(70);
text1.Text = "0";
text2.Height = Unit.Pixel(25);
text2.Width = Unit.Pixel(70);
text2.Text = "0";
ddlist1.Height = Unit.Pixel(25);
ddlist1.Width = Unit.Pixel(40);
ddlist1.Items.Add("+");
ddlist1.Items.Add("-");
ddlist1.Items.Add("*");
ddlist1.Items.Add("/");
cmdResult.Height = Unit.Pixel(25);
cmdResult.Width = Unit.Pixel(50);
cmdResult.Text = "Result";
lblResult.Height= Unit.Pixel(25);
lblResult.Width = Unit.Pixel(200);
lblResult.Text = "Result Will be displayed here";
LiteralControl lc = new LiteralControl("<br><br>");
text1.RenderControl(hw);
ddlist1.RenderControl(hw);
text2.RenderControl(hw);
cmdResult.RenderControl(hw);
lc.RenderControl(hw);
lblResult.RenderControl(hw);
return sw.ToString();
}
The GetDesignTimeHtml function now renders the controls in Visual Studio .Net as they will look when the application is running.
The project can be built now. This will create a dll as MySampleControls.dll. The control MyCompositeControl under this MySampleControls.dll can be used by referring the dll in the project.
Using the Composite Control:
The composite control created above can now be used in any web application by referring to the MySampleControls.dll. The following lines explain how to use this composite control.
- Create a new Web Application.
- Open an existing webform and right click on the Toolbox -->Components.
- Click Add/Remove and browse for the MySampleControls.dll.
- Clicking Ok will add the control "MyCompositeControl" on the toolbox.
- Drag 'n' drop the MyCompositeControl into the web form.
- Now this will run like a full fledged simple calculator page.
Attachments
Project Files Composite Controls Sample