Digital Clock in Windows Forms Clock

22 Jul 202611 minutes to read

The DigitalClock is implemented as an extension to the existing Windows Forms Clock control. It offers a richer UI experience than the existing clock and is capable of displaying the time as digital text.

You can use the DigitalClock in your application by simply switching the ClockType of the existing Clock control as described in the following sample code:

using Syncfusion.Windows.Forms.Tools;

this.clock1.ClockType = Syncfusion.Windows.Forms.Tools.ClockTypes.Digital;
Imports Syncfusion.Windows.Forms.Tools

Me.clock1.ClockType = Syncfusion.Windows.Forms.Tools.ClockTypes.Digital

Appearance

The DigitalClock offers a wide range of options to customize its appearance. It provides three built-in frames and five background shapes. Users can also use their own frames for the DigitalClock through the renderer.

Frames

To enable the background frames, set the ShowClockFrame property to true.

Rectangular frame

using Syncfusion.Windows.Forms.Tools;

this.clock1.ShowClockFrame = true;

this.clock1.ClockFrame = Syncfusion.Windows.Forms.Tools.ClockFrames.RectangularFrame;
Imports Syncfusion.Windows.Forms.Tools

Me.clock1.ShowClockFrame = True
Me.clock1.ClockFrame = Syncfusion.Windows.Forms.Tools.ClockFrames.RectangularFrame

Rectangular frame

Circular frame

using Syncfusion.Windows.Forms.Tools;

this.clock1.ShowClockFrame = true;

this.clock1.ClockFrame = Syncfusion.Windows.Forms.Tools.ClockFrames.CircularFrame;
Imports Syncfusion.Windows.Forms.Tools

Me.clock1.ShowClockFrame = True
Me.clock1.ClockFrame = Syncfusion.Windows.Forms.Tools.ClockFrames.CircularFrame

Circular frame

Square frame

using Syncfusion.Windows.Forms.Tools;

this.clock1.ShowClockFrame = true;

this.clock1.ClockFrame = Syncfusion.Windows.Forms.Tools.ClockFrames.SquareFrame;
Imports Syncfusion.Windows.Forms.Tools

Me.clock1.ShowClockFrame = True
Me.clock1.ClockFrame = Syncfusion.Windows.Forms.Tools.ClockFrames.SquareFrame

Square frame

Shapes

To enable background shapes in the Clock control, set the ShowClockFrame property to false to enable the background shapes.

Rectangular shape

using Syncfusion.Windows.Forms.Tools;

this.clock1.ShowClockFrame = false;

this.clock1.ClockShape = Syncfusion.Windows.Forms.Tools.ClockShapes.Rectangle;
Imports Syncfusion.Windows.Forms.Tools

Me.clock1.ShowClockFrame = False
Me.clock1.ClockShape = Syncfusion.Windows.Forms.Tools.ClockShapes.Rectangle

Shapes

RoundedRectangular shape

using Syncfusion.Windows.Forms.Tools;

this.clock1.ShowClockFrame = false;

this.clock1.ClockShape = Syncfusion.Windows.Forms.Tools.ClockShapes.RoundedRectangle;
Imports Syncfusion.Windows.Forms.Tools

Me.clock1.ShowClockFrame = False
Me.clock1.ClockShape = Syncfusion.Windows.Forms.Tools.ClockShapes.RoundedRectangle

RoundedRectangular shape

Circular shape

using Syncfusion.Windows.Forms.Tools;

this.clock1.ShowClockFrame = false;

this.clock1.ClockShape = Syncfusion.Windows.Forms.Tools.ClockShapes.Circle;
Imports Syncfusion.Windows.Forms.Tools

Me.clock1.ShowClockFrame = False
Me.clock1.ClockShape = Syncfusion.Windows.Forms.Tools.ClockShapes.Circle

Circular shape

Square shape

using Syncfusion.Windows.Forms.Tools;

this.clock1.ShowClockFrame = false;

this.clock1.ClockShape = Syncfusion.Windows.Forms.Tools.ClockShapes.Square;
Imports Syncfusion.Windows.Forms.Tools

Me.clock1.ShowClockFrame = False
Me.clock1.ClockShape = Syncfusion.Windows.Forms.Tools.ClockShapes.Square

Square shape

RoundedSquare shape

using Syncfusion.Windows.Forms.Tools;

this.clock1.ShowClockFrame = false;

