In the previous article I attempted to explain What Silverlight is and how it is being used more and more to develop business applications. In this article I will demonstrate how to create a simple Silverlight application using Microsoft Visual Studio 2010.
Create New Silver light Application with Visual Studio:
Start Visual Studio 2010 and choose File > New > Project…
Select Silverlight from the Project type’s tree, and Silverlight Application from the Templates list. Give your application a name and click OK.
A dialog will appear asking if you want to host the application in a new web site. Make sure this option is checked, Host the Silverlight application in a new web site, and click OK.
Once you click OK button you should see the full IDE environment for Silverlight
You see following files are added in Silverlight project
What is App.xaml
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
The code behind file of app.xaml is used to handle global application level events like Application_Startup, Application_Exit and Application_UnhandledException. (Similar to Global.asax file for ASP.NET applications)
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. That way you can change the startup page of Silverlight application.
Private Sub Application_Startup(ByVal o As Object, ByVal e As StartupEventArgs) Handles Me.Startup
Me.RootVisual = New MainPage()
What is MainPage.xaml
When you create the Silverlight project, Visual Studio IDE will automatically add a default “MainPage.xaml” file which is actually a startup page for your Silverlight application. You can modify this page as per your need or can create a new one. Read What is XAML to know more about the XAML.
Following are added in Silverlight Web Project:
- .XAP file in Clientbin Folder
- A aspx page to consume Silverlight application.
A XAP file (pronounced "zap") is basically a compressed output file for the Silverlight application containing Silverlight solution components such as the compiled XAML and code-behind, an application manifest and possibly one or more assemblies delivering Silverlight controls. Read What is XAP File to know more about the XAP file.
Silverlight Application (XAP) generally loads inside the ASPX or HTML pages pointing to the path to load the XAP. Below is source in the aspx/html page:
<form id="form1" runat="server" style="height:100%">
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="ClientBin/GettingStarted.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="3.0.40818.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0" style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight"
</object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
Few things to notice here:
- 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.
- 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.
- Whatever is written in the list lines 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.
Visual studio 2008 IDE does not support designing for Silverlight application but Visual studio 2010 supports. Now let’s add a TextBlock tag to display a message on the page as below. You can see in the image that IDE support intellisense in XAML and you can see the output in the design panel.
So finally set the web application as start up and also set this page as start up and run it. You should be pleased to see your first silver light application running.