Book Image

MCTS: Microsoft Silverlight 4 Development (70-506) Certification Guide

By : Johnny Tordgeman
Book Image

MCTS: Microsoft Silverlight 4 Development (70-506) Certification Guide

By: Johnny Tordgeman

Overview of this book

Microsoft Silverlight is a powerful development platform for creating engaging, interactive applications for many screens across the Web, desktop, and mobile devices. Silverlight is also a great (and growing) Line-Of-Business platform and is increasingly being used to build data-driven business applications. Silverlight is based on familiar .NET languages such as C# which enables existing .NET developers to get started developing rich internet applications almost immediately. "MCTS: Microsoft Silverlight 4 Development (70-506) Certification Guide" will show you how to prepare for and pass the (70-506): TS: Microsoft Silverlight 4 Development exam.Packed with practical examples and Q&As, MCTS: Microsoft Silverlight 4 Development (70-506) Certification Guide starts by showing you how to lay out a user interface, enhance the user interface, implement application logic, work with data and interact with a host platform amongst others.
Table of Contents (15 chapters)
MCTS: Microsoft Silverlight 4 Development (70-506) Certification Guide
About the Author
About the Reviewers

Integrating Silverlight with HTML

Now that we know how the Silverlight application model works, let's see how Silverlight interacts and integrates with HTML to actually display the application to the user.

There are two ways to add a Silverlight application to your HTML page as follows:

  • Using the object tag

  • Using the JavaScript helper files

Using the object tag

The object tag method is the easiest way to add a Silverlight application to your page. Using this method, you won't need to use any external JavaScript files for adding a Silverlight application to your page. This method is also supported by all the browsers that are supported by Silverlight. A basic Silverlight object tag will look as follows:

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value=" MyCoolApp.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.60310.0" />
<param name="autoUpgrade" value="true" />
<a href=" 149156&v=4.0.60310.0" style="text-decoration:none">
<img src="" alt="Get Microsoft Silverlight" style="border- style:none"/>

The object tag has four mandatory attributes as follows:

  • data: While not used by most browsers in the context of Silverlight, it is recommended by Microsoft to have the value of this attribute set to"data:application/x-silverlight-2," to prevent decreased performance in some browsers. You can think of this attribute as a sort of MIME type.

  • type: This attribute actually represents the MIME type. It identifies the object tag as a Silverlight object, which will cause the browser to initiate the Silverlight plugin in order to render the object.

  • width and height: They specify the width and height of the Silverlight application. You can specify the measurements in pixels or percentages.

Inside the object tag we have several param entries, as listed in the following table:






This specifies the URI to the XAP file. It can be a relative or absolute URI.




This specifies a JavaScript function to call when an error occurs while loading the Silverlight application.




This specifies the background color for the object tag rectangular area that displays the Silverlight application. It can accept color names (such as Red) or hexadecimal values with or without alpha (#ff000000 or #000000).




This specifies the earliest Silverlight version required to run the application.


Currently installed version


This specifies whether or not to automatically update to the specified version in the minRuntimeVersion attribute if the currently installed version is an older version.




This specifies user-defined initialization parameters using comma-separated key-value pairs, for example, UserName=JohnnyT



There are many more parameters you can use with your Silverlight object tag, and you can read more about them at Microsoft's MSDN web page—

If the browser fails to render the Silverlight application, it will fall back to the content inside of the object tag. The default content of a Silverlight object tag will look like the following screenshot:

You can always change the content of the object tag to your liking by simply removing all the content the object tag currently has (remember, don't delete the param entries!) and writing your own HTML code instead.

Using the JavaScript helper files

If you need greater control on the object tag or the installing/upgrading process, you can use the JavaScript method.

The JavaScript method makes use of a helper file called Silverlight.js, which can be found in the Tools directory under the Silverlight SDK folder usually located at C:\Program Files (x86)\Microsoft SDKs\Silverlight\v4.0\Tools.

Once referenced, the Silverlight.js file creates a class called Silverlight, which will provide you with different methods and properties related to Silverlight, such as Silverlight.CreateObject, Silverlight.IsInstalled, and more.

Adding Silverlight using JavaScript is out of the scope of this book, but you can find all the information you need for it on MSDN at

Silverlight's interaction with JavaScript certainly doesn't end here. In Chapter 6, Interacting with the Host Platform, we will discuss many features of Silverlight-JavaScript-HTML integration, such as calling a JavaScript method from Silverlight, calling a Silverlight method from JavaScript, manipulating the Document Object Model (DOM) from Silverlight, accessing cookies, and more.

As you might recall, we have mentioned earlier in this chapter that Silverlight isn't limited to running inside the browser anymore. This new concept, called out-of-browser applications, was introduced back in Silverlight 3 and got heavily enhanced in Silverlight 4, so introducing it now would be the perfect way to finish off this chapter.