7/22/2021 Custom Button - Custom controls WinForm C # - RJ Code Advance

Bấm để xem thêm

Miles Wei & Hu Yixuan on Mango TV

Mango TV

Custom Button - Custom controls

WinForm C #
by RJ Code Advance / 1 comment

https://rjcodeadvance.com/rounded-button-custom-controls-winform-c/ 1/13
7/22/2021 Custom Button - Custom controls WinForm C # - RJ Code Advance

Hello, continuing with the tutorials of custom controls in Windows Form, this time we will
make a flat button with a customizable border radius , thus obtaining a button with
rounded corners, in the shape of a pill, or a normal rectangular button.

Normally in Windows Form, round buttons have poor image quality at the corners, so I
applied a little trick to get a good-quality rounded corner button.

Ok, let's start with the tutorial:

1.- Create class

First we will add a class for the button called  RJButton , or whatever name you want, in
our Windows Form project.

2.- Import libraries

To build the custom button, it is necessary to import the  Windows Forms library  and the
drawing library ( Drawing ) and the ComponentModel library   to implement attributes
https://rjcodeadvance.com/rounded-button-custom-controls-winform-c/ 2/13
7/22/2021 Custom Button - Custom controls WinForm C # - RJ Code Advance

(For example, group properties in categories).

using System.Windows.Forms;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.ComponentModel;

3.- Inherit the Button class

It is really difficult to create a custom control from scratch, so we will simply inherit the
Button control from the Windows Form library and thus expand its functionality and
modify the appearance.

public class RJButton: Button

{
}

4.- Declare fields

In the class, we will declare fields for the button appearance and assign their default
values, for example: the border thickness, border radius size and border color.

// Fields
private int borderSize = 0 ;
private int borderRadius = 20 ;
private Color borderColor = Color. PaleVioletRed ;

5.- Generate properties

We generate properties to expose the previously declared fields.

// Properties
[ Category ( "RJ Code Advance" )]
public int BorderSize
{
get { return borderSize; }
set
{
borderSize = value ;
this . Invalidate () ;
}
}

[ Category ( "RJ Code Advance" )]

public int BorderRadius
{
get { return borderRadius; }

https://rjcodeadvance.com/rounded-button-custom-controls-winform-c/ 3/13
7/22/2021 Custom Button - Custom controls WinForm C # - RJ Code Advance

set
{
borderRadius = value ;
this . Invalidate () ;
}
}

[ Category ( "RJ Code Advance" )]

public Color BorderColor
{
get { return borderColor; }
set
{
borderColor = value ;
this . Invalidate () ;
}
}
[ Category ( "RJ Code Advance" )]
public Color BackgroundColor
{
get { return this . BackColor ; }
set { this . BackColor = value ; }
}

[ Category ( "RJ Code Advance" )]

public Color TextColor
{
get { return this . ForeColor ; }
set { this . ForeColor = value ; }
}

6.- Builder
In the constructor, we will initialize some properties of the button for the default
appearance . For example, a flat, borderless style with a specific size, background color, and
text color. They can set any other properties they want, such as an icon, text alignment, and
image.

It will also be necessary to subscribe the Resize event of the button, to keep the ratio of
the border radius limited to the height of the button, since if the border radius is greater than
the height of the button, the button will deform because it is impossible to draw an arc
bigger in smaller dimensions.

//Builder
public RJButton ()
{
this . FlatStyle = FlatStyle. Flat ;

https://rjcodeadvance.com/rounded-button-custom-controls-winform-c/ 4/13
7/22/2021 Custom Button - Custom controls WinForm C # - RJ Code Advance

this . FlatAppearance . BorderSize = 0 ;

this . Size = new Size ( 150 , 40 ) ;
this . BackColor = Color. MediumSlateBlue ;
this . ForeColor = Color. White ;
this . Resize + = new EventHandler ( Button_Resize ) ;
}

private void Button_Resize ( object sender, EventArgs e )

