## Code example: Analog Clock – custom control for beginners

### 29 בדצמבר 2007

one comment

Analog clock is very cool feature, most windows users like analog clocks, we can find them in Google-Gadgets and other desktop programs. I've written custom control a few years ago (in .Net 1.1) and rediscovered it two weeks ago in some of my projects. It is very simple (can be extended and improved) and provides clear example how to build custom controls in .Net (C#).

Challenge for those who moved to WPF: if you have some time and motivation, please write analog clock in WPF and publish the code (you can send it to my email or post in your Blog), developer that will provide working clock in WPF will get cool "Merit Certificate" in my Blog and the appreciation of the developers' community 🙂

This how it looks in VS Designer (you can see both analog and digital styles) :

I've made custom control "ClockControl" what overrides "OnPaint" method for drawing of clock.
"ClockControl" uses very simple trigonometry functions to calculate the positions of clock hands according to current time. Developer can drag and drop this component from VS tool bar into form or other control container. Each clock property can be accessed from property panel.

 Each small movement of hand is calculated by: Seconds: 360 / 60 = 6 deg. Minutes: 360 / 60 = 6 deg. Hours: 360 / 12 = 30 deg. Point (X1, Y1) is known point (0, 0) in axes coordinates and (Width/2, Height/2) in control coordinates. Point (X2, Y2) should be calculated by using the angle of hand according to PC clock. (See calculations in "Draw…" methods)

Class definition table:

 Member Name Comments ClockEnabled (Boolean) Enables the timer of the clock, each tick moves hands (redraws the control) ClockInterval (Integer) Timer interval in milliseconds ColorSeconds (Color) The color of seconds' hand ColorHours (Color) The color of hours' hand ColorMinutes (Color) The color of minutes' hand Radius (Integer) The radius of clock circle Style (Enum) Defines current style of the clock SwitchStyleOnDoubleClick (Boolean) Flag for double-click option to switch clock style between analog and digital display Time (Date) Current time DrawAnalog (void) Draws analog clock graphics, calls methods: DrawSeconds, DrawMinutes, DrawHours, DrawClockCircle, DrawCaptions DrawDigital (void) Draws digits of digital clock GetX (Integer) Returns 'x' coordinate by given radius and angle (see description) GetY (Integer) Returns 'y' coordinate by given radius and angle (see description) InitClock (void) Initializes the instance of the control InitGrafix (void) Initializes pens, brushes and other graphic objects for drawing SetDrawingStyle (void) Sets custom drawing style parameters ClockTick (delTime) Event that raised by clock on each timer's tick (very useful for external use)

This control is very simple in everyday use, can be extended with new properties like: additional captions "1", "2", "4", "5", "7", "8", "10", "11", existing trigonometric method can be used to calculate theirs positions; new properties like "hand width" can be added also, gradient background with glow like in Google-Gadgets; digital clock can be improved too.  Control can be used as visual timer like "System.Windows.Forms.Timer".

Any comments and code for WPF-Clock will be accepted with a big smile 🙂