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

Update your drivers in Windows

Manage your drivers efficiently. Quickly repair, clean and boost you

PC Helpsoft

Custom DateTimePicker - Custom

controls WinForm C #
by RJ Code Advance

https://rjcodeadvance.com/custom-datetimepicker-custom-controls-winform-c/ 1/12
7/22/2021 Custom DateTimePicker - Custom controls WinForm C # - RJ Code Advance

Hi :), this time we will make a custom DateTimePicker, as most of you know, this is a native
Windows control and it doesn't have a lot of appearance customization options, limiting
ourselves to just one style and layout. So today I will teach you to break those limits.

Well let's start with the tutorial.

1.- Add the icons

First  we will add the icons (CalendarIconDark & ​CalendarIconWhite) to the project
resources, you can download the icons from any platform , or you can download the icons
used in this project through the following button.

DOWNLOAD ICONS

https://rjcodeadvance.com/custom-datetimepicker-custom-controls-winform-c/ 2/12
7/22/2021 Custom DateTimePicker - Custom controls WinForm C # - RJ Code Advance

2.- Create class

As usual, we will add a class  for the custom DateTimePicker in our Windows Form
project. They can put the name they prefer, in my case RJDatePicker .

3.- Import Windows.Form and Drawing library

To make any custom control, it is necessary to import the  Windows Forms  library and the
drawing library ( Drawing ).

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

4.- Inherit from the traditional DateTimePicker control

You can inherit a UserControl, but in this case we will simply  inherit from the
DateTimePicker control from the Windows Form library  and thus extend its
functionality and modify the appearance. In addition, in this way the control is much lighter
and cheaper in runtime, and also easy and fast to customize through the Paint event.

public class RJDatePicker: DateTimePicker

https://rjcodeadvance.com/custom-datetimepicker-custom-controls-winform-c/ 3/12
7/22/2021 Custom DateTimePicker - Custom controls WinForm C # - RJ Code Advance

5.- Define fields

In the class, we will declare fields for the  button's appearance and assign their default
values,  for example: background color, text color, border color, and border size. We will also
need other fields to store other values ​of the control, such as, a field to obtain or establish if
the calendar is displayed or not.

// Fields
// -> Appearance
private Color skinColor = Color. MediumSlateBlue ;
private Color textColor = Color. White ;
private Color borderColor = Color. PaleVioletRed ;
private int borderSize = 0 ;

// -> Other Values

private bool droppedDown = false ;
private Image calendarIcon = Properties. Resources . calendarWhite ;
private RectangleF iconButtonArea;
private const int calendarIconWidth = 34 ;
private const int arrowIconWidth = 17 ;

6.- Generate properties

We generate properties to expose the appearance fields, defined previously.

// Properties
public Color SkinColor
{
get { return skinColor; }
set
{
skinColor = value ;
if ( skinColor. GetBrightness () > = 0.8 F )
calendarIcon = Properties. Resources . calendarDark ;
else calendarIcon = Properties. Resources . calendarWhite ;
this . Invalidate () ;
}
}

public Color TextColor

{
get { return textColor; }
set
{
https://rjcodeadvance.com/custom-datetimepicker-custom-controls-winform-c/ 4/12
7/22/2021 Custom DateTimePicker - Custom controls WinForm C # - RJ Code Advance

textColor = value ;
this . Invalidate () ;
}
}

public Color BorderColor

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

public int BorderSize

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

7.- Builder
In the constructor, we specify the style and behavior of the control. In this case, the control
will be painted by the user and not by the operating system. We also set the minimum
size of the control, in this way we can change the height of the DateTimePicker , you
can also do it later from the properties box.

//Builder
public RJDatePicker ()
{
this . SetStyle ( ControlStyles. UserPaint , true ) ;
this . MinimumSize = new Size ( 0 , 35 ) ;
this . Font = new Font ( this . Font . Name , 9.5 F ) ;
}

8.- Cancel Behavior and Painting Events

It will be necessary to override the DropDown and CloseUp event method , to set the state
of the drop-down calendar. Override the KeyPress event method to indicate that if the
event was handled, this is to avoid changing the value of the DateTimePicker with the
number keys. Override the Paint event method to redraw the control, and finally override
the HandleCreated and MouseMove event method to change the mouse pointer cursor
https://rjcodeadvance.com/custom-datetimepicker-custom-controls-winform-c/ 5/12
7/22/2021 Custom DateTimePicker - Custom controls WinForm C # - RJ Code Advance

