Creating a Simple Stop Watch Application in WPF

In this blog you will learn how to create a simple stop watch application in WPF.

Step 1: Designing The Front End

Our front end contains the following WPF Controls:

• 2 TextBlocks
• 3 Buttons
• 1 ListBox

The Frontend XAML is as follows:

<Window x:Class="StopWatch.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="Simple Stop Watch" Height="350" Width="525">
    <Grid Background="BlanchedAlmond">
        <TextBlock FontSize="50" Margin="200,-12,175,258" RenderTransformOrigin="1.443,0.195">Timer</TextBlock>
        <TextBlock x:Name="clocktxtblock" FontSize="70" Margin="118,38,37,183"></TextBlock>
        <Button x:Name="startbtn" Margin="38,137,350,126" Background="SkyBlue" Content="Start" FontSize="30" Click="startbtn_Click" ></Button>
        <Button x:Name="stopbtn" Margin="200,137,190,126" Background="SkyBlue" Content="Stop" FontSize="30" Click="stopbtn_Click" ></Button>
        <Button x:Name="resetbtn" Margin="360,137,28,126" Background="SkyBlue" Content="Reset" FontSize="30" Click="resetbtn_Click" ></Button>
        <ListBox x:Name="elapsedtimeitem" HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="433" Margin="56,199,0,0"/>
    </Grid>
</Window>

Step 2 : Coding The CodeBehind File( MainWindows.xaml.cs)

The StopWatch Application needed 2 NameSpaces to be Added:

1. using System.Windows.Threading;
2. using System.Diagnostics;

The Code Behind File is as Follows:

namespace StopWatch
{
    public partial class MainWindow: Window
    {
        DispatcherTimer dt = new DispatcherTimer();
        Stopwatch sw = new Stopwatch();
        string currentTime = string.Empty;
        public MainWindow()
        {
            InitializeComponent();
            dt.Tick += new EventHandler(dt_Tick);
            dt.Interval = new TimeSpan(0, 0, 0, 0, 1);
        }

        void dt_Tick(object sender, EventArgs e)
        {
            if (sw.IsRunning)
            {
                TimeSpan ts = sw.Elapsed;
                currentTime = String.Format("{0:00}:{1:00}:{2:00}",
                ts.Minutes, ts.Seconds, ts.Milliseconds / 10);
                clocktxtblock.Text = currentTime;
            }
        }

        private void startbtn_Click(object sender, RoutedEventArgs e)
        {
            sw.Start();
            dt.Start();
        }

        private void stopbtn_Click(object sender, RoutedEventArgs e)
        {
            if (sw.IsRunning)
            {
                sw.Stop();
            }
            elapsedtimeitem.Items.Add(currentTime);
        }

        private void resetbtn_Click(object sender, RoutedEventArgs e)
        {
            sw.Reset();
            clocktxtblock.Text = "00:00:00";
        }
    }
}

I hope this blog will help beginners who are new to WPF, in creating a simple WPF application.

For Any query, please do write in the comment box.