this.clock1.ClockShape = Syncfusion.Windows.Forms.Tools.ClockShapes.RoundedSquare;
Imports Syncfusion.Windows.Forms.Tools

Me.clock1.ShowClockFrame = False
Me.clock1.ClockShape = Syncfusion.Windows.Forms.Tools.ClockShapes.RoundedSquare

RoundedSquare shape

Color customizations

Foreground color

The foreground color for the DigitalClock can be changed using the ForeColor property. This color will be reflected in the text of the control.

using Syncfusion.Windows.Forms.Tools;

this.clock1.ForeColor = System.Drawing.Color.Yellow;
Imports Syncfusion.Windows.Forms.Tools

Me.clock1.ForeColor = System.Drawing.Color.Yellow

Foreground color

Background color

The background color for the DigitalClock can be changed using the BackgroundColor property. This color will be reflected in the background of the control.

using Syncfusion.Windows.Forms.Tools;

this.clock1.BackgroundColor = System.Drawing.SystemColors.ActiveCaption;

this.clock1.ForeColor = System.Drawing.Color.Yellow;
Imports Syncfusion.Windows.Forms.Tools

Me.clock1.BackgroundColor = System.Drawing.SystemColors.ActiveCaption

Me.clock1.ForeColor = System.Drawing.Color.Yellow

Background color

Border color

The border color for the control will be reflected only when the control is assigned with the background shapes as follows:

using Syncfusion.Windows.Forms.Tools;

this.clock1.BorderColor = System.Drawing.Color.Yellow;    

this.clock1.BackgroundColor = System.Drawing.SystemColors.ActiveCaption;

this.clock1.ForeColor = System.Drawing.Color.Yellow;
Imports Syncfusion.Windows.Forms.Tools

Me.clock1.BorderColor = System.Drawing.Color.Yellow

Me.clock1.BackgroundColor = System.Drawing.SystemColors.ActiveCaption

Me.clock1.ForeColor = System.Drawing.Color.Yellow

Border color

Behavior

Show or hide days of the week

To display or hide the weekdays and current date in the DigitalClock, the DisplayDates property can be used.

using Syncfusion.Windows.Forms.Tools;

this.clock1.DisplayDates = true;
Imports Syncfusion.Windows.Forms.Tools

Me.clock1.DisplayDates = True

Show the days of the week

Hide days of the week

Show or hide the hour designator

To display or hide the hour designator (AM and PM) in the DigitalClock, the ShowHourDesignator property can be used.

using Syncfusion.Windows.Forms.Tools;     

this.clock1.ShowHourDesignator = false;
Imports Syncfusion.Windows.Forms.Tools

Me.clock1.ShowHourDesignator = False

Hide the hour designator

Show the hour designator

Custom time Clock

To enable the custom time, set the ShowCustomTimeClock property to true.

Input formats

To enable the custom time, set the ShowCustomTimeClock property to true, and the custom time should be in DateTime format.

using Syncfusion.Windows.Forms.Tools;

this.clock1.ShowCustomTimeClock = true;
this.clock1.CustomTime = new System.DateTime(2013, 9, 14, 10, 10, 15, 0);
Imports Syncfusion.Windows.Forms.Tools

Me.clock1.ShowCustomTimeClock = True
Me.clock1.CustomTime = New Date(2013, 9, 14, 10, 10, 15, 0)

Custom time Clock

Applying custom renderer to the DigitalClock control

The following code sample can be utilized for applying a custom renderer to the DigitalClock.

using Syncfusion.Windows.Forms.Tools;

DigitalRenderer render = new DigitalRenderer();

this.clock1.DigitalRenderer = render;

public class DigitalRenderer : DigitalClockRenderer

{

    public override void DrawDigitalClockFrame(Graphics g, Image newImage, Clock clock)
    {

        Image image =Image.FromFile(@"D:\CustomClock.PNG");

        base.DrawDigitalClockFrame(g, image, clock);

    }
}
Imports Syncfusion.Windows.Forms.Tools

Dim render As DigitalRenderer = New DigitalRenderer
Me.clock1.DigitalRenderer = render
Public Class DigitalRenderer
    Inherits DigitalClockRenderer

    Public Overrides Sub DrawDigitalClockFrame(ByVal g As Graphics, ByVal newImage As Image, ByVal clock As Clock)
        Dim image As Image = Image.FromFile("G:\CustomClock.PNG")
        MyBase.DrawDigitalClockFrame(g, image, clock)
    End Sub
End Class

Custom clock