when over the icon button of the DateTimePicker, since it is not possible to tell if the pointer
It is above the dropdown icon, because the size of the DateTimePicker icon button varies
depending on the width of the control.

// Overridden methods
protected override void OnDropDown ( EventArgs eventargs )
{
base . OnDropDown ( eventargs ) ;
droppedDown = true ;
}
protected override void OnCloseUp ( EventArgs eventargs )
{
base . OnCloseUp ( eventargs ) ;
droppedDown = false ;
}
protected override void OnKeyPress ( KeyPressEventArgs e )
{
base . OnKeyPress ( e ) ;
and. Handled = true ;
}
protected override void OnPaint ( PaintEventArgs e )
{
using ( Graphics graphics = this . CreateGraphics ())
using ( Pen penBorder = new Pen ( borderColor, borderSize ))
using ( SolidBrush skinBrush = new SolidBrush ( skinColor ))
using ( SolidBrush openIconBrush = new SolidBrush ( Color. FromArgb ( 50
using ( SolidBrush textBrush = new SolidBrush ( textColor ))
using ( StringFormat textFormat = new StringFormat ())
{
RectangleF clientArea = new RectangleF ( 0 , 0 , this . Width - 0.5 F
RectangleF iconArea = new RectangleF ( clientArea. Width - calendarIc
penBorder. Alignment = PenAlignment. Inset ;
textFormat. LineAlignment = StringAlignment. Center ;

// Draw surface
graphics. FillRectangle ( skinBrush, clientArea ) ;
// Draw text
graphics. DrawString ( "" + this . Text , this . Font , textBrush, cl
// Draw open calendar icon highlight
if ( droppedDown == true ) graphics. FillRectangle ( openIconBrush, i
https://rjcodeadvance.com/custom-datetimepicker-custom-controls-winform-c/ 6/12
7/22/2021 Custom DateTimePicker - Custom controls WinForm C # - RJ Code Advance

// Draw border
if ( borderSize > = 1 ) graphics. DrawRectangle ( penBorder, clientAr
// Draw icon
graphics. DrawImage ( calendarIcon, this . Width - calendarIcon. Widt

}
}
protected override void OnHandleCreated ( EventArgs e )
{
base . OnHandleCreated ( e ) ;
int iconWidth = GetIconButtonWidth () ;
iconButtonArea = new RectangleF ( this . Width - iconWidth, 0 , iconWidth
}
protected override void OnMouseMove ( MouseEventArgs e )
{
base . OnMouseMove ( e ) ;
if ( iconButtonArea. Contains ( e. Location ))
this . Cursor = Cursors. Hand ;
else this . Cursor = Cursors. Default ;
}

If you don't like overriding event methods, you can subscribe to events from the constructor.
I did it that way to speed up the video tutorial.

9.- Define method to obtain the width of the icon button

We will create a private method to get the width of the icon button so we can change the
mouse pointer cursor.

// Private methods
private int GetIconButtonWidth ()
{
int textWidh = TextRenderer. MeasureText ( this . Text , this . Font ) .
if ( textWidh < = this . Width - ( calendarIconWidth + 20 ))
return calendarIconWidth;
else return arrowIconWidth;
}

That's it, however, some things still need to be optimized, for example, it does not have
support to change the time, with a little more work you can add this functionality or simply
create another time selector control, and if you see any problems, you can adjust the values ​
or add it.

SEE FULL CODE

https://rjcodeadvance.com/custom-datetimepicker-custom-controls-winform-c/ 7/12
7/22/2021 Custom DateTimePicker - Custom controls WinForm C # - RJ Code Advance

Video-tutorial

Custom DateTimePicker - WinForm C#

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

Commentary

Name *

https://rjcodeadvance.com/custom-datetimepicker-custom-controls-winform-c/ 8/12
7/22/2021 Custom DateTimePicker - Custom controls WinForm C # - RJ Code Advance

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/custom-datetimepicker-custom-controls-winform-c/ 9/12
7/22/2021 Custom DateTimePicker - Custom controls WinForm C # - RJ Code Advance

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/custom-datetimepicker-custom-controls-winform-c/ 10/12
7/22/2021 Custom DateTimePicker - 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

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/custom-datetimepicker-custom-controls-winform-c/ 11/12
7/22/2021 Custom DateTimePicker - Custom controls WinForm C # - RJ Code Advance

Terms and Conditions Privacy Policy Cookies policy






© 2021 RJ Code Advance - All Rights Reserved

https://rjcodeadvance.com/custom-datetimepicker-custom-controls-winform-c/ 12/12