How to Create a Digital Clock in C#

This control is similar to the standard ProgressBar but designed with a circular style, making it suitable for various graphical representations, including a clock.

Creating a digital clock using a circular progress bar in C# involves several steps. You'll use a timer to update the clock display and a circular progress bar to represent the passage of time.

How to use Circular Progress Bars in C#

Here's a step-by-step guide to achieve this using Windows Forms

First of all, You need to install the CircularProgressBar library by right-clicking on your project, then select Manage NuGet Packages -> Enter CircularProgressBar at the search box -> install it.

The Circular ProgressBar is a custom control for WinForm with animation.

After installing the CircularProgressBar library, you should rebuild your project, then drag the CircularProgressBar.dll in the packages directory into your Visual Studio toolbox.

How to add circular ProgressBar in C#

Open your form designer, then drag and drop the CircularProgressBar control from the Visual Studio toolbox into your Form. You can design a simple UI as shown below.

I will add a Timer control into Form to help me update the clock.

Double click on your form to handle the Form_Load event as the following c# code.

// c# timer control
private void Form1_Load(object sender, EventArgs e)
{
    System.Timers.Timer timer = new System.Timers.Timer();
    timer.Interval = 1000;//1s
    timer.Elapsed += Timer_Elapsed;
    timer.Start();
}

Double click on the Timer control to add a Timer_Elapsed event handler help you update digital click time as shown belown.

// c# circular progressbar
private void Timer_Elapsed(object sender, System.Timers.ElapsedEventArgs e)
{
    // Invoke an anonymous method on the thread of the form.
    circularProgressBar1.Invoke((MethodInvoker)delegate
    {
        //Set time to circular progressbar
        circularProgressBar1.Text = DateTime.Now.ToString("hh:mm:ss");
        circularProgressBar1.SubscriptText = DateTime.Now.ToString("tt");//AM or PM
    });
}

We will update the text property of CircularProgressBar control every second.

You can easily customize the CircularProgressBar by changing its properties in the designer or with code.

The Circular Progress Bar has the following properties:

1. CircularProgressBar.Maximum: Shows and changes the maximum acceptable value for the progress bar.
2. CircularProgressBar.Minimum: Shows and changes the minimum acceptable value for the progress bar.
3. CircularProgressBar.Value: Shows and changes the current value of the progress bar.
4. CircularProgressBar.Style: Shows and changes the style of the progress bar. Only Continues and Marquee is now supported. Blocks behaves as same as Continues.
5. CircularProgressBar.BackColor: Background color of control, transparent is not supported
6. CircularProgressBar.Text: Primary text
7. CircularProgressBar.TextMargin: Margin of the primary text
8. CircularProgressBar.Font: Font of the primary text
9. CircularProgressBar.SuperscriptText: Superscript text
10. CircularProgressBar.SuperscriptMargin: Margin of the superscript text
11. CircularProgressBar.SuperscriptColor: Font color of the superscript text
12. CircularProgressBar.SubscriptText: Subscript text
13. CircularProgressBar.SubscriptMargin: Margin of the subscript text
14. CircularProgressBar.SubscriptColor: Font color of the subscript text
15. CircularProgressBar.SecondaryFont: Font of subscript as superscript text
16. CircularProgressBar.AnimationFunction: Contains the function that controls the animation. Use WinFormAnimation.Functions namespace for some of the basic implementations.
17. CircularProgressBar.AnimationSpeed: Speed of the animation. Applies to the main progress animation.
18. CircularProgressBar.StartAngle: Start angle of the progress bar. 270 being top of the control.
19. CircularProgressBar.InnerColor: Color of the inner circle.
20. CircularProgressBar.InnerWidth: Width of the inner circle. -1 means full fill.
21. CircularProgressBar.InnerMargin: Margin of the inner circle.
22. CircularProgressBar.ProgressWidth: Width of the main progress bar circle. -1 means full fill.
23. CircularProgressBar.ProgressColor: Color of the main progress bar circle.
24. CircularProgressBar.OuterColor: Color of the outer circle.
25. CircularProgressBar.OuterWidth: Width of the outer circle. -1 means full fill.
26. CircularProgressBar.OuterMargin: Margin of the outer circle.

VIDEO TUTORIAL