Creating Custom Controls [C#]
Posted: Fri Aug 21, 2009 7:04 am
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.
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.
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:
change that to:
As for me, I will use this code.
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 to keep things tidy.
My variables are as follows:
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.
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.
And that covers your first menu item. I will continue the process until I have all of the items I need.
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.
Now we should get a full event.
now we need to add our other events. I need MouseEnter, MouseDown, MouseCaptureChanged, and MouseLeave events.
Now we need to tell the button to do certain things when these events occur.
now just debug again and then close the app. Now we should assign images where they are needed.
Now lets debug and see the results.
Now that the methods are complete, lets add some final touches.
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!
Okay, lets start with a new WindowsFormsApplication.
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.
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
{
}
}
Code: Select all
{
public class <Control Name> : <Item to be Inherited>
{
}
}
Code: Select all
{
public class ExampleButton : Button
{
}
}
Code: Select all
#region RegionName
#endregion
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
}
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
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
Inside our methods region we now need our OnPaint event. so lets add this.
Code: Select all
protected override void OnPaint
Code: Select all
protected override void OnPaint(PaintEventArgs pevent)
{
base.OnPaint(pevent);
}
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
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 lets debug and see the results.
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
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!