Building Web Pages Using Microsoft Silverlight
Published: 09 Jul 2007
This article talks about how we can create Web Pages using Silverlight and is intended for anyone who is interested in knowing what Silverlight is and what needs to be known in order to create and deploy a Silverlight application with your Microsoft Silverlight Streaming account.
by Jesudas Chinnathampi (Das)
Average Rating: 
Views (Total / Last 10 Days): 44470/ 104


Silverlight is a new technology from Microsoft. In simple words, Silverlight is a browser plug-in for delivering .NET based media experiences and rich interactive applications for the Web. Silverlight supports AJAX, VB, C#, Python, and Ruby, and integrates with existing Web applications. You can relate Silverlight to Adobe Flash. Using Silverlight, we can develop eye catching layouts, images, buttons, etc. In this article we will see some basic information regarding how to create a Silverlight application using Microsoft Visual Studio Orcas. Also for those who do not have Orcas, I have explained how to create and run a Silverlight Application using Microsoft Silverlight Streaming Service which provides us up to 4GB of storage space.

Basic requirements to run a Silverlight Application

In order to run a Silverlight Application, you should have Silverlight runtime files installed on your PC. These can be found at  This article will be based on the Silverlight 1.1 Alpha run time files. Basically you are installing a browser plug-in similar to Adobe Flash. Without this plug-in you cannot run any Silverlight application.

Create a Silverlight Application using Orcas

Now, let us discuss about the software that we need to create a Silverlight Application. To build a Silverlight project using Visual Studio, you need the following. Later in this article, you will see how you can create Silverlight Applications without installing Orcas and Silverlight Tools Alpha. 

·         Microsoft Visual Studio Code Name "Orcas" Beta 1

·         Microsoft Silverlight Tools Alpha for Visual Studio Code Name "Orcas" Beta 1.

Depending upon your Internet connection, downloading Orcas will take a while. The entire file size is around 5.5 GB. The whole download is divided into 8 parts.  I installed Orcas on my Pentium 3 laptop which has a Processor speed of 1.13GHz with 1GB RAM. As per Microsoft, the minimum speed was 1.6GHz. However, Orcas is running fine in my system so far.

The entire installation of Orcas took around 3 hours for me. Along with the Orcas installation, you will get the latest .NET Framework (version 3.5).

Once, you have installed Orcas and the Silverlight Tools open Orcas and select File -> New Project. Select the project type as Silverlight as shown below.

Figure 1


Once the project is created, your solution explorer should look like the following.

Figure 2

You will notice a new type of file called XAML (Extensible Application Markup Language). In Silverlight, a XAML file will be used to represent the user interface screen. You can use the XAML file to design your display content. An alluring feature of Orcas is that we can open the XAML file in the design mode. To open up the Page.XAML in the design mode, you will have to install Microsoft Expression Blend, which is free to download at

After the successful installation of Blend, all you have to do is right click the Page.XAML file. When you right click the file, you should see the following options.

Figure 3

Select the option, "Open in Expression Blend…". Microsoft Expression Blend is now ready to design your web page. Initial screen will look like as follows.

Figure 4

Using the control toolbar that you see in the left hand side of the above screen shot, you can insert controls such as text, shapes, etc. Using the rectangle object and the textblock object I created a simple user interface which looked like as follows:

Figure 5

Now, you are ready to view your first Silverlight output in your webpage. Switch to the Orcas and Click F5, you will see the output in your default browser. The above project produced the following output in my Internet Explorer.

Figure 6


If you notice the source code for your XAML file, you will notice a bunch of XML tags. These XML tags are the ones which represents the user interface. The XAML file for the above example will look like as follows:

Listing 1

xmlns=" " 
xmlns:x=" " 
x:Class="MySilver.Page;assembly=ClientBin/MySilver.dll " 
Background="White" > 
<Rectangle RenderTransformOrigin=" -0.142,-0.457" Fill= "#FF1C1818" 
Stroke="#FF000000" Width= "352" Height=" 70" Canvas.Left=" 145" Canvas.Top=" 43"/> 
<TextBlock Width=" 306" Height="35 " Canvas.Left=" 174" Canvas.Top=" 64"
FontFamily=" Verdana" FontSize=" 18" FontStyle=" Normal" FontWeight=" Bold"
Foreground=" #FFF50C25" Text=" My First Silverlight Project" TextWrapping="Wrap"/> 

In the above code snippet if you carefully notice, you can see the reference to MySilver.dll.  Each XAML file has its own code behind file. You can change properties, invoke methods for the above rectangle object and Textblock object from the code behind file. If we do not have any code behind file, then we can remove the attribute, x:Class="………."

Create a Silverlight Project without using Orcas

Since the User Interface is represented by a bunch of XML tags, we can easily create a XAML file using a text editor such as notepad. Let us see how we can create a web page which will display a text as "Welcome to Silverlight!" To begin, copy the following code and save it as "welcome.xaml."

Listing 2

<TextBlock Width="306" Height="35" Canvas.Left="10" Canvas.Top="10" 
FontFamily="Verdana" FontSize="18" FontWeight="Bold" Foreground="#FFF50C25" 
Text="Welcome to Silverlight!" TextWrapping="Wrap"/>

Here comes the tricky part. Well, how can you test the above code? Well, Microsoft now offers hosting of Silverlight applications for FREE (up to 4GB of storage space) at You will need to create a Silverlight streaming account (which is FREE) at  Once an account is created, you can start uploading your silverlight applications to your account.

