Digital Clock in Windows Forms Clock

The DigitalClock is implemented as an extension to the existing Clock control in the UI controls, but 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:

this.clock1.ClockType = Syncfusion.Windows.Forms.Tools.ClockTypes.Digital;
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, the DigitalClock should be enabled with the property ShowClockFrame set to true.

Rectangular frame

this.clock1.ShowClockFrame = true;

    this.clock1.ClockFrame = Syncfusion.Windows.Forms.Tools.ClockFrames.RectangularFrame;
Me.clock1.ShowClockFrame = true
    Me.clock1.ClockFrame = Syncfusion.Windows.Forms.Tools.ClockFrames.RectangularFrame

Rectangular frame

Circular frame

this.clock1.ShowClockFrame = true;

    this.clock1.ClockFrame = Syncfusion.Windows.Forms.Tools.ClockFrames.CircularFrame;
Me.clock1.ShowClockFrame = true
Me.clock1.ClockFrame = Syncfusion.Windows.Forms.Tools.ClockFrames.CircularFrame

Circular frame

Square frame

this.clock1.ShowClockFrame = true;

    this.clock1.ClockFrame = Syncfusion.Windows.Forms.Tools.ClockFrames.SquareFrame;
Me.clock1.ShowClockFrame = true
Me.clock1.ClockFrame = Syncfusion.Windows.Forms.Tools.ClockFrames.SquareFrame

Square frame

Shapes

To enable background shapes in the Clock control, the ShowClockFrame property should be disabled so that the control can support rendering the background shapes.

Rectangular shape

this.clock1.ShowClockFrame = false;

    this.clock1.ClockShape = Syncfusion.Windows.Forms.Tools.ClockShapes.Rectangle;
Me.clock1.ShowClockFrame = False
Me.clock1.ClockFrame = Syncfusion.Windows.Forms.Tools.ClockFrames.CircularFrame

Shapes

RoundedRectangular shape

this.clock1.ShowClockFrame = false;

    this.clock2.ClockShape = Syncfusion.Windows.Forms.Tools.ClockShapes.RoundedRectangle;
Me.clock1.ShowClockFrame = False
Me.clock1.ClockFrame = Syncfusion.Windows.Forms.Tools.ClockShapes.CircularFrame

RoundedRectangular shape

Circular shape

this.clock1.ShowClockFrame = false;

  this.clock2.ClockShape = Syncfusion.Windows.Forms.Tools.ClockShapes.Circle;
Me.clock1.ShowClockFrame = false
Me.clock1.ClockShape = Syncfusion.Windows.Forms.Tools.ClockShapes.Circle

Circular shape

Square shape

this.clock1.ShowClockFrame = false;

  this.clock1.ClockShape = Syncfusion.Windows.Forms.Tools.ClockShapes.Square;
Me.clock1.ShowClockFrame = false
Me.clock1.ClockShape = Syncfusion.Windows.Forms.Tools.ClockShapes.Square

Square shape

RoundedSquare shape

this.clock1.ShowClockFrame = false;

  this.clock1.ClockShape = Syncfusion.Windows.Forms.Tools.ClockShapes.RoundedSquare;
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.

this.clock1.ForeColor = System.Drawing.Color.Yellow;
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.

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

    this.clock1.ForeColor = System.Drawing.Color.Yellow;
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:

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

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

    this.clock1.ForeColor = System.Drawing.Color.Yellow;
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 week days and current date in the DigitalClock, the DisplayDates property can be used.

this.clock1.DisplayDates = true;
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.

this.clock1.ShowHourDesignator = false;
Me.clock1.ShowHourDesignator = false

Hide the hour designator

Show the hour designator

Custom time Clock

To enable the custom time, the DigitalClock should be enabled with the property ShowCustomTimeClock set as true.

Input formats

To enable the custom time, the clock control should be enabled with the ShowCustomTimeClock property set as true, and the custom time should be in DateTime format.

this.clock1.ShowCustomTimeClock = true;

          this.clock1.CustomTime = new System.DateTime(2013, 9, 14, 10, 10, 15, 0);
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.

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

        }

    }
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