C# Custom Button Control in 10mins

This is just a quick 10min guide on making custom controls in the C# language.
C# is an Object Orientated Programming language, also referred to as OOP.
Pronounced "see-sharp", C# was originally intended to be name "Cool", which stood for ‘C like Object Oriented Language’.

So lets get this guide going, there will also be a video of this tutorial for those who prefer to watch.

Step 1:

This project is based on a Control Library i have developed and is the process of how i made XUIFlatButton control.
Find my XUI control library here -

Heres my FlatButton.cs file - https://pastebin.com/ZfBXx6T8

1-

First, we begin by creating a new project in visual studio and we select the Winforms Control Library template.
You can name the project whatever you like

2-

Now, we open our solution explorer panel and right click on our projects name(not the solution, it should have a little C# symbol next to it), select "Add" > "New item" > "Class", and we will name it "FlatButton.cs".

3-

We now double click on our class in the solution explorer(FlatButton.cs), if something pops up saying "To add components to your class blah blah", just click the hyperlinked text that says "Click here to switch to code view".

4-
Now the first thing we wanna do is add a few directives we need
using System.Windows.Forms;
using System.Drawing;

5-

We now inherit the properties of a button, so on the line that says "class FlatButton" change it to
public class FlatButton : Control

And inside the brackets
public FlatButton() { }

6-
And then we make a private color to determine what color to paint the control
private Color CurrentBackColor;

7-

Now we will make a setting that you can set to change the BackColor of the control when the mouse enters it

private Color onHoverBackColor = Color.DarkOrchid;
public Color OnHoverBackColor

{

get { return onHoverBackColor; }

set { onHoverBackColor = value; Invalidate(); }

}

The private color onHoverBackColor is a color that is changed when the value of OnHoverBackColor is changed, the default hover color is DarkOrchid.

8-

now we override the OnPaint event, the onpaint event draws the control

protected override void OnPaint(PaintEventArgs pevent)

{

base.OnPaint(pevent);

pevent.Graphics.FillRectangle(new SolidBrush(CurrentBackColor), 0, 0, Width, Height);

TextFormatFlags flags = TextFormatFlags.HorizontalCenter | TextFormatFlags.VerticalCenter;

TextRenderer.DrawText(pevent.Graphics, Text, Font, new Point(Width + 3, Height / 2), ForeColor, flags);

}

The first line override the paint event, the second line triggers the onpaint event with the paintEventArgs(pevent)

The third line fills a rectangle the size off the control with the color as our CurrentColor Color.
The fourth and fifth line is to draw text centered of the control.

9-

We override the MouseEnter, MouseLeave, MouseDown and MouseUp events

The MouseEnter event detects when the mouse goes over the control(we use that as our trigger to change to the hover background color)
The MouseLeave event detected when the mouse leaves the control(We change the backcolor to the original color)
The MouseDown event detects when the control is clicked(This is when we change the button to our click color)
The MouseUp event detects when the mouse is let go(We change the backcolor to the original color)

In each of the following
1st line overrides the event
2nd line triggers with args
3rd line sets our current color to our desired color

4th line refreshes the control(needed inorder to repaint)

protected override void OnMouseEnter(EventArgs e)

{

base.OnMouseEnter(e);

CurrentBackColor = onHoverBackColor;

Invalidate();

}

protected override void OnMouseLeave(EventArgs e)

{

base.OnMouseLeave(e);

CurrentBackColor = BackColor;

Invalidate();

}

protected override void OnMouseDown(MouseEventArgs mevent)

{

base.OnMouseDown(mevent);

CurrentBackColor = Color.RoyalBlue;

Invalidate();

}

protected override void OnMouseUp(MouseEventArgs mevent)

{

base.OnMouseUp(mevent);

CurrentBackColor = BackColor;

Invalidate();

}

10-

We can now build our project and double click on UserControl1 in the colution explorer, go to toolbox and find our custom control at the top, Thats it guys

Like, Share and Subscribe for more