After you have the necessary components for Silverlight, you can create Silverlight applications. To create a Silverlight application in Visual Studio 2010:

Figure 11-3. Visual Studio shows the main form in the design view and source view.

Visual Studio loads the controls you can use in your application in the Toolbox, as shown in Figure 11-4.

Figure 11-4. Visual Studio adds controls to the Toolbox for Silverlight applications.

You can drag controls from the Toolbox onto the main form in the design view. To start, drag a Label control from the Toolbox onto the main form. You see the label in the design editor and XAML view, as shown in Figure 11-5.

You can change the text of the label to read "Hello, Silverlight World!". To change the text, select the Content property in the Property Explorer, as shown in Figure 11-6.

Click Ctrl+F5 or Debug

Figure 11-5. The Label appears in the Design and XAML views.

Figure 11-6. Change the label's text in the Property Explorer.

Figure 11-7. The Silverlight application runs in your Web browser.

What appears so far is just the outline of the digital clock. You can make this outline look more like a clock, perhaps with some visual depth, a border, and maybe rounded corners, thanks to the Style property. You can create styles with XAML and then apply those styles to controls. You can place styles in any .xaml file. In this case, it would be nice for these styles to have scope in the entire application, so putting them in the App.xaml is a good choice.

First, you want to style the Rectangle element that forms the background of the clock. This style gives the Rectangle element rounded corners and uses linear gradients to draw a border and fill the Rectangle element. The Stroke property controls the outline of the Rectangle. The Fill property sets the brush that fills the Rectangle element, and the StrokeThickness property determines the thickness of the border. For the digital clock, you use a LinearGradiantBrush for the border and fill of the Rectangle. The following style sets all these properties:

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="DigitalClock.App"
             >
    <Application.Resources>

        <Style x:Key="ClockFace" TargetType="Rectangle">
            <Setter Property="StrokeThickness" Value="4"></Setter>
            <Setter Property="Fill">
                <Setter.Value>
                    <LinearGradientBrush>
                        <GradientStop Offset="0.0" Color="DodgerBlue" />
                        <GradientStop Offset="1.0" Color="White" />
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Stroke">
                <Setter.Value>
                    <LinearGradientBrush>
                        <GradientStop Offset="0.0" Color="White" />
                        <GradientStop Offset="1.0" Color="DodgerBlue" />
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>

    </Application.Resources>
</Application>

After you create this style, you can apply it to the Rectangle element by selecting the Rectangle in the Design view using the Properties window, as shown in Figure 11-9.

Now, you want to create a custom style for the clock's text. You can simply add a style to App.xaml by creating yellow text with a font size of 36.

<Style x:Key="ClockText" TargetType="TextBlock">
            <Setter Property="FontSize" Value="36" />
            <Setter Property="Foreground">
                <Setter.Value>
                    <SolidColorBrush Color="Yellow">
                    </SolidColorBrush>
                </Setter.Value>
            </Setter>
        </Style>

Figure 11-9. Applying the ClockFace style gives the Rectangle element visual depth.

Now you can go to the Design view of MainPage.xaml and apply the ClockText to the TextBlock by selecting it and assigning the ClockText style to the Style property in the Properties window. Figure 11-10 shows the result.

Figure 11-10. Adding styles to Silverlight elements gives them a customized appearance.

The layout for the digital clock isn't quite complete. The text should display the current time in a digital clock format. And in order to function like a clock, the text must change as the time advances. Now is the time to go to code to finish up the clock.

First, you need a timer that ticks every second so that you can update the clock text. The System.Windows.Threading.DispatcherTimer provides a timer for use in Silverlight applications. To update the clock text, you set the Text property of the TextBlock element when the Tick event of the timer occurs:

C#:

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

namespace DigitalClock
{
    public partial class MainPage : UserControl
    {
        private DispatcherTimer _Timer;

        public MainPage()
        {
            InitializeComponent();

            _Timer = new DispatcherTimer();

            _Timer.Tick += new EventHandler(_Timer_Tick);
            _Timer.Interval = new TimeSpan(0, 0, 1);
        }


        void _Timer_Tick(object sender, EventArgs e)
        {
            System.DateTime currentTime = System.DateTime.Now;

            this.textBlock1.Text = currentTime.ToString("HH:mm:ss");
        }

        private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)
        {
            System.DateTime currentTime = System.DateTime.Now;

            this.textBlock1.Text = currentTime.ToString("HH:mm:ss");

this._Timer.Start();
        }
    }


}

VB:

Imports System
Imports System.Windows
Imports System.Windows.Threading
Imports System.Windows.Controls
Imports System.Windows.Documents
Imports System.Windows.Input
Imports System.Windows.Media
Imports System.Windows.Media.Animation

Partial Public Class MainPage
    Inherits UserControl

    Private _Timer As System.Windows.Threading.DispatcherTimer

    Public Sub New()
        InitializeComponent()

        _Timer = New System.Windows.Threading.DispatcherTimer()
        _Timer.Interval = New TimeSpan(0, 0, 1)

    End Sub

    Private Sub LayoutRoot_Loaded(ByVal sender As System.Object, ByVal e As
    System.Windows.RoutedEventArgs) Handles LayoutRoot.Loaded

        Dim currentTime As System.DateTime = System.DateTime.Now

        Me.textBlock1.Text = currentTime.ToString("HH:mm:ss")

        AddHandler _Timer.Tick, AddressOf _Timer_Tick

        _Timer.Start()

    End Sub

    Private Sub _Timer_Tick(ByVal sender As Object, ByVal e As System.EventArgs)
        Dim currentTime As DateTime = System.DateTime.Now

        Me.textBlock1.Text = currentTime.ToString("HH:mm:ss")

    End Sub
End Class

Most clocks display the time centered in the clock display. Unfortunately, no property on the TextBlock centers the text, so you have to do a little math. After you set the Text property of the TextBlock, the ActualWidth and ActualHeight properties of the TextBlock element adjust to the actual height and width of the rendered text. Armed with this information, centering the text just takes a little math. You know the size of the Rectangle that contains the TextBlock; adding the following code centers the clock text.

C#:

double left = (this.rectangle1.Width - this.textBlock1.ActualWidth) / 2;
  double top = (this.rectangle1.Height - this.textBlock1.ActualHeight) / 2;

  this.textBlock1.SetValue(Canvas.TopProperty, top);
  this.textBlock1.SetValue(Canvas.LeftProperty, left);

VB:

Dim left As Double = (Me.rectangle1.Width - Me.textBlock1.ActualWidth) / 2
        Dim top As Double = (Me.rectangle1.Height - Me.textBlock1.ActualHeight)
/ 2

        Me.textBlock1.SetValue(Canvas.TopProperty, top)
        Me.textBlock1.SetValue(Canvas.LeftProperty, left)

To see the digital clock in action, press Ctrl+F5 to run the application. The application loads in your browser and displays the clock, as shown in Figure 11-11.

Figure 11-11. The digital clock displays in your browser.