Introduction:
Silverlight is the cross-browser, cross-platform plug in for creating next generation rich internet applications. In this article I will demonstrate how to create a very simple Silverlight application.
Prerequisite:
There are number of tools required to create Silverlight applications. Steven Smith has done a great job in putting all the tools together in a single post. You can view Steven’s post here. The following is the list of required tools.
Once, you have downloaded and installed everything you are ready to start developing Silverlight applications.
Setting Up the Silverlight Project:
First create a blank solution so you can add new projects to it. Now add a new Silverlight project to the solution. Take a look at the screen shot below:
The Silverlight project is added to your blank solution. The project consists of several files which are explained in detail on the Silverlight website. Here are the definitions that I took from the official Silverlight website.
- A root HTML file: Typically, this will be named default.html or something similar. The Visual Studio template uses the file name TestPage.html. This is the file that provides the basic entry point to a browser. It incorporates the basic Silverlight browser control and includes at least two JavaScript file references through SCRIPT tags with SRC values for CreateSilverlight.js and Silverlight.js (see the following descriptions of these files). The root HTML file can also contain other HTML content that displays around the Silverlight content.
- CreateSilverlight.js: In the Visual Studio templates, this file is named TestPage.html.js. This JavaScript file contains one parameterless method, createSilverlight. This method is a template within which you call the createObject or createObjectEx method, both of which are defined by Silverlight.js. Specific parameters to createObject (or packaged parameters to createObjectEx) specify the Silverlight control's size on the HTML page and reference the XAML markup file that contains the Silverlight UI definition. Because the method contents change per application, each Silverlight-based application typically has a unique CreateSilverlight.js file.
- Silverlight.js: This JavaScript file defines the createObject and createObjectEx methods that you call from CreateSilverlight.js to instantiate the Silverlight control in the HTML page. It also provides code to handle the client user experience if the Silverlight control is not present. You host this file on your site (or deploy it to the client), but you typically do not modify its existing methods. You could add methods and other code to it that are specific to your application.
- Page.xaml: This XAML file is referenced by your createSilverlight or createSilverlightEx method call. It defines the UI that will appear as the Silverlight content. The root element tag includes the minimum xmlns definitions that are required for a working Silverlight-based application. Canvas is the typical root element because it provides the widest support for UI composition. If your Silverlight-based application uses managed code for event handling, the root element includes an x:Class attribute, which enables you to reference handlers that are defined in your managed code from XAML.
Add ASP.NET Web Application Project:
The next task is to add the Web Application Project to your solution. Please note that you can also run your Silverlight applications without adding a ASP.NET project by using the Test.html file.
Add Reference of Silverlight Project to the ASP.NET Project:
In order for the Web Project to access the Silverlight project you must add a reference to the Silverlight project using the Add Silverlight reference option. You can view this option by right clicking on the ASP.NET Web Application project and selecting “Add a Silverlight Reference”. Finally, you can locate your Silverlight project and click “OK” to add a reference.
Adding Effects Using Expression Blend 2 May CTP:
Expression Blend is a tool that enables the developers to create Silverlight effects without having to write complex XAML code. To open your Page.xaml file in Expression Blend simply right click on the file and select “Open in Expression Blend”.
As you can see the page is currently blank. You can easily change the background color by using the Brushes pane displayed in the left window.
Now, let’s add the text to the file using the text icon on the left.
Now, let’s add animation to the text.
Adding Animation to the Text:
To add the animation the first thing you must do is to enable the “Animation Pane”. Simply, select Window and then select “Animation Workplace”. This will add the animation pane to the Expression Blend window.
Now, add a new timeline as shown in the image below:
Let’s add the animation so that the text size is increased. Select the text and then select the 5 second timeframe. This means that our animation will be 5 seconds long. After selecting the text and the time on the time frame we can add our simple animation. Simply, change the size of the text from the text pane to something big like “48”.
That’s it. Save your project and go back to the Visual Studio.NET. Now, compile and build the project and you will notice that the HelloWorldSilverlight.XAML has been added to the ASP.NET Web Application Project. Now, add the HelloWorldSilverlight.XAML to the ASPX page by simply dragging and dropping the file to the ASPX page.
Now, run the page and you will see the Silverlight effect. If you like to view the effect I suggest you check out the following link:
http://aspadvice.com/blogs/azamsharp/archive/2007/07/02/Creating-My-First-Silverlight-Application.aspx
Conclusion:
Silverlight is a great platform to create RIA applications. In the later articles I will be discussing how to create and handles the events generated by the Silverlight controls.
I hope you liked the article, happy programming!
[Download Sample]