Digital Clock in Windows Phone 7

Introduction

In this article we will be exploring a simple digital clock in a Windows Phone application. To implement this application we have to import the two namespaces System.Windows.Threading and Microsoft.Phone.controls. Here we will also use two classes, DispatcherTimer and DateTime classes in the MainPage.xaml.cs file. We will call the Now() function of the DateTime Class, and convert the result into a string with the help of the ToStrins() function and assign the value into the TextBlock.Text property. Although DispatcherTimer is defined in the System.Windows.Threading namespace, the OnTimerTick method is called in the same thread as the rest of the program. If that was not the case, the program wouldn't be able to access the TextBlock directly. The Text property of a TextBlock dynamically during runtime. The new value shows up rather magically without any additional work. This is a very different from older graphical environments like Windows API programming or MFC programming.

Step 1 : Open Visual Studio.

Select new -> project
Select your preferred language
Select the silverlight for Windows Phone application
Name the project
Now name of project is "PhoneSimpleClock"

Step 2 : Open the Toolbox of the Windows Phone application.

Drag & Drop TextBlock control on design view.

Step 3 : Set some formatting on map XAML code.

Code

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="Simple Clock" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBlock Height="84" HorizontalAlignment="Left" Margin="30,286,0,0" Name="textBlock1" Text="" VerticalAlignment="Top" FontSize="40" Width="393" />
</Grid>

Step 4 : The final presentation of design view is given below:

Code

<phone:PhoneApplicationPage
x:Class="PhoneSimpleClock.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">


<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>


<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="Simple Clock" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>


<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBlock Height="84" HorizontalAlignment="Left" Margin="30,286,0,0" Name="textBlock1" Text="" VerticalAlignment="Top" FontSize="40" Width="393" />
</Grid>
</Grid>
</phone:PhoneApplicationPage>

Step 6 : Code of MainPage.xaml.cs file.

Code

using System;
using System.Windows.Threading;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace PhoneSimpleClock
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
DispatcherTimer dtm = new DispatcherTimer();
dtm.Interval = TimeSpan.FromSeconds(1);
dtm.Tick += OnTimerTick;
dtm.Start();
}
void OnTimerTick(Object s, EventArgs e)
{
textBlock1.Text = DateTime.Now.ToString();
}
}
}

Output

Resources

2 Comments

Join the conversation! Your thoughts help the community grow.

Sonakshi Singh14y ago
Hey... This is really good to learn, I will surely implement this...!!
Sam Hobbs14y ago
Thank you, Shubham. I think this will be useful for many learning about Windows Phone development. I think however authors need to be careful about what they say in their introduction; it is common for authors to make comparisons in the introduction that is not accurate. MFC (the Class Wizard) actually is designed to work more like .Net does in terms of making it easier to update the contents of controls.