by December 7, 2007 0 comments

Innovations like JavaScript, AJAX, Flash, etc improved user’s experience of
Web apps. They’ve also given developers a lot of freedom to be creative. Now
they have something new to look forward to. Microsoft has recently launched a
cross platform, cross browser .NET plug-in to enable developers create Rich
Internet Applications (RIAs) that play animations, graphics, and even video.
Silverlight is based on Windows Presentation Foundation/Everywhere (WPF/E) and
is aimed to compete with Adobe Flash and presentation components of AJAX. The
recent release of Silverlight version 1.1 incorporates .NET Common Language
Runtime (CLR), so that Silverlight applications can support application logic
written using any .NET language. This built-in CLR support was not available
with version 1.0, owing to which application logic had to be written using

In this article we will focus on developing Silverlight applications using
Visual Studio 2008 (Orcas) and Expression Blend 2. We will use VS 2008 Beta 2 to
develop the application and Expression Blend 2 to design it.

Direct Hit!

Applies To:
.NET developers
Build a digital clock that runs on Silverlight
Silverlight, Expression Blend

Gathering Required Tools
To develop Silverlight applications, you need to first do some basic
configurations for VS 2008. Install Silverlight runtime and ASP.NET Futures,
wherein the latter contains controls for ASP.NET to support Silverlight
applications. An add-on tool, Silverlight Tools, is also required by VS 2008
Beta 2. The three tools required for Silverlight application development are
available on this month’s DVD. The exact names are as follows: –

  • Silverlight 1.1 Alpha Refresh for Windows
  • Microsoft ASP.NET Futures (version July 2007)
  • Microsoft Silverlight Tools Alpha for Visual Studio 2008 Beta 2

Installing Silverlight tools provides the integration of VS 2008 with Expression
Blend, which allows concurrent development and synchronization of the
application’s design interface and its logic. Apart from this it also provides
project templates for Visual Basic and C#, along with IntelliSense and code
generators for XAML. The Expression Blend 2 (September Preview) setup can be
picked from the Nov’07 DVD.

Basic files and referenced
libraries of Silverlight project. The XAML page can be opened directly in
Expression Blend

Getting Started
Once all the required tools have been installed, we can start creating
Silverlight application using VS 2008. Launch VS 2008 and create a new project.
In the New Project window, under Project Type pane, select Silverlight and under
Template pane, select Silverlight Project template, name the project as ‘SilverLightDemo,’
and click OK. The project gets created with all the necessary references and
foundation files required for Silverlight project. Among the basic files in the
project folder, Page.xaml contains the application’s user interface and
Page.xaml.vb manages source code for the application. TestPage.html contains
Silverlight control and reference to Silverlight.js, which is a JavaScript file
to ensure the client browser has necessary Silverlight runtime installed to run
the application. In the absence of Silverlight runtime, the script asks the
client browser to download the appropriate runtime. HTML pages, used to host
Silverlight apps, can contain other HTML elements and tags to make up the web

In our demo application we will build a clock component on an HTML page to
display time and date. To design the interface for the application, open the
Page.xaml file with Expression Blend 2. From the VS 2008 interface you can
directly initiate to open an XAML file in Blend, right-click on Page.xaml file,
and select ‘Open in Expression blend’ option. In the Expression Blend
environment first add the Canvas control that will act as container for all the
added controls. On this canvas create a button using Rectangle control and
change the RadiusX and RadiusY properties to render a rounded shape to the
rectangle. Likewise add TextBlocks on the button that will be used to display
time and date.

Now, to make this button display time, we need to update it every second. For
doing this we add a Timeline control: click on the > arrow in the Objects and
Timeline pane. On the following window, click on + button to add the new
StoryBoard and in the next popup window select Timeline control and click OK.
Save the Page.xaml file and revert to Visual Studio interface, where it will ask
you to re-load the Page.xaml to keep the changes made by the source editor. Now
to make the canvas object accessible to the application logic, add the x:Name
attribute and set it to showTime in the Page.xaml file. The following code
snippet shows that:

<Canvas x:Name="showTime" Width="280" Height="160"
Canvas.Left="136" Canvas.Top="56">

Adding Application Logic
After designing the interface for the clock, we will add program logic to
the application to display time using Visual Basic. From the Solution Explorer
double-click on Page.xaml.vb file to open it in code editor. And in the
Page_Loaded() subroutine add the following code lines:

Me.Timeline1.Duration = New Duration(New TimeSpan(0, 0,

Installing Silverlight Tools
adds the VB and C# templates for the Silverlight project. A message also
mentions Silverlight assembly uses WPF/E

This Timeline1 object is from the XAML file that was added to the rectangle
control. This object triggers a Completed event every second that has been set
through the Duration object. Now to add code for the Completed event we will
select Timeline1 object from the code editor and select its corresponding
Completed event. For the Completed event handler we will add code that will take
the hours, minutes, seconds, and dates from the current time and display them on
the respective TextBlock controls. The following code snippet shows that:

Dim hours As TextBlock = Me.showTime.Children(1)
Dim mins As TextBlock = Me.showTime.Children(2)
Dim second As TextBlock = Me.showTime.Children(3)
Dim showdate As TextBlock = Me.showTime.Children(4)
hours.Text = Now.Hour.ToString
mins.Text = Now.Minute.ToString
second.Text = Now.Second.ToString
showdate.Text = "Date : " + Now.Day.ToString + " / " + Now.Month.ToString + " /
" + Now.Year.ToString

To test the SilverLightDemo app, press F5 or select Debug > Start Debugging
option. The application will open in your default browser and the clock starts
displaying the current time of the client system. Now let’s see how to deploy
this Silverlight application on IIS.

In Blend the design and XAML
view can be seen through Split option. Properties can be set for Rectangle
control in Appearence pane. To add Timeline object to Rectangle control,
follow steps 1, 2, and 3, as illustrated in the visual

Deployment on IIS
After creating the SilverLightDemo app, we can now deploy the same on IIS
very easily. First create a base folder for deploying your application, say C:\SilverLightApp.
Copy the TestPage.html from your SilverLightDemo project directory and paste it
onto this base folder and rename it to Default.html. We also need to copy the
Silverlight.js and Page.xaml files to the base folder. As the TestPage.html is
used to refer to TestPage.html.js file, we will copy it also onto the base
folder. The Page.xaml file shows that the Silverlight application is expecting
compiled assembly to be found in ClientBin folder. So we will paste the
SilverLightDemo.dll, the compiled assembly for the project SilverLightDemo, from
the project directory to the ClientBin folder under base directory. Now we can
use this base folder to act as virtual directory in IIS. Start IIS and under Web
Sites option, right click on Default Web Site and then select New > Virtual
Directory. Set the alias for the virtual directory as Silverlight and browse to
the base folder location and then click Finish. Now with the URL http://localhost/Silverlight/Default.html
we can load the page containing the Silverlight

The SilverLightDemo App
running on Mozilla Firefox as well as Internet Explorer having Silverlight

With this we have successfully created a Silverlight application using VS
2008 and designed its interface using Expression Blend 2.

No Comments so far

Jump into a conversation

No Comments Yet!

You can be the one to start a conversation.