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 |
1---2name: syncfusion-winforms-clock3description: Guide for implementing the Syncfusion WinForms Clock control in Windows Forms applications. Use this skill when the user needs to add a clock display, switch between analog and digital modes, customize clock appearance, apply custom renderers, configure frames or shapes for the digital clock, or freeze the clock at a fixed time. Covers ClockType, ClockFrame, ClockShape, ShowCustomTimeClock, ClockRenderer, and DigitalRenderer.4---56# Implementing the Syncfusion WinForms Clock Control78The 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.910## When to Use This Skill1112Use this skill when you need to:13- **Add a clock display** (analog or digital) to a WinForms form14- **Switch between analog and digital** modes via `ClockType`15- **Customize colors** — gradient background, hand colors, border, minute lines16- **Configure digital clock frames or shapes** — `ClockFrame`, `ClockShape`17- **Show a fixed or custom time** — `ShowCustomTimeClock` + `CustomTime`18- **Freeze the clock** at a specific time — `StopTimer`19- **Apply a custom renderer** — override `ClockRenderer.DrawInterior` or `DigitalClockRenderer.DrawDigitalClockFrame`2021## Component Overview2223| Property | Type | Description |24|---|---|---|25| `ClockType` | `ClockTypes` | `Analog` or `Digital` |26| `ShowCustomTimeClock` | `bool` | Enable custom (non-system) time display |27| `CustomTime` | `DateTime` | The custom time to display when `ShowCustomTimeClock` is true |28| `StopTimer` | `bool` | Freeze the clock at its current time |29| `IsTransparent` | `bool` | Transparent background (analog) |30| `Renderer` | `ClockRenderer` | Custom renderer for analog clock hands |31| `DigitalRenderer` | `DigitalClockRenderer` | Custom renderer for digital clock frame |3233## Documentation and Navigation Guide3435### Getting Started36📄 **Read:** [references/getting-started.md](references/getting-started.md)37- Assembly references and NuGet package setup38- Adding Clock via designer or programmatically39- Switching between analog and digital modes (`ClockType`)40- Displaying a fixed or custom time (`ShowCustomTimeClock`, `CustomTime`)41- Freezing the clock (`StopTimer`)4243### Appearance and Color Customization44📄 **Read:** [references/appearance-and-color.md](references/appearance-and-color.md)45- Gradient background colors (`StartGradientBackColor`, `EndGradientBackColor`)46- Hand colors (`HourHandColor`, `MinuteHandColor`, `SecondHandColor`)47- Minute line and border colors (`MinuteColor`, `BorderColor`)48- Hand thickness (`HourHandThickness`, `MinuteHandThickness`, `SecondHandThickness`, `MinuteThickness`)49- Show/hide toggles (`ShowAMorPM`, `ShowBorder`, `ShowMinute`, `ShowSecondHand`)50- Transparent background (`IsTransparent`)5152### Digital Clock53📄 **Read:** [references/digital-clock.md](references/digital-clock.md)54- Enabling digital mode55- Frames vs shapes — mutually exclusive; use `ShowClockFrame` to switch56- `ClockFrame` values: `RectangularFrame`, `CircularFrame`, `SquareFrame`57- `ClockShape` values: `Rectangle`, `RoundedRectangle`, `Circle`, `Square`, `RoundedSquare`58- Color customization: `ForeColor`, `BackgroundColor`, `BorderColor`59- Behavior: `DisplayDates`, `ShowHourDesignator`60- Custom time in digital mode61- Custom digital frame renderer (`DigitalRenderer`)6263### Custom Renderer (Analog)64📄 **Read:** [references/custom-renderer.md](references/custom-renderer.md)65- Subclassing `ClockRenderer` and overriding `DrawInterior`66- `sender` values: `"SecondsHand"`, `"MinutesHand"`, `"HoursHand"`, minute lines (`else`)67- Customizing pens with `LineCap`, `DashStyle`68- Assigning the renderer to the clock6970## Quick Start7172**C# — Analog clock, programmatic:**73```csharp74using Syncfusion.Windows.Forms.Tools;7576Clock clock1 = new Clock();77clock1.ClockType = ClockTypes.Analog;78clock1.StartGradientBackColor = Color.Black;79clock1.HourHandColor = Color.SkyBlue;80clock1.MinuteHandColor = Color.LightSeaGreen;81clock1.SecondHandColor = Color.LightSteelBlue;82this.Controls.Add(clock1);83```8485**VB.NET — Digital clock:**86```vb87Imports Syncfusion.Windows.Forms.Tools8889Dim clock1 As New Clock()90clock1.ClockType = ClockTypes.Digital91clock1.ShowClockFrame = True92clock1.ClockFrame = ClockFrames.RectangularFrame93Me.Controls.Add(clock1)94```9596## Common Use Cases9798| Scenario | Properties to Set |99|---|---|100| Show live analog clock | `ClockType = Analog` (default) |101| Show digital clock with frame | `ClockType = Digital`, `ShowClockFrame = true`, `ClockFrame = ...` |102| Freeze at a specific time | `StopTimer = true` |103| Show custom/fixed time | `ShowCustomTimeClock = true`, `CustomTime = new DateTime(...)` |104| Transparent analog overlay | `IsTransparent = true` |105| Custom hand rendering | Subclass `ClockRenderer`, set `clock1.Renderer` |106| Custom digital frame | Subclass `DigitalClockRenderer`, set `clock1.DigitalRenderer` |