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:

  1. <Window x:Class="StopWatch.MainWindow"  
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.   
  5.     Title="Simple Stop Watch" Height="350" Width="525">  
  6.     <Grid Background="BlanchedAlmond">  
  7.         <TextBlock FontSize="50" Margin="200,-12,175,258" RenderTransformOrigin="1.443,0.195">Timer</TextBlock>  
  8.         <TextBlock x:Name="clocktxtblock" FontSize="70" Margin="118,38,37,183"></TextBlock>  
  9.         <Button x:Name="startbtn" Margin="38,137,350,126" Background="SkyBlue" Content="Start" FontSize="30" Click="startbtn_Click" ></Button>  
  10.         <Button x:Name="stopbtn" Margin="200,137,190,126" Background="SkyBlue" Content="Stop" FontSize="30" Click="stopbtn_Click" ></Button>  
  11.         <Button x:Name="resetbtn" Margin="360,137,28,126" Background="SkyBlue" Content="Reset" FontSize="30" Click="resetbtn_Click" ></Button>  
  12.         <ListBox x:Name="elapsedtimeitem" HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="433" Margin="56,199,0,0"/>  
  13.     </Grid>  
  14. </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:

  1. namespace StopWatch   
  2. {  
  3.     public partial class MainWindow: Window   
  4.     {  
  5.         DispatcherTimer dt = new DispatcherTimer();  
  6.         Stopwatch sw = new Stopwatch();  
  7.         string currentTime = string.Empty;  
  8.         public MainWindow()   
  9.         {  
  10.             InitializeComponent();  
  11.             dt.Tick += new EventHandler(dt_Tick);  
  12.             dt.Interval = new TimeSpan(0, 0, 0, 0, 1);  
  13.         }  
  14.   
  15.         void dt_Tick(object sender, EventArgs e)   
  16.         {  
  17.             if (sw.IsRunning)   
  18.             {  
  19.                 TimeSpan ts = sw.Elapsed;  
  20.                 currentTime = String.Format("{0:00}:{1:00}:{2:00}",  
  21.                 ts.Minutes, ts.Seconds, ts.Milliseconds / 10);  
  22.                 clocktxtblock.Text = currentTime;  
  23.             }  
  24.         }  
  25.   
  26.         private void startbtn_Click(object sender, RoutedEventArgs e)  
  27.         {  
  28.             sw.Start();  
  29.             dt.Start();  
  30.         }  
  31.   
  32.         private void stopbtn_Click(object sender, RoutedEventArgs e)   
  33.         {  
  34.             if (sw.IsRunning)  
  35.             {  
  36.                 sw.Stop();  
  37.             }  
  38.             elapsedtimeitem.Items.Add(currentTime);  
  39.         }  
  40.   
  41.         private void resetbtn_Click(object sender, RoutedEventArgs e)   
  42.         {  
  43.             sw.Reset();  
  44.             clocktxtblock.Text = "00:00:00";  
  45.         }  
  46.     }  
  47. }  
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.