Click here to Skip to main content
Click here to Skip to main content

How To Build Multi-control Components when Inheriting from an Existing Control (Intro and TextBox Example)

, 28 Oct 2008
Rate this:
Please Sign up or sign in to vote.
This article will get you started in building your own multi-control components without using the UserControl class.

Introduction

The idea of drawing duplicate-controls on a form came to me after I did a few commercial projects. I found that making several forms with 30+ controls can be a pretty tiresome task. That is especially true when you are making a form with lots of text fields. You have to make several TextBoxes, and each of them must be accompanied by a Label. More than that, every Label must have the same distance to the TextBox so your forms would look neat. In the worst case scenario, you have to assign each label with some nice name, because there can always be a situation where some label changes its text when you type some information on the text box and you don't want to end up with names like 'labelXXX'.

In VC#.NET, we have a mechanism to build multi-control components, and it's called the UserControl class. This is basically a container where you can put other controls from the toolbox. However, this mechanism has disadvantages. If you make labels and textboxes and you want to align all the textboxes, you will have big problems, you cannot use leads anymore:

Problem with UserControl

When using my technique, I can still use leads, despite the fact that I have a multi-control component:

Problem with UserControl

Of course, there is a catch, and that is layouts... but since I'm not a big fan of layouts, I can live with that.

Background

If you ever wrote something in Delphi, you must have noticed that the VCL (Visual Component Library) has a control which is called LabeledEdit. In this article, we will try to make the same thing in C# .NET. However, instead of using the designer and inheriting from UserControl, we will use only code and inherit directly from TextBox.

The Solution

When you want to draw another control in your component, there are three methods you have to override and customize:

  • void OnParentChanged(EventArgs e)
  • void OnLocationChanged(EventArgs e)
  • void Dispose(bool disposing)

You can read in MSDN or other documentation sites about these, but what you need to know is that on OnParentChanged(EventArgs e), you want to place the creation and drawing code of your control. For example:

protected override void OnParentChanged(EventArgs e)
{
    // this one is mandatory, unless you enjoy exceptions :-)
     if (this.Parent != null) 
    {
    _control = new SomeControl(); // creation of our control
    this.Parent.Controls.Add(_control); // adding to container
    setCoordsAndOtherStuff(); // compute Top Left Width Height
    }
    base.OnParentChanged(e); // call method from base-class
}

The second one, OnLocationChanged(EventArgs e), is pretty obvious. When the location changes, you want to re-position your controls:

protected override void OnLocationChanged(EventArgs e)
{
    setCoordsAndOtherStuff(); // compute Top Left Width Height
    base.OnLocationChanged(e); // call method from base-class
}

The third one is not really mandatory because your component will work without this, but as soon as you delete it from the designer, the other components will not be deleted. The problem is, you cannot select them because from the designer point of view, they do not exist Smile | :) . The Dispose code is in the *.designer.cs file, but I always like to move it to my main *.cs file.

protected override void Dispose(bool disposing)
{
    if (_control != null)
        _control.Dispose(); // make sure it's not null and dispose it
    if (disposing && (components != null))
    {    
        components.Dispose();
    }    
    base.Dispose(disposing);
}

And that's it. Next, we're going to do a real component, a labeled textbox. Smile | :)

TextBox with Label on Right Side - LabeledTextBox

Here is the complete source of the component:

public partial class LabeledTextBox : TextBox
{
    public LabeledTextBox()
    {
        InitializeComponent();
    }
        // our label
    protected Label _label = null; 
        // caption of our label
    protected string _LabelText = ""; 
        // space between editbox and label
    protected int _offset = 5; 
    public int offset
    {
        get { return _offset; }
        set
        {
            _offset = value;
            setControlsPosition(); // re-position
        }
    }
    public string LabelText
    {
        get { return _LabelText; }
        set
        {
            _LabelText = value;
            setControlsPosition(); // re-position
        }
    }
    // notice that I make this method virtual so I can enhance this to
    // position more controls as I will be extending this class
    protected virtual void setControlsPosition()
    {
        if (_label != null)
        {
                        // setting text
            _label.Text = _LabelText; 
                        // autosize is important cause it saves us a lot of code
            _label.AutoSize = true; 
                        // little bit to the right
            _label.Left = this.Left - _label.Width - _offset; 
                        // and little bit below top 
            _label.Top = this.Top + 3; 
        }
    }
    protected override void OnParentChanged(EventArgs e)
    {
        if (this.Parent != null)
        {
                        // create label
            _label = new Label(); 
                        // add to form
            this.Parent.Controls.Add(_label); 
            setControlsPosition(); 
        }
        base.OnParentChanged(e);
    }
    protected override void OnLocationChanged(EventArgs e)
    {
        setControlsPosition();
        base.OnLocationChanged(e);
    }
    protected override void Dispose(bool disposing)
    {
        if (_label != null)
            _label.Dispose();
        if (disposing && (components != null))
        {
            components.Dispose();
        }
        base.Dispose(disposing);
    }
}

I think the most important thing to remember is when you do the set section, "reload" the component's position, so every time you change the property, the label will re-position to fit nicely. Of course, you have to override some events like Enable, Visible to make it look more deluxe, but this is pretty much basic to get you started. Now, we are going to move to the next class, which is a LabeledText with a button.

LabeledTextBox with Button: Inherited from the Component We Just Made

This is a little more complicated because we have to make an event that will respond to the button click. We cannot do it directly because the designer only sees our TextBox, for it, the Label and Button do not exist. So, we have to do a little trick...

One of the nice things in C# is the fact that we can add events to a component, simply by using the operator +=. Of course, we have to make some method which will do work that must be done.

// *STEP 1* create this method
protected virtual void OnButtonClick(object sender, EventArgs e) 
{
    // just to test the event
    MessageBox.Show("You have just clicked you button"); 
}
// and in overrided "position" function
...
// *STEP 2* link method and event
// 27.X.2008 put this below adding component to Parent (OnParentChanged)
// so it will execute only once
_button.Click += new EventHandler(OnButtonClick);

So now, we have a method that will fire when a button is clicked, but since we want to transfer this event to our component, we have to make a delegate and an event.

// arguments that will be used for our event *STEP 3*
public delegate void ButtonClickDelegate(object sender, EventArgs e); 
//  name of our event, look for it in events section of properties *STEP 3*
public event ButtonClickDelegate LabeledButtonClick; 

And, our modified OnButtonClick:

protected virtual void OnButtonClick(object sender, EventArgs e)
{
    // just to test the event
    MessageBox.Show("You have just clicked you button"); 
    //event with delegate arguments, this method will be 
    //implemented when you double click on event 
    LabeledButtonClick(sender, e); // LabeledButtonClick *STEP 4* 
}

So remember, if you try to transfer events from one control to another:

  1. Make a method with the same parameters as the event.
  2. Add an event handler with this method to the control you are transferring from.
  3. Make a delegate and an event for the component you are transferring to.
  4. Fire an event in the method created in step 1.

If we build this now, we will see this in the event section:

This is what you will see in the design time

And, whatever you implement in that function, it will be fired as you press the button. Here is the complete class:

public partial class LabButtonEdit : LabeledTextBox
{
    public delegate void ButtonClickDelegate(object sender, EventArgs e);
    public event ButtonClickDelegate LabeledButtonClick;
    public LabButtonEdit()
    {
        InitializeComponent();
    }
    protected Button _button;
    protected bool _drawButton = false;
    protected string _buttonText = "";

