7/22/2021 Custom TextBox Full - Rounded & Placeholder - WinForm, C # - RJ Code Advance

Liu Yihao on Mango TV

Shen Yue & Liu Yihao on Mango TV

Mango TV

Custom TextBox Full - Rounded &

Placeholder - WinForm, C #
by RJ Code Advance

https://rjcodeadvance.com/custom-textbox-full-rounded-placeholder-winform-c/ 1/18
7/22/2021 Custom TextBox Full - Rounded & Placeholder - WinForm, C # - RJ Code Advance

Hello, in this tutorial we will create a custom TextBox with soft rounded corners, rectangular
and underline style, border color and size, text color, and be able to set a placeholder, where
the text should be obtained naturally, either field from password or not.

Well let's start with the tutorial:

1.- Add User Control

First we must  add a user control  to create the custom text box  through the designer
and code . Or you can add a class and  inherit from the user control class  and create
the custom text box using code only.

2.- Design the basic appearance - Designer

After adding the  UserControl , initialize the following properties: In the AutoScaleMode 
property  set to none, and a  Padding  of 7 in Top and bottom, and 10 in left and right, this
is very important as it will help the text box stay focused on user control. Resize the user
control to a  width of 250 and a height of 30 . Optionally set the background color, text
color and we will increase the text size.

2.1.- Add TextBox

After having initialized the previous properties, it only remains to add a text box to the user
control and set the Dock property  of the text box to FILL , to fit the entire user control.

https://rjcodeadvance.com/custom-textbox-full-rounded-placeholder-winform-c/ 2/18
7/22/2021 Custom TextBox Full - Rounded & Placeholder - WinForm, C # - RJ Code Advance

And finally  remove the border from the text box . In this way, the text box remains
centered on the user control, thanks to the Padding established above.

-Transcription of the code - RJTextBox.Designer.cs

