Countdown Timer

A while back I posted some pictures of a WPF countdown timer that was inspired by the DevDays countdown timer. After noticing how many times my WPF countdown timer cropped up in Google searches, I decided to post a tutorial on how I made it.
For the purposes of this tutorial, I'll be using Visual Studio.

Creating the Project
First things first, we need to create a new project. So go to File > New > Project and from Visual C# > Windows, select the WPF Application. Name it CountdownTimer and click OK.

Adding the controls
Set the height and width of the form to 540 and 450 respectively. Create 5 RowDefitions each with a height of 100. Your code and design views should look something like the following:

The first control we're going to add is a label which is going to display what we're counting down to. So, add a Label to the form with the following properties (Blogger won't let me paste the code directly):

• Content: [name of the event]
• Grid.Row="0"
• FontFamily = "Courier New"
• FontSize="28"
• VerticalContentAlignment="Center"
• HorizontalAlignment="Center"

The next thing we're going to add are labels to display the days, hours, minutes and seconds to the event. The labels will be nested inside a StackPanel. So, add the code shown in the following image (note that the numbers in the timer labels are placeholders):

Styling the Controls
Now that the controls are all in place, we're going to add some styling to them. Click the "Add New Item" icon and choose the ResourceDictionary from the WPF category. Keep the default filename of Dictionary1.xaml. In order for the styles to be used in the form, we need to attach the ResourceDictionary. Add a ResourceDictionary reference to the window's resources. It should look like the following:

We're going to create a Style for a round label. In Dictionary1.xaml, add the following code:

What this does is set the shape of the label to be an ellipse with a cornflower blue background and a black border. To draw the content of the label, we use a ContentPresenter. You can see here that I've set the font as "Courier New" and the font size as 50 (px).
Now that we have the style for the round label, we need to attach it to the timer labels with the following line of code:
Style="{StaticResource ResourceKey=baseRoundLabel}"
Do this for lblDaysTimer, lblHoursTimer, lblMinutesTimer and lblSecondsTimer. Once you're done, your window code should look something like this:

For lblDaysTag, lblHoursTag, lblMinutesTag and lblSecondsTag create the following style in the resource dictionary:

and attach it to those labels in the same fashion. By now, your code would look like this:

I've also tidied up some of the other labels.

The Code Behind
To access the form's Loaded event, double-click anywhere on the form's frame. Declare the following global variables:

        private static DateTime date;
        private TimeSpan daysTilEvent;
        private int days, hours, minutes, seconds;
        private DispatcherTimer timer;

date is the DateTime object which will hold the date of the event we're counting down to. daysTilEvent holds the difference between the current date and time and the date and time of the event.
In the Window_Loaded event, add the following code:

It might be tidier to just set the days, hours, minutes and seconds directly to their respective labels instead of via integers, but then we wouldn't be able to do this next bit...

If the days, hours, minutes, and seconds are equal to zero, the timer stops. Otherwise, the timer continues to to tick.