7/22/2021 Circular Picture Box - Border Gradient color + Styles - C # & WinForms - RJ Code Advance

Website Automation
10 Buổi Zoom về Website Automation - Bí Quyết Tặng Doanh Số Trê

UltraMailer.vn

Circular Picture Box - Border

Gradient color + Styles - C # &
WinForms
by RJ Code Advance

https://rjcodeadvance.com/circular-picture-box-border-gradient-color-styles-c-winforms/ 1/10
7/22/2021 Circular Picture Box - Border Gradient color + Styles - C # & WinForms - RJ Code Advance

Hello, now we will create a circular picture box with a border gradient color, with various
types of line style, for example; solid, dashes, dots, combined between dashes and dots, or
just no border. Also to be able to set the cover style at the end or beginning of a script, for
example, a flat, rounded or triangular style.

Doing it is very simple, it won't take long

1.- Create class

First  add a new class and put any name, in my case I will put RJCircularPictureBox .

2.- Import Windows.Form and Drawing library

To make any custom / extended control, it is necessary to import the  Windows Forms
library  and the drawing library ( Drawing ), optionally also import the ComponentModel
library to implement attributes in the properties of the control.

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

https://rjcodeadvance.com/circular-picture-box-border-gradient-color-styles-c-winforms/ 2/10
7/22/2021 Circular Picture Box - Border Gradient color + Styles - C # & WinForms - RJ Code Advance

3.- Inherit the PictureBox class

Inherit the PictureBox control , in order to customize the appearance and extend its
functionality.

class RJCircularPictureBox: PictureBox

{
}

4.- Declare fields

Once the PictureBox class is inherited, declare fields for the  appearance and assign their
default values,  in this case: border size, border color 1 and 2 to set a gradient color of the
border, line style and cap, finally a field to the angle of the gradient.

// Fields
private int borderSize = 2 ;
private Color borderColor = Color. RoyalBlue ;
private Color borderColor2 = Color. HotPink ;
private DashStyle borderLineStyle = DashStyle. Solid ;
private DashCap borderCapStyle = DashCap. Flat ;
private float gradientAngle = 50F;

5.- Builder
In the constructor, just set the height and width to the same size. And optionally set the size
mode, in this case, I will indicate the image to fit the size of the image box.

//Builder
public RJCircularPictureBox ()
{
this . Size = new Size ( 100 , 100 ) ;
this . SizeMode = PictureBoxSizeMode. StretchImage ;
}

6.- Generate properties

Create the accessors of the fields defined above, and thus be able to change the
appearance of the control from the properties box. Once the properties are created, in the
Set accessors, invoke the method Invalidate () , to repaint the control and thus update
the appearance.

// Properties
[ Category ( "RJ Code Advance" )]
public int BorderSize
{
get { return borderSize; }
https://rjcodeadvance.com/circular-picture-box-border-gradient-color-styles-c-winforms/ 3/10
7/22/2021 Circular Picture Box - Border Gradient color + Styles - C # & WinForms - RJ Code Advance

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

[ Category ( "RJ Code Advance" )]

public Color BorderColor
{
get { return borderColor; }
set
{
borderColor = value ;
this . Invalidate () ;
}
}

[ Category ( "RJ Code Advance" )]

public Color BorderColor2
{
get { return borderColor2; }
set
{
borderColor2 = value ;
this . Invalidate () ;
}
}

[ Category ( "RJ Code Advance" )]

public DashStyle BorderLineStyle
{
get { return borderLineStyle; }
set
{
borderLineStyle = value ;
this . Invalidate () ;
}
}

[ Category ( "RJ Code Advance" )]

public DashCap BorderCapStyle
{
get { return borderCapStyle; }
set
{
borderCapStyle = value ;
this . Invalidate () ;

https://rjcodeadvance.com/circular-picture-box-border-gradient-color-styles-c-winforms/ 4/10
7/22/2021 Circular Picture Box - Border Gradient color + Styles - C # & WinForms - RJ Code Advance

}
}

[ Category ( "RJ Code Advance" )]

public float GradientAngle
{
get { return gradientAngle; }
set
{
gradientAngle = value ;
this . Invalidate () ;
}
}

7.- Cancel the OnResize event

Event method needs to be overridden OnResize , so that the circular picture box always has
the same height and width, that is, a perfect circle.

// Overridden methods
protected override void OnResize ( EventArgs e )
{
base . OnResize ( e ) ;
this . Size = new Size ( this . Width , this . Width ) ;
}

8.- Cancel the OnPaint event

Finally, override the event method OnPaint to add or create a custom look.

protected override void OnPaint ( PaintEventArgs pe )

{
base . OnPaint ( pe ) ;
// Fields
var graph = pe. Graphics ;
var rectContourSmooth = Rectangle. Inflate ( this . ClientRectangle ,
var rectBorder = Rectangle. Inflate ( rectContourSmooth, -borderSize,
var smoothSize = borderSize > 0 ? borderSize * 3 : 1 ;
using ( var borderGColor = new LinearGradientBrush ( rectBorder, bord
using ( var pathRegion = new GraphicsPath ())
using ( var penSmooth = new Pen ( this . Parent . BackColor , smoothS
using ( var penBorder = new Pen ( borderGColor, borderSize ))
{
graph. SmoothingMode = SmoothingMode. AntiAlias ;
penBorder. DashStyle = borderLineStyle;
penBorder. DashCap = borderCapStyle;
pathRegion. AddEllipse ( rectContourSmooth ) ;
// Set rounded region

https://rjcodeadvance.com/circular-picture-box-border-gradient-color-styles-c-winforms/ 5/10
7/22/2021 Circular Picture Box - Border Gradient color + Styles - C # & WinForms - RJ Code Advance

this . Region = new Region ( pathRegion ) ;

// Drawing
graph. DrawEllipse ( penSmooth, rectContourSmooth ) ; // Draw con
if ( borderSize > 0 ) // Draw border
graph. DrawEllipse ( penBorder, rectBorder ) ;
}
}

See full code (GitHub)

Video-tutorial

Circular Picture Box - Gradient color border, Line & Cap Styles | C# & WinForms

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

Commentary

https://rjcodeadvance.com/circular-picture-box-border-gradient-color-styles-c-winforms/ 6/10
7/22/2021 Circular Picture Box - Border Gradient color + Styles - C # & WinForms - RJ Code Advance

Name *

E-mail *

Web

Post the comment

Welcome to blog

Look for …

Follow me






Category:

https://rjcodeadvance.com/circular-picture-box-border-gradient-color-styles-c-winforms/ 7/10
7/22/2021 Circular Picture Box - Border Gradient color + Styles - C # & WinForms - RJ Code Advance

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

Layered Architecture

Database
MySQL
SQL Server
Custom controls
courses
.NET (Course)
Create .Net Installer

https://rjcodeadvance.com/circular-picture-box-border-gradient-color-styles-c-winforms/ 8/10
7/22/2021 Circular Picture Box - Border Gradient color + Styles - C # & WinForms - RJ Code Advance

Full Login C #, VB, SQL Server

Software Patterns (Course)
OOP (Course)
Desk
GUI
Software Patterns
OOP
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

https://rjcodeadvance.com/circular-picture-box-border-gradient-color-styles-c-winforms/ 9/10
7/22/2021 Circular Picture Box - Border Gradient color + Styles - C # & WinForms - RJ Code Advance

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

Terms and Conditions Privacy Policy Cookies policy






© 2021 RJ Code Advance - All Rights Reserved

https://rjcodeadvance.com/circular-picture-box-border-gradient-color-styles-c-winforms/ 10/10