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> 
<!--ContentPanel - place additional content here-->
<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">
 
    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
 
        <!--TitlePanel contains the name of the application and page title-->
        <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>
 
        <!--ContentPanel - place additional content here-->
        <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

• Creating a Windows Gadget
• Digital Clock in C# and .NET
• System Tray ProgressIndicator in Windows Phone 7.5 / Mango phone
• Developing a Windows Control Library - Digital Clock
• Analog Clock Using Microsoft Expression Blend