Silverlight Tutorials Chapter 1: Introduction to Silverlight


Couple of days ago, I started working on writing Silverlight Tutorial for Beginners on request of Mr. Sheo Narayan (Web Master) from DotNetFunda.com. I was busy for last few days to publish it online. I was really excited for it. Today, I am announcing my first Chapter of the Silverlight Tutorial for the public view. It will be a continuous process to complete the full tutorial. Please keep an eye for the next publication.

Please don't forget to provide your comments or suggestions.

In this chapter of the tutorial, you will learn about the very basic information on Silverlight i.e. what is Silverlight, what is the System Requirements for installing Silverlight and the pre-requisite to create a Silverlight application. After reading this chapter you will come to know about XAML, XAP file, Application XAML and how to host a Silverlight application.


Table of Contents:


What is Silverlight?

Silverlight is a powerful cross-browser & cross-platform technology for building the next generation web experience & rich internet applications for the web. You can run Silverlight in most of all the popular browsers like Internet Explorer, Firefox, Chrome, Safari etc. Silverlight can run in various devices and operating systems like Windows, Apple Mac OS-X and Windows Phone 7. Using Silverlight you can create rich, visually stunning web applications like flash. Also you can create smooth animations using Storyboards; you can stream media over the net etc.


Silverlight web browser plug-in comes as free to install (approximately 4-5 MB in size). You can download the required plug-in from Microsoft Silverlight Site.

What are the System Requirements for installing Silverlight?

Minimum System Requirements for installing Silverlight plug-in is as follows:
PC Type Processor RAM Operating System
Windows PC 500 MHz or higher, x86 or x64 bit processor 128 MB Windows XP SP2+
Mac Power PC PowerPC G4 800 MHz or higher 128 MB Mac 10.4.8 or higher
Mac Intel-based Intel Core Duo 1.83 GHz or higher 128 MB Mac 10.4.8 or higher

Silverlight also supports Linux PCs. The plug-in name for Linux operating system is Moonlight and you can get the information about it in Mono Project's Moonlight site (http://www.mono-project.com/Moonlight).

Minimum System Requirements for installing Silverlight SDK for development is as follows:
If you are a developer and want to start working on it, you must need the following environment to install the Silverlight tools.
Operating System - Microsoft Windows XP Service Pack 2 or higher
Developer Tools - Visual Studio 2008 SP1 (for Silverlight 3)
- Visual Studio 2010 (for Silverlight 3 & Silverlight 4)
Designers Tools - Microsoft Expression Blend 3 (for Silverlight 3)
- Microsoft Expression Blend 4 (for Silverlight 3 & Silverlight 4)
Silverlight SDK - Silverlight 3 Tools for Visual Studio 2008 SP1
- Silverlight 4 Tools for Visual Studio 2010


How can I know whether Silverlight is installed in my PC?

