C# Tutorial - A Digital Clock

We are going to create a simple digital clock that displays the current time.

1. Create a new Windows Forms Application called WApp05. Set the properties of the form, as per the following table.

   Property	Value
   Name	Form1
   Size	15,68
   Text	Clock
   MaximizeBox	False
   FormBorderStlye	FixedSingle

2. Click on the Label control in the Toolbox and then click on the form. Set the properties of the label, as per the following table.

   Property	Value
   Name	label1
   Location	0,0
   Dock	Fill
   AutoSize	False
   Text	00:00:00
   Font	Arial, 24pt, style=Bold
   BackColor	Black
   ForeColor	Lime

3. Click on the Timer component in the Toolbox and then click on the form. Set the properties of the timer, as per the following table.

   Property	Value
   Name	timer1
   Interval	1000
   Enabled	True

Components

Previously we mentioned that a Label is a control, in a similar fashion, a Timer is a component. An item is dubbed a component if it has no visible part that can be seen within a form. These components can be seen in the component tray of the design view of the IDE.

Adding a Timer Event

Double-click on the timer icon in the component tray. This will create the default Tick event for the timer. The Tick event will trigger every time the Interval property value has passed, which is our case is every 1000 milliseconds.

Showing the Time

In order to get the current time, we use the System.DateTime structure. By accessing the Now property, this contains the current time according to the system clock. Within this we can get the Hour, Minute and Second so that we can format them into a string to be displayed.

Add the following code to Form1.cs.

public string GetTime()
{
  string TimeInString = "";

  // Get current time
  int hour = DateTime.Now.Hour;
  int min = DateTime.Now.Minute;
  int sec = DateTime.Now.Second;

  // Format current time into string
  if (hour < 10)
  {
    TimeInString = "0" + hour.ToString();
  }
  else
  {
    TimeInString = hour.ToString();
  }

  if (min < 10)
  {
    TimeInString += ":" + "0" + min.ToString();
  }
  else
  {
    TimeInString += ":" + min.ToString();
  }

  if (sec < 10)
  {
    TimeInString += ":" + "0" + sec.ToString();
  }
  else
  {
    TimeInString += ":" + sec.ToString();
  }

  return TimeInString;
}

Now the Tick event handler needs to call this method and set the label's text to display the result.

private void timer1_Tick(object sender, EventArgs e)
{ 
  label1.Text = GetTime();
}

Invalidation

If you now build and run the application, the screen does not update. In order to redraw the screen we call the Invalidate() method of the Form class, which derives from System.Windows.Forms.Control. This is turn will cause the OnPaint() method to be called. The Tick event handler now wants to look like the following:

private void timer1_Tick(object sender, EventArgs e)
{ 
  label1.Text = GetTime();
  Invalidate();
}

If you now build and run the application, the screen updates after the first Tick event has been handled. In order to overcome this, the same codes needs to be added to the form's constructor.

public Form1()
{
  InitializeComponent();
  label1.Text = GetTime();
  Invalidate();
}

This gives us a simple digital clock.