#region Component Designer generated code
/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent ()
{
this . textBox1 = new System. Windows . Forms . TextBox () ;
this . SuspendLayout () ;
//
// textBox1
//
this . textBox1 . BorderStyle = System. Windows . Forms . BorderStyle . N
this . textBox1 . Dock = System. Windows . Forms . DockStyle . Fill ;
this . textBox1 . Location = new System. Drawing . Point ( 10 , 7 ) ;
this . textBox1 . Name = "textBox1" ;
this . textBox1 . Size = new System. Drawing . Size ( 230 , 15 ) ;
this . textBox1 . TabIndex = 0 ;
this . textBox1 . Click + = new System. EventHandler ( this . TextBox1_Cl
this . textBox1 . TextChanged + = new System. EventHandler ( this . TextB
this . textBox1 . Enter + = new System. EventHandler ( this . TextBox1_En
this . textBox1 . KeyPress + = new System. Windows . Forms . KeyPressEven
this . textBox1 . Leave + = new System. EventHandler ( this . TextBox1_Le
this . textBox1 . MouseEnter + = new System. EventHandler ( this . TextBo
this . textBox1 . MouseLeave + = new System. EventHandler ( this . TextBo
//
// RJTextBox
//
this . AutoScaleMode = System. Windows . Forms . AutoScaleMode . None ;
this . BackColor = System. Drawing . SystemColors . Window ;

https://rjcodeadvance.com/custom-textbox-full-rounded-placeholder-winform-c/ 3/18
7/22/2021 Custom TextBox Full - Rounded & Placeholder - WinForm, C # - RJ Code Advance

this . Controls . Add ( this . TextBox1 ) ;

this . Font = new System. Drawing . Font ( "Microsoft Sans Serif" , 9.5 F
this . ForeColor = System. Drawing . Color . FromArgb ((( int ) ((( byte
this . Margin = new System. Windows . Forms . Padding ( 4 ) ;
this . Name = "RJTextBox" ;
this . Padding = new System. Windows . Forms . Padding ( 10 , 7 , 10 , 7
this . Size = new System. Drawing . Size ( 250 , 30 ) ;
this . ResumeLayout ( false ) ;
this . PerformLayout () ;
}
#endregion

private System. Windows . Forms . TextBox textBox1;

3.- Declare fields - Code

Once the basic design of the custom text box is done, now it only remains to open the User
Control Code and do the rest, and as usual, we will declare some fields for the appearance
and initialize their default values. In this case, a field for the border color, a field for the
border size, and a field for the text box style, that is, an underlined or rectangular border
style, placeholder color and text, radius border, and a field to determine if the text box is a
password field.

// Fields
private Color borderColor = Color. MediumSlateBlue ;
private Color borderFocusColor = Color. HotPink ;
private int borderSize = 2 ;
private bool underlinedStyle = false ;
private bool isFocused = false ;

private int borderRadius = 0 ;

private Color placeholderColor = Color. DarkGray ;
private string placeholderText = "" ;
private bool isPlaceholder = false ;
private bool isPasswordChar = false ;

4.- Private methods

We will create a method to set the placeholder, and another method to remove it.

A method of getting the graphics path of the control with rounded corners. 

A method to set the rounded region of the inner TextBox.

Finally, a method that will be in charge of  setting a suitable height for the user
control (RJTextBox)  and text box  (textBox1), and in addition to  restricting the

https://rjcodeadvance.com/custom-textbox-full-rounded-placeholder-winform-c/ 4/18
7/22/2021 Custom TextBox Full - Rounded & Placeholder - WinForm, C # - RJ Code Advance

height change  when the text box  is not multiline  (textBox1.Multiline = false) .

#region - > Private methods

private void SetPlaceholder ()
{
if ( string. IsNullOrWhiteSpace ( textBox1. Text ) && placeholderText! =
{
isPlaceholder = true ;
textBox1. Text = placeholderText;
textBox1. ForeColor = placeholderColor;
if ( isPasswordChar )
textBox1. UseSystemPasswordChar = false ;
}
}
private void RemovePlaceholder ()
{
if ( isPlaceholder && placeholderText! = "" )
{
isPlaceholder = false ;
textBox1. Text = "" ;
textBox1. ForeColor = this . ForeColor ;
if ( isPasswordChar )
textBox1. UseSystemPasswordChar = true ;
}
}
private GraphicsPath GetFigurePath ( Rectangle rect, int 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;
}
private void SetTextBoxRoundedRegion ()
{
GraphicsPath pathTxt;
if ( Multiline )
{
pathTxt = GetFigurePath ( textBox1. ClientRectangle , borderRadius -
textBox1. Region = new Region ( pathTxt ) ;
}
else
{

https://rjcodeadvance.com/custom-textbox-full-rounded-placeholder-winform-c/ 5/18
7/22/2021 Custom TextBox Full - Rounded & Placeholder - WinForm, C # - RJ Code Advance

pathTxt = GetFigurePath ( textBox1. ClientRectangle , borderSize * 2

textBox1. Region = new Region ( pathTxt ) ;
}
pathTxt. Dispose () ;
}
private void UpdateControlHeight ()
{
if ( textBox1. Multiline == false )
{
int txtHeight = TextRenderer. MeasureText ( "Text" , this . Font ) .
textBox1. Multiline = true ;
textBox1. MinimumSize = new Size ( 0 , txtHeight ) ;
textBox1. Multiline = false ;

this . Height = textBox1. Height + this . Padding . Top + this . Padd

}
}
#endregion

5.- Create the access descriptors - Properties

We generate properties to expose the fields defined previously, and in addition to adding
other appearance properties (Background color, text…) and exposing the functional and
necessary properties for a text box (PasswordChar, Multiline, Text…).

#region - > Properties

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

[ Category ( "RJ Code Advance" )]

public Color BorderFocusColor
{
get { return borderFocusColor; }
set { borderFocusColor = value ; }
}

[ Category ( "RJ Code Advance" )]

public int BorderSize
{

https://rjcodeadvance.com/custom-textbox-full-rounded-placeholder-winform-c/ 6/18
7/22/2021 Custom TextBox Full - Rounded & Placeholder - WinForm, C # - RJ Code Advance

get { return borderSize; }

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

[ Category ( "RJ Code Advance" )]

public bool UnderlinedStyle
{
get { return underlinedStyle; }
set
{
underlinedStyle = value ;
this . Invalidate () ;
}
}

[ Category ( "RJ Code Advance" )]

public bool PasswordChar
{
get { return isPasswordChar; }
set
{
isPasswordChar = value ;
if ( ! isPlaceholder )
textBox1. UseSystemPasswordChar = value ;
}
}

[ Category ( "RJ Code Advance" )]

public bool Multiline
{
get { return textBox1. Multiline ; }
set { textBox1. Multiline = value ; }
}

[ Category ( "RJ Code Advance" )]

public override Color BackColor
{
get { return base . BackColor ; }
set
{
base . BackColor = value ;
textBox1. BackColor = value ;
https://rjcodeadvance.com/custom-textbox-full-rounded-placeholder-winform-c/ 7/18
7/22/2021 Custom TextBox Full - Rounded & Placeholder - WinForm, C # - RJ Code Advance

}
}

[ Category ( "RJ Code Advance" )]

public override Color ForeColor
{
get { return base . ForeColor ; }
set
{
base . ForeColor = value ;
textBox1. ForeColor = value ;
}
}

[ Category ( "RJ Code Advance" )]

public override Font Font
{
get { return base . Font ; }
set
{
base . Font = value ;
textBox1. Font = value ;
if ( this . DesignMode )
UpdateControlHeight () ;
}
}

[ Category ( "RJ Code Advance" )]

public string Texts
{
get
{
if ( isPlaceholder ) return "" ;
else return textBox1. Text ;
}
set
{
textBox1. Text = value ;
SetPlaceholder () ;
}
}

[ Category ( "RJ Code Advance" )]

public int BorderRadius
{
get { return borderRadius; }
set
{
if ( value > = 0 )
https://rjcodeadvance.com/custom-textbox-full-rounded-placeholder-winform-c/ 8/18
7/22/2021 Custom TextBox Full - Rounded & Placeholder - WinForm, C # - RJ Code Advance

{
borderRadius = value ;
this . Invalidate () ; // Redraw control
}
}
}

[ Category ( "RJ Code Advance" )]

public Color PlaceholderColor
{
get { return placeholderColor; }
set
{
placeholderColor = value ;
if ( isPlaceholder )
textBox1. ForeColor = value ;
}
}

[ Category ( "RJ Code Advance" )]

public string PlaceholderText
{
get { return placeholderText; }
set
{
placeholderText = value ;
textBox1. Text = "" ;
SetPlaceholder () ;
}
}
#endregion

6.- Override and extend event methods - UserControl

It will be necessary to override the OnPaint event  method  to draw the rectangular or
underlined style border, and the rounded corners of the custom text box, override the
OnResize event  method to set the proper height of the control each time it resizes  in
time of design. Finally override the OnLoad event  method  to give the final touch and set
the proper height at runtime.

#region - > Overridden methods

protected override void OnResize ( EventArgs e )
{
base . OnResize ( e ) ;
if ( this . DesignMode )
UpdateControlHeight () ;
}
protected override void OnLoad ( EventArgs e )
https://rjcodeadvance.com/custom-textbox-full-rounded-placeholder-winform-c/ 9/18
7/22/2021 Custom TextBox Full - Rounded & Placeholder - WinForm, C # - RJ Code Advance

{
base . OnLoad ( e ) ;
UpdateControlHeight () ;
}
protected override void OnPaint ( PaintEventArgs e )
{
base . OnPaint ( e ) ;
Graphics graph = e. Graphics ;

if ( borderRadius > 1 ) // Rounded TextBox

{
// - Fields
var rectBorderSmooth = this . ClientRectangle ;
var rectBorder = Rectangle. Inflate ( rectBorderSmooth, -borderSize,
int smoothSize = borderSize > 0 ? borderSize: 1 ;

using ( GraphicsPath pathBorderSmooth = GetFigurePath ( rectBorderSmo

using ( GraphicsPath pathBorder = GetFigurePath ( rectBorder, borderR
using ( Pen penBorderSmooth = new Pen ( this . Parent . BackColor , s
using ( Pen penBorder = new Pen ( borderColor, borderSize ))
{
// - Drawing
this . Region = new Region ( pathBorderSmooth ) ; // Set the roun
if ( borderRadius > 15 ) SetTextBoxRoundedRegion () ; // Set the
graph. SmoothingMode = SmoothingMode. AntiAlias ;
penBorder. Alignment = System. Drawing . Drawing2D . PenAlignment
if ( isFocused ) penBorder. Color = borderFocusColor;

if ( underlinedStyle ) // Line Style

{
// Draw border smoothing
graph. DrawPath ( penBorderSmooth, pathBorderSmooth ) ;
// Draw border
graph. SmoothingMode = SmoothingMode. None ;
graph. DrawLine ( penBorder, 0 , this . Height - 1 , this . W
}
else // Normal Style
{
// Draw border smoothing
graph. DrawPath ( penBorderSmooth, pathBorderSmooth ) ;
// Draw border
graph. DrawPath ( penBorder, pathBorder ) ;
}
}
}
else // Square / Normal TextBox
{
// Draw border
using ( Pen penBorder = new Pen ( borderColor, borderSize ))
https://rjcodeadvance.com/custom-textbox-full-rounded-placeholder-winform-c/ 10/18
7/22/2021 Custom TextBox Full - Rounded & Placeholder - WinForm, C # - RJ Code Advance

{
this . Region = new Region ( this . ClientRectangle ) ;
penBorder. Alignment = System. Drawing . Drawing2D . PenAlignment
if ( isFocused ) penBorder. Color = borderFocusColor;

if ( underlinedStyle ) // Line Style

graph. DrawLine ( penBorder, 0 , this . Height - 1 , this . W
else // Normal Style
graph. DrawRectangle ( penBorder, 0 , 0 , this . Width - 0.5
}
}
}
#endregion

7.- Create default event of the custom text box

The default event for a user control is the Load event  , and the default event for a text box
is the TextChanged event  . Therefore we must recreate this event in the custom text box
(RJTextBox), since the current default event is the Load event.

Note: To know what the default event of a control is, you just have to double click on the
control and the default event method will be created.

[ DefaultEvent ( "_TextChanged" )]
public partial class RJTextBox: UserControl
{
// Default Event
public event EventHandler _TextChanged;

// TextBox-> TextChanged event

private void textBox1_TextChanged ( object sender, EventArgs e )
{
if ( _TextChanged! = null )
_TextChanged. Invoke ( sender, e ) ;
}

8.- Change border color in focus & Placeholder mode

For that purpose it is necessary to change the value of the isFocused field when the text box
enters the focused state or loses focus, in the same way to set or remove the placeholder. So
we need to subscribe the Enter-Focus and Leave-Focus event of the text box and redraw the
control.

private void textBox1_Enter ( object sender, EventArgs e )

{
isFocused = true ;

https://rjcodeadvance.com/custom-textbox-full-rounded-placeholder-winform-c/ 11/18
7/22/2021 Custom TextBox Full - Rounded & Placeholder - WinForm, C # - RJ Code Advance

this . Invalidate () ;
RemovePlaceholder () ;
}
private void textBox1_Leave ( object sender, EventArgs e )
{
isFocused = false ;
this . Invalidate () ;
SetPlaceholder () ;
}

9.- Attach other common existing events

Finally, it is necessary to attach the existing and common events between the user control
(RJTextBox) and the text box (textBox1), for example the Click event, KeyPress and among
others (It is only recommended to attach the necessary events).

private void textBox1_Click ( object sender, EventArgs e )

{
this . OnClick ( e ) ;
}
private void textBox1_MouseEnter ( object sender, EventArgs e )
{
this . OnMouseEnter ( e ) ;
}
private void textBox1_MouseLeave ( object sender, EventArgs e )
{
this . OnMouseLeave ( e ) ;
}
private void textBox1_KeyPress ( object sender, KeyPressEventArgs e )
{
this . OnKeyPress ( e ) ;
}

Well that's it :), I hope you liked it and helped you understand the use of user controls
alongside other controls to make custom controls.

Until next time. 

downloads
SEE FULL CODE (GITHUB)

Watch video tutorial

Part 1:

https://rjcodeadvance.com/custom-textbox-full-rounded-placeholder-winform-c/ 12/18
7/22/2021 Custom TextBox Full - Rounded & Placeholder - WinForm, C # - RJ Code Advance

Custom TextBox - Border, Focus Color, Underlined Style - WinForm C#

Part 2:

Custom TextBox Full- Rounded, Placeholder, Border-Focus Color, Underlined & …

https://rjcodeadvance.com/custom-textbox-full-rounded-placeholder-winform-c/ 13/18
7/22/2021 Custom TextBox Full - Rounded & Placeholder - WinForm, C # - RJ Code Advance

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

Commentary

Name *

E-mail *

Web

Post the comment

Welcome to blog

Look for …

https://rjcodeadvance.com/custom-textbox-full-rounded-placeholder-winform-c/ 14/18
7/22/2021 Custom TextBox Full - Rounded & Placeholder - WinForm, C # - RJ Code Advance

Follow me






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

Layered Architecture

Database
MySQL
https://rjcodeadvance.com/custom-textbox-full-rounded-placeholder-winform-c/ 15/18
7/22/2021 Custom TextBox Full - Rounded & Placeholder - WinForm, C # - RJ Code Advance

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
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

https://rjcodeadvance.com/custom-textbox-full-rounded-placeholder-winform-c/ 16/18
7/22/2021 Custom TextBox Full - Rounded & Placeholder - WinForm, C # - RJ Code Advance

gustavo on Custom Button - Custom controls WinForm C #

_Nooker in Modern Form + Font Awesome Icons, WinForm, C # - VB.NET

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/custom-textbox-full-rounded-placeholder-winform-c/ 17/18
7/22/2021 Custom TextBox Full - Rounded & Placeholder - WinForm, C # - RJ Code Advance

https://rjcodeadvance.com/custom-textbox-full-rounded-placeholder-winform-c/ 18/18