syncfusion-winforms-clock

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing the Syncfusion WinForms Clock Control

实现Syncfusion WinForms Clock控件

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.

Syncfusion

Clock

控件（

Syncfusion.Windows.Forms.Tools.Clock

）是一个仅用于展示的控件，可显示为模拟或数字时钟样式的当前时间。它支持丰富的视觉自定义能力：指针颜色与粗细、渐变背景、数字模式下的边框和形状、透明度，以及完全可替换的渲染管线。

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

DigitalClockRenderer.DrawDigitalClockFrame

当你需要完成以下操作时可使用本指南：

为WinForms窗体添加时钟展示（模拟或数字样式）
通过
```
ClockType
```
在模拟和数字模式之间切换
自定义颜色：渐变背景、指针颜色、边框、分钟刻度线
配置数字时钟边框或形状：
```
ClockFrame
```
、
```
ClockShape
```
展示固定或自定义时间：
```
ShowCustomTimeClock
```
+
```
CustomTime
```
将时钟固定在特定时间：
```
StopTimer
```

应用自定义渲染器：重写

ClockRenderer.DrawInterior

或

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

属性	类型	描述
`ClockType`	`ClockTypes`	可选值为 `Analog` （模拟）或 `Digital` （数字）
`ShowCustomTimeClock`	`bool`	启用自定义（非系统）时间展示
`CustomTime`	`DateTime`	当 `ShowCustomTimeClock` 为true时展示的自定义时间
`StopTimer`	`bool`	将时钟固定在当前时间
`IsTransparent`	`bool`	透明背景（仅模拟时钟生效）
`Renderer`	`ClockRenderer`	模拟时钟指针的自定义渲染器
`DigitalRenderer`	`DigitalClockRenderer`	数字时钟边框的自定义渲染器

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

📄 阅读： references/getting-started.md

程序集引用与NuGet包配置
通过设计器或代码添加Clock控件
在模拟和数字模式之间切换（
```
ClockType
```
）
展示固定或自定义时间（
```
ShowCustomTimeClock
```
、
```
CustomTime
```
）
固定时钟时间（
```
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
```
)

📄 阅读： references/appearance-and-color.md

渐变背景颜色（

StartGradientBackColor

、

EndGradientBackColor

）

指针颜色（

HourHandColor

、

MinuteHandColor

、

SecondHandColor

）

分钟刻度线与边框颜色（
```
MinuteColor
```
、
```
BorderColor
```
）

指针粗细（

HourHandThickness

、

MinuteHandThickness

、

SecondHandThickness

、

MinuteThickness

）

显示/隐藏开关（

ShowAMorPM

、

ShowBorder

、

ShowMinute

、

ShowSecondHand

）

透明背景（
```
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
```
)

📄 阅读： references/digital-clock.md

启用数字模式
边框与形状互斥，可通过
```
ShowClockFrame
```
切换

ClockFrame

可选值：

RectangularFrame

、

CircularFrame

、

SquareFrame

ClockShape

可选值：

Rectangle

、

RoundedRectangle

、

Circle

、

Square

、

RoundedSquare

颜色自定义：
```
ForeColor
```
、
```
BackgroundColor
```
、
```
BorderColor
```
行为配置：
```
DisplayDates
```
、
```
ShowHourDesignator
```
数字模式下的自定义时间
自定义数字边框渲染器（
```
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

📄 阅读： references/custom-renderer.md

继承
```
ClockRenderer
```
并重写
```
DrawInterior
```
方法
```
sender
```
可选值：
```
"SecondsHand"
```
、
```
"MinutesHand"
```
、
```
"HoursHand"
```
，其余值对应分钟刻度线
使用
```
LineCap
```
、
```
DashStyle
```
自定义画笔
为时钟控件指定渲染器

Quick Start

快速开始

C# — Analog clock, programmatic:

csharp

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)

C# — 模拟时钟，代码实现：

csharp

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 — 数字时钟：

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`

场景	需要设置的属性
展示实时模拟时钟	`ClockType = Analog` （默认值）
展示带边框的数字时钟	`ClockType = Digital` 、 `ShowClockFrame = true` 、 `ClockFrame = ...`
固定在特定时间	`StopTimer = true`
展示自定义/固定时间	`ShowCustomTimeClock = true` 、 `CustomTime = new DateTime(...)`
透明模拟时钟浮层	`IsTransparent = true`
自定义指针渲染	继承 `ClockRenderer` ，设置 `clock1.Renderer`
自定义数字边框	继承 `DigitalClockRenderer` ，设置 `clock1.DigitalRenderer`