Getting Started with Adobe After Effects - Part 6: Motion Blur


Upload Image Close it
Select File

Dinesh's Blog
Browse by Tags · View All
brh 20
#SILVERLIGHT 19
#DOTNET 18
silverlight 18
#ASP.NET 15
Silverlight 4.0 9
bing 7
bing maps 6
wcf services 5
map 5

Archive · View All
August 2010 10
September 2010 3
July 2010 3
June 2010 3
October 2010 1

How to Create Silverlight Application in Visual Studio 2010

Aug 20 2010 7:00AM by Dinesh Sodani   

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.

New VS 2010 Project for Silverlight Application

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.

New Silverlight Application

Once you click OK button you should see the full IDE environment for Silverlight

Silverlight Project - Default

You see following files are added in Silverlight project

  1. App.xaml
  2. MainPage.xaml

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

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
             x:Class="GettingStarted.App"
             >
    <Application.Resources>
        
    </Application.Resources>
</Application>

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()
End Sub

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:

  1. .XAP file in Clientbin Folder
  2. 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:

<html>
<body>
    <form id="form1" runat="server" style="height:100%">
    <div id="silverlightControlHost">
        <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" 
		  		  style="border-style:none"/>
		  </a>
	    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
    </form>
</body>
</html>

Few things to notice here:

  1. In the first line <object> tag tells the browser to load the Silverlight plug-in
  2. 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.
  3. 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.

.Intillsense in VS 2010 for SIlverlight

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.

Silverlight Project Running

Tags: silverlight, brh, #SILVERLIGHT, #ASP.NET, Silverlight 4.0, XAP, RootVisual, MainPage.xaml, VS 2010, App.xaml, Silverlight in Visual Studio 2010,


Dinesh Sodani
30 · 6% · 1807
2
 
0
Lifesaver
 
0
Refreshed
 
0
Learned
 
0
Incorrect



Submit

Your Comment


Sign Up or Login to post a comment.

"How to Create Silverlight Application in Visual Studio 2010" rated 5 out of 5 by 2 readers
How to Create Silverlight Application in Visual Studio 2010 , 5.0 out of 5 based on 2 ratings
    Copyright © Rivera Informatic Private Ltd Contact us      Privacy Policy      Terms of use      Report Abuse      Advertising      [ZULU1097]