If you are not sure whether Silverlight is already installed in your PC, just go to the Microsoft Silverlight Installation Page (http://www.microsoft.com/getsilverlight/get-started/install/) and that will tell you whether the plug-in is already installed or you need to install.


What are the Prerequisite to create a new Silverlight Application?

Before starting with the Silverlight application development be sure you have all the necessary softwares installed in your PC. If you don’t have then follow the steps mentioned in Microsoft Silverlight Site (http://silverlight.net/getstarted/) to download & install the following items in your development environment:
  • Visual Studio 2008 SP1 for Silverlight 3 application development or Visual Studio 2010 for Silverlight 3 & Silverlight 4 application development
  • Silverlight 3 Tools for Visual Studio 2008 SP1 or Silverlight 4 Tools for Visual Studio 2010
  • Expression Blend 3 for Silverlight 3 or Expression Blend 4 Preview for Silverlight 4 (optional)
  • WCF RIA Services for Silverlight (optional)
  • Silverlight 3 Toolkit or Silverlight 4 Toolkit based on your earlier version of Silverlight (optional)
Remember that, Silverlight 3 comes preinstalled with Visual Studio 2010 and hence if you are using Visual Studio 2010, you don’t need to install the Silverlight 3 Tools for it. Using Visual Studio 2010 you can develop both Silverlight 3 and Silverlight 4 applications but Visual Studio 2008 SP1 only supports Silverlight 3.

If you have proper development environment ready for Silverlight application you can proceed to the next chapter for creating our first simple Silverlight project. I am using Visual Studio 2010 RC and Silverlight 4 RC while writing these applications. Hence, the attached samples will not open in Visual Studio 2008.


What is XAML?

XAML stands for eXtended Application Markup Language. It is nothing but an XML file which is used to declaratively create the User Interface of the Silverlight or WPF applications. This XAML file generally rendered by the Silverlight plugin and displayed inside the browser window. When you compile your projects which includes XAML pages, those first converts into BAML (Binary Application Markup Language) and then rendered in the web browser window. Let use see a simple example of XAML here:


The above XAML is a typical example where I am creating a text using the TextBlock control by specifying different properties as attributes to the control for name, font-family, weight, text etc.

What is App.xaml file?

App.xaml file is the loader of your Silverlight Application. You can declare your shared/global resources, styles, templates, different brushes inside this file which will be accessible by your application.

A typical App.xaml file looks like: 



It has a code behind file too named as “App.xaml.cs”. This file is used to handle global application level events which you can use as per your need. Visual Studio creates these two files at the time of project creation. The three events inside the App.xaml.cs are:
  • Application_Startup
  • Application_Exit
  • Application_UnhandledException.
These three events are registered in the constructor of your App.xaml.cs file. Here is the code snippet of the same: 



Let us do a brief discussion on each part of the code file.

Overview of App Constructor:
Inside the constructor of the App class you will find that all the three event has been registered. Also, there is a call to InitializeComponent() method. If you look around the whole class you will not find the method implementation. Strange!!! Where is the method?

The method has been implemented inside the partial class of the App class. If you go to the definition or just press F12 on top of the method, Visual Studio will open up the actual file named “App.g.i.cs” which contains the partial implementation of the same class. There you will find the method implementation.

What this method does: This method is responsible to load the XAML using the LoadComponent() method into the memory which can be used by your application.

What can we do inside the App.g.i.cs file: App.g.i.cs file is auto generated by the compiler and hence if you modify something there will be overwritten by the compiler itself on next build.

Why this file is not available inside my solution: As this is an compiler generated file, it has been placed inside the temporary directory named “obj”. If you go to the solution directory you will see the “obj” folder. Open it and browse through it’s subfolder (either debug or release) and you will see the file placed there. If you are unable to find it there, just do a rebuild of your solution and immediately it will be created there.

Overview of Application_Startup Event:
Application_Startup event is the root of your application. In this event you can create the instance of your initial page and set it as the RootVisual. Also, if you want to create some global objects or want to write some app initialization code, then this Application_Startup event will be the best part for you to implement it.

Overview of Application_Exit Event:
Similarly, you can write code to cleanup objects or do something when closing the application inside the Application_Exit event.

Overview of Application_UnhandledException Event:
If any exception comes while running and you didn’t handle that in the actual place, you can write some code in Application_UnhandledException to log the error details into database or show some message to the user. This will allow the application to continue running after an exception has been thrown. By default, if the app is running outside of the debugger then report the exception using the Browser DOM & the error will be visible in the status bar of Internet Explorer.


What is MainPage.xaml file?

When you create the Silverlight project, Visual Studio IDE will automatically add a default “MainPage.xaml” file which is actually a startpage for your Silverlight application. You can modify this page as per your need or can create a new one. So, what’s there inside the file? Lets look at it: 

 
Lets walk-through each lines of the code. It contains a UserControl as root of the file which may contain all other controls inside it. The following line tells the compiler to use the specified class to use:



The next couple of lines beginning with xmlns tells the compiler to import some namespaces which can be used by the Silverlight XAML page.

The following line speaks about the design time Height & Width of the Silverlight page:


If you want to specify actual Height & Width of your Silverlight application, you can manually append the following line inside that:


Next comes the Grid control which is used as a layout panel and that can include more other controls. Though the default XAML file uses the Grid as the layout panel, you can change it to any other panel as per your need. I will discuss about the various panel later in this tutorial.


“MainPage.xaml” has also it’s code behind file like App.xaml & you can use this to write code to develop your functionalities. By default, it comes empty with a call to Initialize() method inside the Constructor of the MainPage class. The implementation of this method is also available in a different partial class of MainPage inside “MainPage.g.i.cs” like “App” class. Whenever you add some controls inside the XAML page, it will be loaded here.

What is XAP file?

XAP (pronounced as ZAP) is the compressed output of the Silverlight Application which includes application manifest file, compiled output assembly and other resources used by your silverlight application. This uses the normal ZIP compression method to reduce the total download size. When you build your Silverlight application, it actually generates this .XAP file & puts in the output folder which the .aspx page refers as source to load the application.

Once you build your project, it will create the XAP file (in our case: SilverlightApps.HelloSilverlight.xap) and put it into the ClientBin directory of the web project. When the page loads it will pickup from the same location as the source you specified inside the aspx/html page.


How can I host a Silverlight Application?

When you create a Silverlight project, it asks you to create a Web Application project. This project is responsible for hosting your XAP file. Generally Silverlight application doesn’t require any server to host it to run, but if you are planning to host it in web you must need a web server for that.
Once you publish your Web Application to host in IIS, you may need to add three MIME types in your IIS Server. This is require to host it in earlier versions of IIS. Latest version of IIS comes with that configuration by default. Followings are the list of MIME Types those you need to add in your IIS Properties:

.xap application/x-silverlight-app
.xaml application/xaml+xml
.xbap application/x-ms-xbap

Silverlight Application (XAP) generally loads inside the ASPX or HTML pages pointing to the path to load the XAP. The aspx/html page uses <object /> tag to load the Silverlight application.

Here is the code present inside the aspx/html pages for loading the Silverlight XAP:


Let us go line by line to learn the basics of it.
  • In the first line <object> tag tells the browser to load the Silverlight plug-in.
  • Next couple of lines uses <param> tag.
    • The first param “source” has the value to the location of the .xap file.
    • Second param “onError” tells the plug-in to call the javascript method mentioned in the value, if any application error occurs.
    • The third param “background” specifies the color of the Silverlight application background.
    • The next param “minRuntimeVersion” specifies the minimum required plug-in version to load your Silverlight application.
    • If “autoUpgrade” is set as true in the next param, it will automatically upgrade the runtime.
  • The next lines are very interesting. Whatever you design there, will not be visible in the browser in normal scenarios. If the user doesn’t have Silverlight runtime installed in his PC or the Silverlight plug-in is disabled this section will visible to the user. This part is well known as “Silverlight Installation Experience panel”. By default, it shows a Silverlight image to download the runtime from Microsoft site. When the user clicks on it, this starts the installation. I will discuss about the Silverlight Experience later in depth.

109 comments

  1. Hi Kunal,

    Presented in an interesting manner. Low levels are nicely covered and expecting the same in future articles too. Nice to read and eager to read forthcoming posts.

    Nivas D.

    ReplyDelete
  2. Thanks Nivas. Read my next two chapters too. You will see the 4th chapter coming online soon... :)

    Regards,
    Kunal

    ReplyDelete
  3. thanks for the post !

    ReplyDelete
  4. Thanks Kunal... Explained in well manner and in easy language.

    ReplyDelete
  5. Thanks Kunal... Explained in well manner and in easy language.

    Satish Kumar Trivedi

    ReplyDelete
  6. Thanks Satish. Read the next chapters too.

    ReplyDelete
  7. Congrats Kunal, really great iniciative, i will recomended this for all people the want to learn silverlight and i watch your posts... Great!!!

    ReplyDelete
  8. Kunal,

    Very well, Keep it up. You explained the things very nicely & clearly. I definitely recommend this for my colleague.

    ReplyDelete
  9. good gob Kunal.

    ReplyDelete
  10. Hi Kunal
    you have done a great job, helping out freshers like me!
    my sincere congrats to you. :-)
    please provide links to multiple posts as you keep adding to the site. it will help us navigate better between posts!

    ReplyDelete
  11. Hi Kunal
    Greetings for the day!!
    you have done a great job, helping out freshers like me!
    my sincere congrats to you. please provide this type of online materials, because so many freshers may benefited like me !
    Thank you..

    ReplyDelete
  12. very nice article............ thnx kunal......... done a gr8 job.
    I want some more tutorial for Silverlight 3.
    My email id is prafull.leap@gmail.com

    ReplyDelete
  13. I wanted to maintain a session of login name and display the same on other xaml page.
    How could i do this?

    ReplyDelete
  14. This tips & tricks might help you: http://www.kunal-chowdhury.com/2010/09/tips-tricks-session-management-in.html

    ReplyDelete
  15. gud one for begginers

    ReplyDelete
  16. Good work kunal.Nice article to learn silverlight from scratch..Thanks and keep it up.

    ReplyDelete
  17. Really a nice article that a beginner can refer for learning Silverlight from basics.. keep it up...!!

    ReplyDelete
  18. Great job.. Presented in a simple and easy way

    ReplyDelete
  19. Nice to understand the core part of silverlight to move forward with indepth knowledge

    ReplyDelete
  20. Great to know the core part of Silverlight before moving further into Silverlight. Thanks for your effort in presenting this. Your job is much appreciated...

    Senthilkumar SV

    ReplyDelete
  21. very very nice post..
    thnku very much...

    ReplyDelete
  22. Thanks so much Kunal, for this great article of Yours. Looking forward for the remaining chapters.

    ReplyDelete
  23. very nice post kunal.......!

    ReplyDelete
  24. really good article..Keep it up...

    ReplyDelete
  25. Very nice article Kunal, I really liked it and i will suggest this for every one who want to learn silver light

    ReplyDelete
  26. Hi Kunal ji, I have small doubt, when we create a new Silver light Project after creating a silver light application, a dialog box appears asks "host Silver light Application in a New Web site" and a selection has to take in a "New Web Project Type" and at below it asks for a option whether it is silver light 4 or silver light 3 and at last there is a check box asks for "Enable RIA Services"

    so what this totally tells. does we need to host our application in a web site. How does a silver light application works. Please clear my doubts....

    ReplyDelete
  27. Hello CRYSTALOOK,

    Looks like you created a Silverlight project. Just create a project with WebSite project. Silverlight needs a web hosting site in some cases.

    ReplyDelete
  28. gr8 job dude....
    bt pls tell me detail of silverlight 4. coz m beginner for silverlight 4 and i want to create project in silverlight 4. i read ur chapter bt they are only 2.
    thankx in adv form Prateek(Champ)

    ReplyDelete
  29. Very detailed explanation of some intriguing areas...Thanks Kunal.

    ReplyDelete
  30. why there are two project folders named (1) silverlightApplication1
    and (2) silverlightApplication1.web ?

    means what is use of silverlightApplication1.web folder?

    ReplyDelete
  31. Hi Kunal

    Presented in an interesting manner. Low levels are nicely covered and expecting the same in future articles too. Nice to read this article.You explained the things very nicely & clearly.

    ReplyDelete
  32. Nicely discussed. Low level concepts are explained very well. I hope further lectures are meaningful as it is.
    Thanks: Raja Imran

    ReplyDelete
  33. Good one!!!
    It provides a quick and detailed understanding for the starters..!

    ReplyDelete
  34. wow great article..

    ReplyDelete
  35. good tutorial for beginners....

    ReplyDelete
  36. its satisfactory ..but not sufficient .........

    ReplyDelete
  37. Hi Ajeet, did you read the other chapters of the tutorial?

    ReplyDelete
  38. Nice and very helpfull to begginers like me. Thanks a lot Kunal.......

    Mukta Pundir

    ReplyDelete
  39. By reading this tutorial, i came to know about the Project structure of WP7 application, came to know about App.xaml exactly.

    Thanx Kunal for sharing :)

    ReplyDelete
  40. Nice, very usefull for me thanks

    ReplyDelete
  41. nice very usefull for me.. thanks alot

    ReplyDelete
  42. Hi Kunal,

    This is shivesh , I have gone through your silverlight tutorial and i appreciate
    your work it was really helpful for me as a beginner in silverlight.

    I have created the Helloworld program that you have given but i am facing a problem the file MainPage.xaml is not visible in design view it is showing some error like object not set to instance.

    i have installed silverlight as per your given step.

    Thanks for your tutorial.

    Regards
    Shivesh

    ReplyDelete
  43. This happens with the Visual Studio designer window sometimes. Just skip this. Read this post: http://bit.ly/ptGQl2 for further details.

    ReplyDelete
  44. This article is really very important for beginner, I appreciate for the efforts. Explained in well manner and in easy language. I'm the beginner for silver-light application, I'm trying to learn it, I'm looking forward to get information for the same....

    ReplyDelete
  45. Thank you for posting this nice tutorials, learned a lot from you!

    ReplyDelete
  46. good one for beginners.. thanks for your efforts.

    ReplyDelete
  47. good one for beginners. thanks for your efforts.

    ReplyDelete
  48. Thanks for the great info, I'm set up now and ready to get started. Looking forward to more of your posts.

    ReplyDelete
  49. Thank you for such a wonderful introduction of silverlight.

    ReplyDelete
  50. hai its helpful to get some knowledge..i appreciate u sir..

    ReplyDelete
  51. Hi,
    Regarding silverlight installation on MAC os i always find that we think of hardware architecure,any speciifc reason??
    Between it you article is worth reading! :)
    Regards,
    Sushma

    ReplyDelete
  52. Hi Sushma,

    MAC has different type of hardware architecture than the one we use for normal PC. I don't have much knowledge about MAC. You can probably do a search on net to get some clarification.

    Thanks for your feedback. Check out the other articles on Silverlight.
    Regards,
    Kunal Chowdhury

    ReplyDelete
  53. thanks Kunal.. its really good.

    ReplyDelete
  54. Very nice article kunal.. its very useful for beginers

    ReplyDelete
  55. very very nice article that is really easy to follow,GoodWork.

    ReplyDelete
  56. your silver light notes are really very help full. thanks

    ReplyDelete
  57. your silverlight notes are really very help full..thanks

    ReplyDelete
  58. please keep writing.

    ReplyDelete
  59. This is the right webpage for anybody who wishes to understand Silverlight. You realize so much its almost tough to argue with you (not that I really will need to… HaHa). You certainly put a fresh spin on a topic which has been discussed for a long time. Wonderful stuff, just great and very helpful!

    ReplyDelete
  60. Thank you Jason for this wonderful feedback.

    ReplyDelete
  61. how can i autoplay the vedio in media element control

    ReplyDelete
  62. Hi Kunal,

    Great job ... i had just started learning the silver light
    this is very nice article ...


    thanks a lot

    ReplyDelete
  63. Great article Kunal! Very clear and precise. Helped me understand the concept very clearly.

    ReplyDelete
  64. hi kunal, the article was too good . Thank you very much for posting this article.Keep posting.

    ReplyDelete
  65. AM DOING A PROJECT USING SILVERLIGHT.. N THIS TUTORIAL IS HELPFUL.. I LL BE QUERYING YOU OFTEN...THANX A LOT IN ADVANCE


    VINITHA

    ReplyDelete
  66. Hi,

    you have done a great job. Explaining each and every line is not possible.I like the way you explained the silverlight application.

    ReplyDelete
  67. very nice kunal jee i need more information for silverlite

    ReplyDelete
  68. very good and lengthy short & sweet.

    ReplyDelete
  69. Good job Kunal! well done

    ReplyDelete
  70. it's really good article done by KUNAL.

    ReplyDelete
  71. more please!

    thanks

    ReplyDelete
  72. Kunal Sir, very useful tutorial given by u. I want to get more information about silverlight

    ReplyDelete
  73. HI Kunal...tx for the knowledge which you shared with us its helped me a lot...to finish my task..

    ReplyDelete
  74. your blog helps me a lot in understanding Silverlight.
    Thank you !

    ReplyDelete
  75. Great Tutorials of Silverlight.

    ReplyDelete
  76. Great tutorial for beginners like me ...
    I'm going to explore from your tutorials bro..

    ReplyDelete
  77. it's so usefully but there is a problem with me
    when creating new project there is an error appear to me :
    "Object reference not set to an instance of an object"
    can you help me solve this problem

    ReplyDelete
    Replies
    1. Hi eslam fayex,

      You have to reinstall Visual Studio and the Silverlight SDK. This seems like the installation has been broken.

      Delete
  78. Good post Kunal... Thank you...

    ReplyDelete
  79. Thanx a lot. elaborated it nicely......

    ReplyDelete
  80. nice article..........:)

    ReplyDelete
  81. hi kunal,

    Your article is very nice.......
    can you tell me how we can call multiple web service in window phone application
    with silverlight in C#.net.....

    please help me.....

    ReplyDelete
  82. Nice article, Go on...

    ReplyDelete
  83. Nice article Kunal

    ReplyDelete
  84. Hi Kunal,
    Thanx a lot, you will be explained all terms in a very interesting way

    ReplyDelete
  85. awesome work ...learnt a lot

    ReplyDelete
  86. Hi Kunal
    thanks for this article, it is very nice, simple and clear and very useful.

    ReplyDelete
  87. very good and useful.
    many thanks

    ReplyDelete
  88. really good.
    cannot see chap 2

    ReplyDelete
  89. very well explained.looking for chapter 3 and 4

    ReplyDelete
  90. Thanks for the article.

    ReplyDelete
  91. Very good . . awesome work,

    thank dear. .
    Keep it up your good work.

    Thank You.

    ReplyDelete
  92. thank you so much for the beautiful article

    ReplyDelete


 
© 2008-2014 Kunal-Chowdhury.com | Designed by Kunal Chowdhury
Back to top