Creating Custom Controls [C#]

Post Reply
User avatar
Click16
Posts: 1941
Joined: Mon Dec 31, 2007 4:36 am
Location: United States

Creating Custom Controls [C#]

Post by Click16 »

I must thank Grimdoomer for being so patient with me. He taught me a little bit of this, the rest I caught on! Thank you so much Grim!

Okay, lets start with a new WindowsFormsApplication.

Image

now we have our main form loaded. Now we need to add a ClassLibrary. Go to the solution explorer, right click on the solution and select Add > New Project.

Image

If it asks you to save, just press ok.

Now you are asked to select an item to add. Choose a Class Library and call it whatever you want the name of your control to be. Mine will be TutorialExampleButton.

Now you have your class. here you can add any code you like.

Go to the project explorer, go to your class library references, right click and click "Add Reference."
Shortly a window will appear, go to the first tab, and scroll until you find "System.Windows.Forms" and click OK. Also do this for System.Windows.Drawing and System.ComponentModel.

you will see this:

Code: Select all

{
    public class Class1
    {
    }
}
change that to:

Code: Select all

{
    public class <Control Name> : <Item to be Inherited>
    {
    }
}
As for me, I will use this code.

Code: Select all

{
    public class ExampleButton : Button
    {
    }
}
Now we have to start our control out with a couple of variables. I will make a button that changes its background image when the mouse is over, clicking, and off of the button. I need 3 images though. So i must add 3 images. You might want to add

Code: Select all

#region RegionName
#endregion
to keep things tidy.

My variables are as follows:

Code: Select all

   {
        #region Variables
        //The default image when the mouse is off of the button.
        Image DefaultImage;
        //The image when the mouse is over the button.
        Image MouseOver;
        //The image when the mouse is clicking the button.
        Image MouseDown;
        #endregion
    }
Now that the variables are done, we need to add some menu items to access those variables. I went ahead and created another region for the menu items.
I will give you a sample of a menu item.

Code: Select all

#region Properties
        /// <summary>
        /// The Face of the button when the mouse is off of it.
        /// </summary>
        [Browsable(true),
        Description("The background of the button."),
        CategoryAttribute("Button Appearance")]
        public Image DefaultButtonImage
        {
            get { return DefaultImage; }
            set { DefaultImage = value; }
        }
        #endregion
check the toolbox, and add your control to Form1. Debug your app and close it. You will now be able to see your new menu item.

Image

And that covers your first menu item. I will continue the process until I have all of the items I need.

Code: Select all

#region Properties
        /// <summary>
        /// The Face of the button when the mouse is off of it.
        /// </summary>
        [Browsable(true),
        Description("The background of the button."),
        CategoryAttribute("Button Appearance")]
        public Image DefaultButtonImage
        {
            get { return DefaultImage; }
            set { DefaultImage = value; }
        }
        /// <summary>
        /// The Face of the button when the mouse is above it.
        /// </summary>
        [Browsable(true),
        Description("The Background of the button when it is selected."),
        CategoryAttribute("Button Appearance")]
        public Image MouseOverImage
        {
            get { return MouseOver; }
            set { MouseOver = value; }
        }
        /// <summary>
        /// The face of the button when you click it.
        /// </summary>
        [Browsable(true),
        Description("The Background of the button when you click it."),
        CategoryAttribute("Button Appearance")]
        public Image MouseDownImage
        {
            get { return MouseDown; }
            set { MouseDown = value; }
        }
        #endregion
Now we need our methods. Lets create another region labeled "Methods."

Inside our methods region we now need our OnPaint event. so lets add this.

Code: Select all

protected override void OnPaint
Now we should get a full event.

Code: Select all

        protected override void OnPaint(PaintEventArgs pevent)
        {
            base.OnPaint(pevent);
        }
now we need to add our other events. I need MouseEnter, MouseDown, MouseCaptureChanged, and MouseLeave events.

Code: Select all

        #region Methods
        protected override void OnPaint(PaintEventArgs pevent)
        {
            base.OnPaint(pevent);
        }
        protected override void OnMouseEnter(EventArgs e)
        {
            base.OnMouseEnter(e);
        }
        protected override void OnMouseLeave(EventArgs e)
        {
            base.OnMouseLeave(e);
        }
        protected override void OnMouseCaptureChanged(EventArgs e)
        {
            base.OnMouseCaptureChanged(e);
        }
        protected override void OnMouseDown(MouseEventArgs mevent)
        {
            base.OnMouseDown(mevent);
        }
        #endregion
Now we need to tell the button to do certain things when these events occur.

Code: Select all

        #region Methods
        protected override void OnPaint(PaintEventArgs pevent)
        {
            base.OnPaint(pevent);
        }
        protected override void OnMouseEnter(EventArgs e)
        {
            this.BackgroundImage = MouseOver;
            base.OnMouseEnter(e);
        }
        protected override void OnMouseLeave(EventArgs e)
        {
            this.BackgroundImage = DefaultImage;
            base.OnMouseLeave(e);
        }
        protected override void OnMouseCaptureChanged(EventArgs e)
        {
            this.BackgroundImage = MouseOver;
            base.OnMouseCaptureChanged(e);
        }
        protected override void OnMouseDown(MouseEventArgs mevent)
        {
            this.BackgroundImage = MouseDown;
            base.OnMouseDown(mevent);
        }
        #endregion
now just debug again and then close the app. Now we should assign images where they are needed.

Image

Now lets debug and see the results.

Image

Now that the methods are complete, lets add some final touches.

Code: Select all

        #region Constructor
        public ExampleButton()
        {
            this.Size = new Size(100, 28);
            this.FlatStyle = FlatStyle.Flat;
            this.FlatAppearance.BorderColor = Color.Empty;
            this.FlatAppearance.BorderSize = 0;
            this.FlatAppearance.CheckedBackColor = null;
            this.FlatAppearance.MouseDownBackColor = null;
            this.FlatAppearance.MouseOverBackColor = null;            
        }
        #endregion
This will handle the border issue. Now that our control is complete, Build your application. right click on the toolbox, and press add items. once the window shows, click browse. Go to your application directory and choose the .dll file. It should be what you named your library. in my case, its ExampleButton.dll.

Note that there will be new code that I added in the source that is not here in the tutorial, mainly because it was unnecessary. Well, Enjoy!
CustomControlTutorial.rar
The Source Code for this tutorial.
(123.6 KiB) Downloaded 461 times
Image
User avatar
Eaton
Posts: 608
Joined: Mon Apr 21, 2008 7:44 pm
Location: USA
Contact:

Re: Creating Custom Controls [C#]

Post by Eaton »

Nice tutorial! :)
User avatar
Click16
Posts: 1941
Joined: Mon Dec 31, 2007 4:36 am
Location: United States

Re: Creating Custom Controls [C#]

Post by Click16 »

Eaton wrote:Nice tutorial! :)
Thanks
Image
Post Reply