How to Create a Custom Control

This article shows how to create a custom control dll which can be used in any Windows Forms projects. In our example we extend the features of an existing TextBox control of the .Net framework library.

This article shows how to create a custom control dll which can be used in other Windows Forms projects. In our example we extend the features of an existing TextBox control of the .Net framework library. However you can apply the same technique to extend any control which is available in the Windows Forms control library.

1) Start a new Windows Forms Control Library project; see:

new-project-window.jpg

2) Remove UserControl1.cs which has been created by default and add a new class; see:

add-new-item.jpg

solution-explorer.jpg

3) Add the following namespaces to the new class (in our case its ExtdTextBox.cs) and inherit the framework's TextBox control class:

using
System.Windows.Forms;
using
System.ComponentModel;
using
System.Drawing;
class
ExtdTextBox:TextBox
{

}

4) Let as add a feature for watermark text to our custom TextBox Control and let us give an option to the user to select the WaterMark Text color, WaterMark Text, WaterMark Font at design time which will be available as a Control property window of Visual Studio as shown below:

extended-properties.jpg

To display properties in Visual Studio Tool bar GUI we need to add the Browsable(true) attribute to the Properties to be displayed at design time as shown below:

using System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Text;
using
System.Windows.Forms;
using
System.ComponentModel;
using
System.Drawing;

namespace ControlsDemo
{
    public class ExtdTextBox : TextBox
    {

        #region
Member Variables
        Color waterMarkColor = Color.Gray;
        Color forecolor;
        Font font;
        Font waterMarkFont;
        string waterMarkText = "Your Text Here";

        #endregion
        #region
Constructor
        public ExtdTextBox()
        {
            base.Text = this.waterMarkText;
            this.forecolor = this.ForeColor;
            this.ForeColor = this.waterMarkColor;
           this.font = this.Font;
            //event handlers
            this.TextChanged += new EventHandler(ExtdTextBox_TextChanged);
            this.KeyPress += new KeyPressEventHandler(ExtdTextBox_KeyPress);
            this.LostFocus += new EventHandler(ExtdTextBox_TextChanged);
        }

        #endregion
        #region
Event Handler Methods
        void ExtdTextBox_TextChanged(object sender, EventArgs e)
        {
            if (!string.IsNullOrEmpty(this.Text))
            {
                this.ForeColor = this.forecolor;
                this.Font = this.font;
            }
            else
            {
                this.TextChanged -= new EventHandler(ExtdTextBox_TextChanged);
                base.Text = this.waterMarkText;
                this.TextChanged += new EventHandler(ExtdTextBox_TextChanged);
                this.ForeColor = this.waterMarkColor;
                this.Font = this.waterMarkFont;
            }
        }|
       void ExtdTextBox_KeyPress(object sender, KeyPressEventArgs e)
        {
            string str = base.Text.Replace(this.waterMarkText, "");
            this.TextChanged -= new EventHandler(ExtdTextBox_TextChanged);
            this.Text = str;
            this.TextChanged += new EventHandler(ExtdTextBox_TextChanged);
        }

        #endregion
        #region
User Defined Properties
        /// <summary>
        /// Property to set/get Watermark color at design/runtime
        /// </summary>
        [Browsable(true)]
        [Category("Extended Properties")]
       [Description("sets Watermark color")]
        [DisplayName("WaterMark Color")]
        public Color WaterMarkColor
        {
            get
            {
                return this.waterMarkColor;
            }
            set
            {
                this.waterMarkColor = value;
                base.OnTextChanged(new EventArgs());
            }
        }
        [Browsable(true)]
        [Category("Extended Properties")]
        [Description("sets TextBox text")]
        [DisplayName("Text")]
        /// <summary>
        /// Property to get Text at runtime(hides base Text property)
        /// </summary>
        public new string Text
        {
            get
            {
                //required for validation for Text property
                return base.Text.Replace(this.waterMarkText, string.Empty);
            }
            set
            {
                base.Text = value;
            }
        }
        [Browsable(true)]
        [Category("Extended Properties")]
        [Description("sets WaterMark font")]
        [DisplayName("WaterMark Font")]
        /// <summary>
        /// Property to get Text at runtime(hides base Text property) 
      /// </summary>
        public Font WaterMarkFont
        {
            get
            {
                //required for validation for Text property
                return this.waterMarkFont;
            }
            set
            {
                this.waterMarkFont = value;
                this.OnTextChanged(new EventArgs());
            }
        }
        /// <summary>
        ///  Property to set/get Watermark text at design/runtime
        /// </summary>
        [Browsable(true)]
        [Category("Extended Properties")]
        [Description("sets Watermark Text")]
        [DisplayName("WaterMark Text")]
        public string WaterMarkText
        {
            get
            {
                return this.waterMarkText;
            }
            set
            {
                this.waterMarkText = value;
                base.OnTextChanged(new EventArgs());
            }
        }

        #endregion

    }
}


The other optional attributes declaration names are self-explanatory.

5) Build the project and refer to the dll in another Windows Forms project.

Right-click on the ToolBar Window and click ChooseItems:

choose-item-in-tool-bar.jpg

choose-toolbox-item.jpg

Click on browse and select control dll:

Add-reference.jpg

Extd-textbox-select.jpg

Click ok:

Extd-textbox-ok.jpg

Drag and drop the control onto the form:

Form1.jpg