But, we need to follow certain procedures before we can upload an application. To begin with, you will have to create a file called, "manifest.xml." To know more about the manifest.xml file, please visit the following link

For our project, the manifest.xml file should like as follows:

Listing 3

Upload your project to a Silverlight Streaming Account

a) Login using your windows LIVE User ID and password at

b) You should see the following options after your successful login.

Figure 7

c) Create a zip file with two files in it, the welcome.xaml and manifest.xml that we created earlier.

d) Click the link "Manage Applications."

e) Click "Upload a Silverlight Application."

f) Provide an Application name and choose the zip file that you created in step c.

g) Click the Upload button.

You have uploaded your Silverlight application. After the upload, you can test your application by clicking the link "Launch Application Test Page."  Now your application is hosted at your Silverlight Streaming account. You can add this Silverlight Application to your web page by following some guidelines.

If you modify your XAML file, then you should repeat steps c to g, so that all latest changes will be available in your streaming account.

Figure 8

In the above diagram, you should replace the XXXXX reference to your Windows LIVE Silverlight Streaming account ID which can be found at


This is a beginner's article. All we have seen is some basic information about how we can create a simple Silverlight Application.  Creating a better user interface is now easy with Silverlight. We can also host media files and audio files in the streaming account.  We can easily invoke the silverlight applications from any web page. Now, we can invoke a video file hosted at silverlight streaming from our blog. This can save us a lot of bandwidth since the video is hosted at Silverlight LIVE streaming.

User Comments

Title: 2012 NFL jerseys   
Name: NIKE NFL jerseys
Date: 2012-05-20 11:39:46 PM
[/pre]Cheap NFL,NBA,MLB,NHL
[url=]Jerseys From China[/url]
[url=]2012 nike nfl Jerseys[/url]
[url=]cheap China Jerseys[/url]
[url=]Sports Jerseys China[/url]
[url=]NFL Jerseys China[/url]
[url=]NBA Jerseys China[/url]
NHL Jerseys China
[url=]MLB Jerseys China[/url]NFL jerseys For Sale online.All Our Jerseys Are Sewn On and Directly From Chinese Jerseys Factory
[pre]We Are Professional China jerseys Wholesaler
[url=]Wholesale cheap jerseys[/url]Cheap mlb jerseys
[url=]2012 mlb all atar jerseys[/url]
[url= [/url]Cheap China Wholesael[/url]
[url=]Wholesale jerseys From China[/url]
[url=]2012 nike nfl Jerseys[/url]Free Shipping,Cheap Price,7 Days Deliver
We are professional jerseys manufacturer from china,wholesal
sports [url=]Jerseys From China[/url]
[url=]NFL jerseys China[/url]
[url=]NHL Jerseys China[/url]
[url=]NBA Jerseys China[/url]
[url=]MLB Jerseys China[/url]
[url=]China Jerseys[/url],Free Shipping
We are professional jerseys manufacturer from china,wholesal
sports [url=]cheap jerseys sale online [/url]
[url=]2012 nike nfl Jerseys[/url]
[url=]cheap NFL jerseys China[/url]
[url=]NHL Jerseys C
Title: Microsoft Campus Map   
Name: Microsoft Campus Map
Date: 2011-06-22 8:09:37 PM
Still trying to figure out how to remove and re-install siverlight.
Title: Cannot "run" my downloaded SilverLight program?   
Name: Arty
Date: 2010-11-01 4:34:56 AM
I was SO excited about SilverLight!
I download it on my wi-fi connection, found the file then tried to "run" it but it won't open/download in my media player????
Plz can you help?!! I'm praying its not bogus?!!!
Title: Good   
Name: Rushin
Date: 2010-03-17 2:02:44 AM
Thank you
Title: Good Article   
Name: Amrish
Date: 2009-09-21 2:36:20 AM
Nice article for beginners very well explained.
Title: Thanks a lot   
Name: Nisheeth
Date: 2009-03-04 4:22:05 AM
Thanks a lot..
Title: Getting an Error   
Name: Srikanth
Date: 2008-05-20 4:10:33 AM
I have followed the same steps u've mentioned.
When i click the "Launch Applcation Test Page" I see the following error :
Error Code 2262
line 9 Postition 20
Title: Is SilverLight DEAD   
Name: Peter Snow
Date: 2007-12-28 9:46:13 AM
Well after waiting many months to see web content with Silverlight I have come to conclution that SilverLight is DEAD. The only site with any content is microsoft. Oh Well, better it die now and let Flash Player get on with the job, at least that is supported and used.
Title: Off the Ground   
Name: dbl
Date: 2007-11-07 10:28:40 AM
This is what I needed along with a little google to get off and running. Thanks
Title: Thank you   
Name: Sudarshan
Date: 2007-10-04 6:28:17 AM
Thank you for good guideline.
Title: Excellent Approach   
Name: Pravin kumar
Date: 2007-07-16 8:41:26 AM
Thanks for this artical.
Title: Thank you   
Name: volnet
Date: 2007-07-13 10:10:46 PM
Thank you for your resource of the silverlight tech .
Title: why?   
Name: aspnetx
Date: 2007-07-13 9:21:44 PM
why just photos?

Community Advice: ASP | SQL | XML | Regular Expressions | Windows

©Copyright 1998-2020  |  Page Processed at 2020-01-27 5:03:49 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search