{
if ( borderRadius > this . Height )
borderRadius = this . Height ;
}

7.- Create figure path method

After performing the above steps, we will declare a private method to get the graphics path
for the button layout with customizable border radius. For it:

We will add an arc on the initial axis of the rectangle equal in size to the radius, starting at
a 180 degree angle with a 90 degree travel range.

We will add another arc in the upper right corner, starting at a 270 degree angle with a 90
degree range.

Another arc in the lower right corner, starting at a 0 degree angle with a 90 degree range.

Finally we will add the last arc in the lower left corner to close the button shape, starting
at a 90 degree angle with a 90 degree range.

Note that the  direction of the unit circle angles in C # or Visual Basic  are  clockwise
 ( Clockwise ) as shown in the following image.

https://rjcodeadvance.com/rounded-button-custom-controls-winform-c/ 5/13
7/22/2021 Custom Button - Custom controls WinForm C # - RJ Code Advance

// Methods
private GraphicsPath GetFigurePath ( Rectangle rect, float radius )
{
GraphicsPath path = new GraphicsPath () ;
float curveSize = radius * 2F;

path. StartFigure () ;
path. AddArc ( rect. X , rect. Y , curveSize, curveSize, 180 , 90 ) ;
path. AddArc ( rect. Right - curveSize, rect. Y , curveSize, curveSize, 2
path. AddArc ( rect. Right - curveSize, rect. Bottom - curveSize, curveSi
path. AddArc ( rect. X , rect. Bottom - curveSize, curveSize, curveSize,
path. CloseFigure () ;
return path;
}

8.- Cancel the OnPaint method

To modify or extend the appearance of the button it is necessary to override the OnPaint
method of the base button. In this case, we will draw a rounded button or a traditional
one (Square) depending on the value of the border radius.

protected override void OnPaint ( PaintEventArgs pevent )

{
https://rjcodeadvance.com/rounded-button-custom-controls-winform-c/ 6/13
7/22/2021 Custom Button - Custom controls WinForm C # - RJ Code Advance

base . OnPaint ( pevent ) ;

Rectangle rectSurface = this . ClientRectangle ;

Rectangle rectBorder = Rectangle. Inflate ( rectSurface, -borderSize, -bo
int smoothSize = 2 ;
if ( borderSize > 0 )
smoothSize = borderSize;

if ( borderRadius > 2 ) // Rounded button

{
using ( GraphicsPath pathSurface = GetFigurePath ( rectSurface, borde
using ( GraphicsPath pathBorder = GetFigurePath ( rectBorder, borderR
using ( Pen penSurface = new Pen ( this . Parent . BackColor , smooth
using ( Pen penBorder = new Pen ( borderColor, borderSize ))
{
pevent. Graphics . SmoothingMode = SmoothingMode. AntiAlias ;
// Button surface
this . Region = new Region ( pathSurface ) ;
// Draw surface border for HD result
pevent. Graphics . DrawPath ( penSurface, pathSurface ) ;

// Button border
if ( borderSize > = 1 )
// Draw control border
pevent. Graphics . DrawPath ( penBorder, pathBorder ) ;
}
}
else // Normal button
{
pevent. Graphics . SmoothingMode = SmoothingMode. None ;
// Button surface
this . Region = new Region ( rectSurface ) ;
// Button border
if ( borderSize > = 1 )
{
using ( Pen penBorder = new Pen ( borderColor, borderSize ))
{
penBorder. Alignment = PenAlignment. Inset ;
pevent. Graphics . DrawRectangle ( penBorder, 0 , 0 , this .
}
}
}
}

9.- Override the OnHandleCreated method

https://rjcodeadvance.com/rounded-button-custom-controls-winform-c/ 7/13
7/22/2021 Custom Button - Custom controls WinForm C # - RJ Code Advance

It is also necessary to override the OnHandleCreated method. We will use this method to
solve the following drawback: In the previous method, to have a button with good image
quality, the edge of the surface is drawn with the same color as its parent container.
Therefore, if the form or container control changes its background color, the border of the
button surface will become visible, leaving a bad impression. To solve the problem we must
detect if the container form or control changes color. For this we will subscribe the
BackColorChanged event of the container parent.

protected override void OnHandleCreated ( EventArgs e )

{
base . OnHandleCreated ( e ) ;
this . Parent . BackColorChanged + = new EventHandler ( Container_BackCol
}

private void Container_BackColorChanged ( object sender, EventArgs e )

{
this . Invalidate () ;
}

It should be mentioned that the HandleCreated event is the one that most closely resembles
the Load event of the form or user control, since it is executed first when the handle of the
control is created.

Alright, and that's it, you can now use the new custom button from the toolbox, do  n't
forget to compile the project to save the changes . 

SEE FULL CODE (GITHUB)

See video tutorial

Custom Button - Rounded, Pill or Square Shape - Win…

Win…

https://rjcodeadvance.com/rounded-button-custom-controls-winform-c/ 8/13
7/22/2021 Custom Button - Custom controls WinForm C # - RJ Code Advance

1 comment on "Custom Button - Custom

controls WinForm C #"

GUSTAVO
on July 18, 2021 at 4:34 am

Thank you very much Friend for doing these types of tutorials, being very sincere you are a
crack I always get inspired by your videos

Answer

Leave a reply
Your email address will not be published. Required fields are marked with *

Commentary

https://rjcodeadvance.com/rounded-button-custom-controls-winform-c/ 9/13
7/22/2021 Custom Button - Custom controls WinForm C # - RJ Code Advance

Name *

E-mail *

Web

Post the comment

Welcome to blog

Look for …

Follow me






Category:
.NET
ASP .NET
C#
Mistakes
F#
Visual basic
Windows Forms

https://rjcodeadvance.com/rounded-button-custom-controls-winform-c/ 10/13
7/22/2021 Custom Button - Custom controls WinForm C # - RJ Code Advance

Bảo hieemrr rủi

ro tài sản
Lưu đồ phối hợp quản lý thi công nội

thất
PMC

Mở

Layered Architecture

Database
MySQL
SQL Server
Custom controls
courses
.NET (Course)
Create .Net Installer
Full Login C #, VB, SQL Server
Software Patterns (Course)
OOP (Course)
Desk
GUI
Software Patterns
OOP

https://rjcodeadvance.com/rounded-button-custom-controls-winform-c/ 11/13
7/22/2021 Custom Button - Custom controls WinForm C # - RJ Code Advance

Uncategorized
Web

Recent logins
Circular Picture Box - Border Gradient color + Styles - C # & WinForms
Custom ProgressBar - WinForms & C #
Custom TextBox Full - Rounded & Placeholder - WinForm, C #
Custom ComboBox - Icon, Back, Text & Border Color - WinForm C #
Custom Text Box - Custom controls WinForm C #

Recent comments
gustavo on Custom Button - Custom controls WinForm C #
_Nooker in Modern Form + Font Awesome Icons, WinForm, C # - VB.NET

Bảo hieemrr rủi

ro tài sản
Lưu đồ phối hợp quản lý thi công nội

thất
PMC

Mở

Impekly in Full Login + CRUD - C #, SQL Server- Advanced Level

Willgt27 in Login Cap 2- Start Session, Close Session and Show user data with C #, VB.Net,
Sql Server, WinForm- POO, Layered Architecture- Intermediate Level
Juan Vega in Chapter 4 / Create Installation Package - Application with Local Network
Database (LAN-MAN) - SQL Server, Visual Studio, WinForm, Layers

https://rjcodeadvance.com/rounded-button-custom-controls-winform-c/ 12/13
7/22/2021 Custom Button - Custom controls WinForm C # - RJ Code Advance

Terms and Conditions Privacy Policy Cookies policy






© 2021 RJ Code Advance - All Rights Reserved

https://rjcodeadvance.com/rounded-button-custom-controls-winform-c/ 13/13