Create Silverlight Application .Net 1

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 5-6 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)

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:

        <TextBlock x:Name="helloWorld" Text="Hello World" FontSize="30"></TextBlock>

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, Text, FontSize, 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:

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

             xmlns:System="clr-namespace:System;assembly=mscorlib"

             x:Class="HelloWorld.App"

             >

    <Application.Resources>

       

    </Application.Resources>

</Application>

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:

namespace HelloWorld

{

    public partial class App : Application

    {

        public App()

        {

            this.Startup += this.Application_Startup;

            this.Exit += this.Application_Exit;

            this.UnhandledException += this.Application_UnhandledException;

            InitializeComponent();

        }

        private void Application_Startup(object sender, StartupEventArgs e)

        {

            this.RootVisual = new MainPage();

        }

        private void Application_Exit(object sender, EventArgs e)

        {

        }

        private void Application_UnhandledException(object sender, ApplicationUnhandledExceptionEventArgs e)

        {

            // If the app is running outside of the debugger then report the exception using

            // the browser's exception mechanism. On IE this will display it a yellow alert

            // icon in the status bar and Firefox will display a script error.

            if (!System.Diagnostics.Debugger.IsAttached)

            {

                // NOTE: This will allow the application to continue running after an exception has been thrown

                // but not handled.

                // For production applications this error handling should be replaced with something that will

                // report the error to the website and stop the application.

                e.Handled = true;

                Deployment.Current.Dispatcher.BeginInvoke(delegate { ReportErrorToDOM(e); });

            }

        }

        private void ReportErrorToDOM(ApplicationUnhandledExceptionEventArgs e)

        {

            try

            {

                string errorMsg = e.ExceptionObject.Message + e.ExceptionObject.StackTrace;

                errorMsg = errorMsg.Replace('"', '\'').Replace("\r\n", @"\n");

                System.Windows.Browser.HtmlPage.Window.Eval("throw new Error(\"Unhandled Error in Silverlight Application " + errorMsg + "\");");

            }

            catch (Exception)

            {

            }

        }

    }

}

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:  

<UserControl x:Class="HelloWorld.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d"

    d:DesignHeight="300" d:DesignWidth="400"            >

    <Grid x:Name="LayoutRoot" Background="white">

       

    </Grid>

</UserControl>

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:

x:Class="HelloWorld.MainPage"

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: 

d:DesignHeight="300" d:DesignWidth="400"

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

<Grid x:Name="LayoutRoot" Background="white">

       

    </Grid>

“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. 

namespace HelloWorld

{

    public partial class MainPage : UserControl

    {

        public MainPage()

        {

            InitializeComponent();

           

        }

      

    }

  

}

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: 

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">

                <param name="source" value="ClientBin/HelloWorld.xap"/>

                <param name="onError" value="onSilverlightError" />

                <param name="background" value="white" />

                <param name="minRuntimeVersion" value="5.0.61118.0" />

                <param name="autoUpgrade" value="true" />

                <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=5.0.61118.0" style="text-decoration:none">

                       <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>

                </a>

           </object>

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.