Custom Controls - Adding Properties(Asp .NET)

You can extend the functionality of an existing control by using it a base class of a custom control.  The example below extends the textbox web control by adding 3 new properties.

Step 1:  Create a class for your custom control.

Our new class will extend  the standard textbox control.

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

Step 2:  Adding properties.

There are few things to keep in mind when adding new properties:

• Since we are dealing with a web control we will need to store our value in the view state.
• We should always check that the value has been initialized(it isn't null)
• Optionally you we can specify if and how the property should show up in the property window

String Property

        /// <summary>
        /// String Property
        /// Browsable - Specifies if the property/event should show in the property window.
        /// Description - Description of the property.
        /// Category - If the properties window is categorized, the category this property will show in.
        /// DefaultValue - The property value will be bolded in the property window if property is not set to default.
        /// </summary>
        [Browsable(true)]
        [Description("Text Property"), Category("Custom"), DefaultValue("")] 
        public virtual String CustomStringProp
        {
            get
            {
                //value will be stored in the view state you 
                //should always check to see if it's null
                object o = ViewState["CustomStringProp"];
                if (o != null)
                    return (String)o;
                return string.Empty; // Default value
            }
            set
            {
                String oldValue = CustomStringProp;
                //if the value changed update the view state
                if (value != oldValue)
                {
                    ViewState["CustomStringProp"] = value;
                }
            }
        }

Boolean Property

        /// <summary>
        /// Boolean Property
        /// </summary>
        [Browsable(true)]
        [Description("Boolean Property"), Category("Custom"), DefaultValue(false)] 
        public virtual bool CustomBooleanProp
        {
            get
            {
                object o = ViewState["CustomBooleanProp"];
                if (o != null)
                    return (bool)o;
                return false; // Default value
            }
            set
            {
                bool oldValue = CustomBooleanProp;
                if (value != oldValue)
                {
                    ViewState["CustomBooleanProp"] = value;
                }
            }
        }

Enum Property

        /// <summary>
        /// Enum Options
        /// </summary>
        public enum EnumPropOptions { Option1, Option2, Option3 };

        /// <summary>
        /// Enum Property
        /// </summary>
        [Browsable(true)]
        [Description("Enum Property"), Category("Custom"), DefaultValue(EnumPropOptions.Option1)] 
        public virtual EnumPropOptions CustomEnumProp
        {
            get
            {
                object o = ViewState["CustomEnumProp"];
                if (o != null)
                    return (EnumPropOptions)o;
                return EnumPropOptions.Option1; // Default value
            }
            set
            {
                EnumPropOptions oldValue = CustomEnumProp;
                if (value != oldValue)
                {
                    ViewState["CustomEnumProp"] = value;
                }
            }
        }

Step 3: Adding your control to the tool box.

That's all the code we need to write.  To add the your new custom control to the tool box follow these steps:

• Build your project.
• Right click on the toolbox and select "Choose Items..."

• Click Browse on the .NET Framework Components tab.

•  Navigate to your project folder's bin directory and select the .dll file.
• You should now see your control in the toolbox.

 

 

Step 4: Using your control.

You should be able to add your new control to a web page by dragging it from the toolbox.  Your custom properties should be visible in the property window.  If you make any changes to your control they might not be visible until you restart visual studio.

Complete Source:

CustomControls.zip 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel;

namespace CustomControls.Controls
{
    public class CustomTextBox : System.Web.UI.WebControls.TextBox
    {
        /// <summary>
        /// String Property
        /// Browsable - Specifies if the property/event should show in the property window.
        /// Description - Description of the property.
        /// Category - If the properties window is categorized, the category this property will show in.
        /// DefaultValue - The property value will be bolded in the property window if property is not set to default.
        /// </summary>
        [Browsable(true)]
        [Description("Text Property"), Category("Custom"), DefaultValue("")] 
        public virtual String CustomStringProp
        {
            get
            {
                //value will be stored in the view state you 
                //should always check to see if it's null
                object o = ViewState["CustomStringProp"];
                if (o != null)
                    return (String)o;
                return string.Empty; // Default value
            }
            set
            {
                String oldValue = CustomStringProp;
                //if the value changed update the view state
                if (value != oldValue)
                {
                    ViewState["CustomStringProp"] = value;
                }
            }
        }

        /// <summary>
        /// Boolean Property
        /// </summary>
        [Browsable(true)]
        [Description("Boolean Property"), Category("Custom"), DefaultValue(false)] 
        public virtual bool CustomBooleanProp
        {
            get
            {
                object o = ViewState["CustomBooleanProp"];
                if (o != null)
                    return (bool)o;
                return false; // Default value
            }
            set
            {
                bool oldValue = CustomBooleanProp;
                if (value != oldValue)
                {
                    ViewState["CustomBooleanProp"] = value;
                }
            }
        }

        /// <summary>
        /// Enum Options
        /// </summary>
        public enum EnumPropOptions { Option1, Option2, Option3 };

        /// <summary>
        /// Enum Property
        /// </summary>
        [Browsable(true)]
        [Description("Enum Property"), Category("Custom"), DefaultValue(EnumPropOptions.Option1)] 
        public virtual EnumPropOptions CustomEnumProp
        {
            get
            {
                object o = ViewState["CustomEnumProp"];
                if (o != null)
                    return (EnumPropOptions)o;
                return EnumPropOptions.Option1; // Default value
            }
            set
            {
                EnumPropOptions oldValue = CustomEnumProp;
                if (value != oldValue)
                {
                    ViewState["CustomEnumProp"] = value;
                }
            }
        }
    }
}