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.DrawInteriororDigitalClockRenderer.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
ShowClockFrameto switch ClockFramevalues:RectangularFrame,CircularFrame,SquareFrameClockShapevalues: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
ClockRendererand overridingDrawInterior sendervalues:"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 |