Custom controls

 A custom Web control is a control that inherits
from a WebServer control.

 A custom Web control can be compiled into a
separate .dll file that can be shared among
applications.

 It allows to define a better design-time
experience for the consumers of the control.

 This includes Toolbox and designer functionality

There are two common approaches to creating a
custom Web server control.

 The first approach is to create a Web server control that
inherits directly from WebControl Class. The Web-
Control class provides a base set of functionality.
This leaves a lot of work to develop the control.

 The second approach is to inherit from an existing Web
control that already provides the core features of your
control.
This can give you a jump start and allow you to focus
on what makes your control different.
This is the more common scenario.

 If the custom Web server control is targeted to multiple
Web sites, you should place the new custom Web
server control class into a class library project to create
a .dll file that can be shared.

 If the custom Web server control is only meant for the
current Web site, you can add the custom Web server
control’s class file to the Web site.

 For example, suppose you wish to create a custom version of the
TextBox control. This custom version will include text that labels
the given TextBox (such as “User Name” or “Password”).
 You create this control by first inheriting from TextBox.

public class LabeledTextBox : TextBox
{
public string PromptText { get; set; }
public int PromptWidth { get; set; }
protected override void Render(HtmlTextWriter writer)
{
writer.Write( @"<span style="”display:inline-
block;width:{0}px”">{1} </span>",
PromptWidth, PromptText);

base.Render(writer);
}
}

 This approach is desirable when there is no
control that currently provides default
behavior similar to the control you wish to
implement.
 When inheriting from the WebControl class,
you must override the Render method to
provide the desired output.
 For example, suppose you wish to create a
custom control that allows a user to display a
logo and an associated company name for
the logo. For this, you might create two
properties: LogoUrl and CompanyName.

public class LogoControl : WebControl {
public LogoControl(){}
public string LogoUrl {
get { return _logoUrl; }
set { _logoUrl = value; } }
private string _logoUrl;
public string CompanyName {
get { return _companyName; }
set { _companyName = value; } }
private string _companyName;
protected override void Render(HtmlTextWriter writer) {
writer.WriteFullBeginTag(“div”);
writer.Write(@"<img src=""{0}"" /><br />", LogoUrl);
writer.Write(CompanyName + "<br />");
writer.WriteEndTag(“div”);
}
}

 The primary requirement to allow a custom Web
control to be added to the Toolbox is that the Web
control be placed into a separate .dll file.

 You can set a reference to this .dll file to add the
.dll to the Bin folder of your project.

 In this case, you can right-click the Toolbox and
select Choose Items. You can then browse to the
given user control’s .dll to add the controls that
are contained in the file to the Toolbox.

 Notice that the controls are defined in their own
grouping at the top of the Toolbox.

 When you drag a control to the page, the control
must be registered.

 This markup is shown at the top of the page.

 The bottom of the page shows the control
defined declaratively (including custom
properties).

 You can add your own custom icon through an
attribute called ToolboxBitmap of the System.Drawing
namespace.
 This attribute specifies a bitmap that is 16 × 16 pixels in
size.
[ToolboxBitmap(typeof(LabeledTextBox),
“MyUserControls.LabeledTextBox.bmp”)]

 A default property is accessed without actually
specifying a property.
 You set the default property for your control through
the DefaultProperty attribute class in the
System.ComponentModel namespace.
 Apply this attribute at the class level.
 Simply pass the name of one of your properties to this
attribute.

[DefaultProperty(“PromptText”)]

 You can further change the way your custom
server control behaves when it is dropped onto
the Web page by setting the ToolboxDataAttribute
in your control class.

 This attribute is used to change the markup that
gets generated by Visual Studio.

 A common scenario is to set default values for
properties on the control inside the generated
markup.

 You might wish to alter the default rendering of the control
in design mode.

 To do so, you start by adding a reference to the
System.Design.dll assembly in your user control.

 You then create a new class in your user control that
inherits from the ControlDesigner class. This class will
override the GetDesignTimeHtml method of the
ControlDesigner class to render separate design-time HTML
that can be set based on the property settings of the control
instance.

 You then apply the Designer attribute to your control.

 To this, you pass an instance of your ControlDesigner class.

[Designer(“MyUserControls.LabeledTextBoxDesigner, MyUserControls”)]
public class LabeledTextBoxDesigner : ControlDesigner
{
private LabeledTextBox _labeledTextBoxControl;
public override string GetDesignTimeHtml()
{
if (_labeledTextBoxControl.PromptText.Trim().Length == 0)
return "<div style='color: Gray'>[Define PromptText]</div>";
else
return base.GetDesignTimeHtml();
}
public override void Initialize(IComponent component)
{
_labeledTextBoxControl = (LabeledTextBox)component;
base.Initialize(component);
return;
}}

 A composite control is a custom Web control that
contains other controls.

 This sounds like a user control, but the composite
control doesn’t provide a designer screen for creating
the control, nor an .ascx file that lets you drag and
drop controls on it at design time.

 Instead, you create a custom control that inherits
from the CompositeControl class. You then add
constituent controls to this control.

 The composite control then handles events raised by
its child controls.

 To create a composite control, you start by creating a
class that inherits from the CompositeControl class and
overrides the CreateChildControls method.

 The CreateChildControls method contains the code to
instantiate the child controls and set their properties.

 If you want to be able to assign styles to the composite
control, you should create an instance of the Panel class
to provide a container that can have attributes assigned
to it.

 In this case, you add it to the Controls collection of your
composite control, and then add your controls to the
Panel control.

 A templated custom Web control provides separation
of control data from its presentation.

 This means that a templated control does not provide
a default UI.

 For example, if you know that you need to display
product data, but you don’t know how the developer
who intends to use your control wants to format the
product data, you could create a templated control
that allows the page designer to supply the format for
the product data as a template.

Custom controls

More Related Content

What's hot (20)

Viewers also liked (19)

Similar to Custom controls (20)

More from aspnet123 (12)

Recently uploaded (20)

Custom controls