Digital Clock in SilverLight 2

• Download demo - 11.3 KB
• Download source - 17.4 KB

Introduction

This tutorial shows you how we to create a simple digital clock in SilverLight 2. I've also created an analog clock in WPF and Expression Blend 2.

Using the code

Before everything, we need to create a timer. I learned to do this from here.

public void StartTimer(object o, RoutedEventArgs sender)
{
    System.Windows.Threading.DispatcherTimer myDispatcherTimer = 
        new System.Windows.Threading.DispatcherTimer();
    myDispatcherTimer.Interval = new TimeSpan(0, 0, 0, 0, 1000); // 1000 Milliseconds
    myDispatcherTimer.Tick += new EventHandler(Each_Tick);
    myDispatcherTimer.Start();
}

Now, we should create three TextBlocks with XAML code:

<TextBlock Margin="8,8,0,9" Foreground="#FFFFFFFF" 
    TextWrapping="Wrap" HorizontalAlignment="Left" 
    FontSize="72" Text="00" 
    d:LayoutOverrides="HorizontalAlignment, 
    Height" VerticalAlignment="Center" x:Name="hourText"/>

Now, we write a method to change the text every second:

// Fires every 1000 miliseconds while the DispatcherTimer is active.
public void Each_Tick(object o, EventArgs sender)
{
    hourText.Text = DateTime.Now.Hour.ToString();
    minuteText.Text = DateTime.Now.Minute.ToString();
    secondText.Text = DateTime.Now.Second.ToString();
}

History

• 27^th November, 2008: First post.