Introduction
Here, an analog clock has been created with a VB.NET control library. It is a clock control which has almost all the functionality that this type of control can have, and it is fully customizable. Since this is a control library, you can use it in C++, C#, J#, and VB.NET projects in the .NET environment.
I created this control to help someone in VB Forums. At the beginning, it was a very simple clock, but then it became somewhat advanced after I added many properties, events, and a functionality that makes the clock very flexible.
Adding the Component
To use the control, you just need to add it into the VS.NET Toolbox. Right click in the Toolbox area, and select the "Choose Items" menu item. It will then open the "Choose Toolbox Item" window. You go to the directory that contains the "AnalogClockLib.dll" file and select it, then click the OK button. This will add the control onto the Toolbox.
Finally, you drag and drop the control onto your forms. Also, in order to see the descriptions of the properties or methods in the Code Designer, you should copy the "AnalogClockLib.xml" file into your project's folder.
Background
The clock control is a Windows UserControl. Almost all the elements of the clock have been constructed (the core of the element) with the GraphicsPath
data type. They contain a member variable Base-Path
which is a GraphicsPath
of the element. These Base-Path
s are used differently for each element. For example, the marker's Base-Path
represents a GraphicsPath
constructed at 12 hour position and than rotated using a Matrix
object. Since it is rotated only once, there is no need fore any other helper objects. The clock's hands have two member variables of type GraphicsPath
: Base-Path
and Shift-Path
. The Base-Path
of the hands are always positioned at 12 o' clock, and only reshaped if the element's shape (width, length, or style) is modified. On the other hand, the Shift-Path
is the actual GrapicsPath
of the hand at any given time. Shift-Path
is the copy of the rotated Base-Path
.
Using the Code
Although you can do almost anything with this control, I will show you only how to paint the hour-hand of the clock with a PathGradientBrush
. Note, in this fashion, you can paint the elements with any brush.
It is very nice to see the clock hand's gradient, so here is how you can do that. Basically, you set the Brush
property of the hands to a newly created gradient brush object in the hands' paint event.
Private Sub Clock1_HourHandPainting(ByVal sender As Object, _
ByVal e As AnalogClock.PaintEventArgs) Handles Clock1.HourHandPainting
If Me.Clock1.HourHand.Path.PointCount > 2 Then
Dim br As New Drawing2D.PathGradientBrush(Me.Clock1.HourHand.Path)
br.CenterColor = Color.White
br.SurroundColors = New Color() {Me.Clock1.HourHand.Color}
e.Brush = br
br.Dispose()
End If
End Sub
In some situations, you may need to set the clock time to a start time. For this, we need to do a little bit of calculation and set the UtcOffset
property accordingly. Here is how we can do that:
Private Sub Form1_Load(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles MyBase.Load
Dim cdt As DateTime = CDate("#17:20:35#")
Dim utcDt As DateTime = DateTime.UtcNow
Me.Clock1.UtcOffset = New TimeSpan(0, cdt.Hour - utcDt.Hour, _
cdt.Minute - utcDt.Minute, cdt.Second - utcDt.Second)
End Sub
Sometimes people ask me why the clock is one hour off after daylight savings or how we can be sure that clock shows the correct time always. Well, if this is the case with you, then you need to make sure that the clock's UtcOffset
is always accurate. This is how you can do it:
Private Sub Form1_Load(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles MyBase.Load
Me.Clock1.UtcOffset = TimeZone.CurrentTimeZone.GetUtcOffset(DateTime.Now)
End Sub
Private Sub Clock1_TimeChanged(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles Clock1.TimeChanged
Me.Clock1.UtcOffset = TimeZone.CurrentTimeZone.GetUtcOffset(DateTime.Now)
End Sub
For more examples, check the demo project.
Analog Clock Control Information
History
- 1.0.0.0 -- Original version posted
- 1.0.2813.38699 -- Some minor changes to the number and marker styles. Also. the UTC offset values range is changed that accepts values from -23:00:00 to 23:00:00.
- 1.0.2847.27310 -- This update adds a property that can be used to get/set the clock's frame line color. Also, there are some corrections to the clock. The update is recommended.
- 1.0.2917.23783 -- A small bug fix
- 1.0.3002.36694 -- Added minute marker width property
- 1.0.3223.6598 -- This update includes major changes to the implementation of the clock. If you liked the previous versions of the analog clock, then you will love this one. In this version, you can modify every element of the clock at design and run time. There is a lot of good stuff I would like to mention, but it is better you try it yourself. I will remind you to check all the properties of the clock, in particular, the
Element
category in the Properties
window which contains the clock's hands, markers, etc. I hope you will like it. - 1.5.0.3 -- Some bug fixes