    public bool drawButton
    {
        get { return _drawButton; }
        set
        {
            _drawButton = value;
            setControlsPosition();// re-position both controls
        }
    }
    public string buttonText
    {
        get { return _buttonText; }
        set
        {
            _buttonText = value;
            setControlsPosition(); // // re-position
        }
    }
    protected override void OnParentChanged(EventArgs e)
    {
        if (this.Parent != null)
        {
            _button = new Button();
            this.Parent.Controls.Add(_button);
	    // add new event and make it fire my method
            _button.Click += new EventHandler(OnButtonClick); 
            setControlsPosition(); // overridden method
        }

        base.OnParentChanged(e);
    }
    protected override void OnLocationChanged(EventArgs e)
    {
        setControlsPosition();
        base.OnLocationChanged(e);
    }
    protected override void setControlsPosition()
    {
        base.setControlsPosition(); // positioning Label
        if (_button != null)
        {
            _button.Text = _buttonText;
            _button.Left = this.Left + this.Width + _offset;
            _button.Top = this.Top;
            _button.Height = this.Height;
            // this is used to measure string width in pixels
            Graphics g = this.CreateGraphics();
            // button width is calculated so it can fit Text 
            _button.Width = (int)(g.MeasureString
                (_buttonText, _button.Font)).Width + 15; nicely
            g.Dispose(); // we don't need graphics anymore
            if (!_drawButton)
            {
                _button.Visible = false;
            }
            else
            {
                _button.Visible = true;
            }
	    // 27.X.2008 EVENT ADDITION CODE MOVED TO OnParentChanged()            
        }
    }
    protected virtual void OnButtonClick(object sender, EventArgs e)
    {
        // just to test the event
        MessageBox.Show("You have just clicked you button"); 
        LabeledButtonClick(sender, e);
    }
    protected override void Dispose(bool disposing)
    {
        if (_button != null)
            _button.Dispose();
        if (disposing && (components != null))
        {
            components.Dispose();
        }
        base.Dispose(disposing);
    }
}

How To Use It

  1. Unpack the zip to some directory.
  2. Make a new Windows Forms project and save it.
  3. Follow the steps in these pictures...
  4. Enjoy!

Points of Interest

I am using these kinds of components in my every day work. Labeled ComboBoxes, DateTimePickers, all kinds of stuff. As for me... it really saves a lot of time. I'd love to hear what you guys (or girls) think about this. Feedback is always appreciated.

Thanks

Greetz goes to Ralf Jansen - for providing the right event for adding the control.

History

  • 24.X.2008 - v1.0
  • 27.X.2008 - v1.1 - Fixed bug where event is added every time position method is fired, now event is added after creation of button

License

This article, along with any associated source code and files, is licensed under The MIT License

About the Author

Adrian Pasik
Software Developer Agilion Consulting
Poland Poland
I specialize at C#, developing Enterprise solutions. I have some knowledge of ASP.NET MVC - looking forward to use it together with Typescript.
Follow on   LinkedIn

Comments and Discussions

 
QuestionNice work Pinmemberyuifox15-Aug-12 21:59 
GeneralNice, but doesn't work on FlowLayoutPanel PinmemberRobson Previato10-Apr-09 16:37 
GeneralRe: Nice, but doesn't work on FlowLayoutPanel PinmemberAdrian Pasik10-Apr-09 21:32 
QuestionWhy not use IExtender provider? PinmemberBarCode13-Nov-08 0:24 
AnswerRe: Why not use IExtender provider? PinmemberAdrian Pasik13-Nov-08 4:54 
GeneralResizing PinmemberBDisp4-Nov-08 12:04 
GeneralRe: Resizing PinmemberAdrian Pasik5-Nov-08 4:07 
GeneralPotential bug in the code PinmemberIlíon27-Oct-08 4:30 
GeneralRe: Potential bug in the code PinmemberAdrian Pasik27-Oct-08 4:52 
indeed it is a bug, a notice it on sunday and hoped to post new code as soon as i come back from work
 
thanks for pointing it out!
 
Adrian Pasik

GeneralRe: Potential bug in the code PinmemberIlíon27-Oct-08 5:34 
GeneralRe: Potential bug in the code PinmemberAdrian Pasik27-Oct-08 5:50 
GeneralGood Work PinmemberGigy24-Oct-08 10:29 
GeneralPretty Neat PinmemberZeXr024-Oct-08 8:39 
GeneralFormatting PinmemberSimon Stevens24-Oct-08 6:44 
GeneralRe: Formatting PinmemberAdrian Pasik24-Oct-08 7:03 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140721.1 | Last Updated 28 Oct 2008
Article Copyright 2008 by Adrian Pasik
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid