syncfusion-winforms-clock

Implementing the Syncfusion WinForms Clock Control

The Syncfusion Clock control (Syncfusion.Windows.Forms.Tools.Clock) is a display-only control that shows the current time as either an analog or digital clock. It supports extensive visual customization — hand colors and thickness, gradient backgrounds, frames and shapes for digital mode, transparency, and a fully replaceable rendering pipeline.

When to Use This Skill

Use this skill when you need to:

• Add a clock display (analog or digital) to a WinForms form
• Switch between analog and digital modes via ClockType
• Customize colors — gradient background, hand colors, border, minute lines
• Configure digital clock frames or shapes — ClockFrame, ClockShape
• Show a fixed or custom time — ShowCustomTimeClock + CustomTime
• Freeze the clock at a specific time — StopTimer
• Apply a custom renderer — override ClockRenderer.DrawInterior or DigitalClockRenderer.DrawDigitalClockFrame

Component Overview

Property	Type	Description
ClockType	ClockTypes	Analog or Digital
ShowCustomTimeClock	bool	Enable custom (non-system) time display
CustomTime	DateTime	The custom time to display when ShowCustomTimeClock is true
StopTimer	bool	Freeze the clock at its current time
IsTransparent	bool	Transparent background (analog)
Renderer	ClockRenderer	Custom renderer for analog clock hands
DigitalRenderer	DigitalClockRenderer	Custom renderer for digital clock frame

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Assembly references and NuGet package setup
• Adding Clock via designer or programmatically
• Switching between analog and digital modes (ClockType)
• Displaying a fixed or custom time (ShowCustomTimeClock, CustomTime)
• Freezing the clock (StopTimer)

Appearance and Color Customization

📄 Read: references/appearance-and-color.md

• Gradient background colors (StartGradientBackColor, EndGradientBackColor)
• Hand colors (HourHandColor, MinuteHandColor, SecondHandColor)
• Minute line and border colors (MinuteColor, BorderColor)
• Hand thickness (HourHandThickness, MinuteHandThickness, SecondHandThickness, MinuteThickness)
• Show/hide toggles (ShowAMorPM, ShowBorder, ShowMinute, ShowSecondHand)
• Transparent background (IsTransparent)

Digital Clock

📄 Read: references/digital-clock.md

• Enabling digital mode
• Frames vs shapes — mutually exclusive; use ShowClockFrame to switch
• ClockFrame values: RectangularFrame, CircularFrame, SquareFrame
• ClockShape values: Rectangle, RoundedRectangle, Circle, Square, RoundedSquare
• Color customization: ForeColor, BackgroundColor, BorderColor
• Behavior: DisplayDates, ShowHourDesignator
• Custom time in digital mode
• Custom digital frame renderer (DigitalRenderer)

Custom Renderer (Analog)

📄 Read: references/custom-renderer.md

• Subclassing ClockRenderer and overriding DrawInterior
• sender values: "SecondsHand", "MinutesHand", "HoursHand", minute lines (else)
• Customizing pens with LineCap, DashStyle
• Assigning the renderer to the clock

Quick Start

C# — Analog clock, programmatic:

using Syncfusion.Windows.Forms.Tools;

Clock clock1 = new Clock();
clock1.ClockType = ClockTypes.Analog;
clock1.StartGradientBackColor = Color.Black;
clock1.HourHandColor = Color.SkyBlue;
clock1.MinuteHandColor = Color.LightSeaGreen;
clock1.SecondHandColor = Color.LightSteelBlue;
this.Controls.Add(clock1);

VB.NET — Digital clock:

Imports Syncfusion.Windows.Forms.Tools

Dim clock1 As New Clock()
clock1.ClockType = ClockTypes.Digital
clock1.ShowClockFrame = True
clock1.ClockFrame = ClockFrames.RectangularFrame
Me.Controls.Add(clock1)

Common Use Cases

Scenario	Properties to Set
Show live analog clock	ClockType = Analog (default)
Show digital clock with frame	ClockType = Digital, ShowClockFrame = true, ClockFrame = ...
Freeze at a specific time	StopTimer = true
Show custom/fixed time	ShowCustomTimeClock = true, CustomTime = new DateTime(...)
Transparent analog overlay	IsTransparent = true
Custom hand rendering	Subclass ClockRenderer, set clock1.Renderer
Custom digital frame	Subclass DigitalClockRenderer, set clock1.DigitalRenderer