Articles → SILVERLIGHT → Basic Example Of Silverlight

Basic Example Of Silverlight

Silverlight is the cross browser and cross platform plug-in which allows you to create the rich internet application (just like flash. But there is difference between flash and silver lights. In flash you can make standalone windows based application but in silver light you can't make the standalone windows application).

Note → for creating the silverlight application.First of all download the plug-in from the internet.

I am creating very basic example of silverlight project. There are different contents of the silverlight project.

HTML file
Silverlight.js
XAML (EXTENSIBLE APPLICATION MARKUP LANGUAGE).

HTML File → In the HTML file. I am defining the div tag in which the silverlight objects will be displayed.

Silverlight.js → This is the JavaScript file if the part of the plug-in.Silverlight.js contains the code for instantiating the Silverlight control.

XAML File → This file describes the contents and behavior of the silverlight object. Every XAML file starts with the Canvas tag

Contents of HTML file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
	<title>Silverlight With Java Script Tutorial 6</title>
	<script src="js/Silverlight.js" type="text/javascript"></script>
</head>

<body bgcolor="white">
	<br />
	<center>
		<div id="Ag1Host" style="background: #FFFFFF"> </div>
	</center>
	<script type="text/javascript">
	Silverlight.createObjectEx({
		source: 'xaml/SilverlightWithJSTutorial06.xml',
		parentElement: document.getElementById("Ag1Host"),
		id: 'Ag1',
		properties: {
			width: '300',
			height: '100',
			background: '#00FFFFFF',
			isWindowless: 'true',
			framerate: '24',
			version: '0.90.0'
		},
		events: {
			onError: null,
			onLoad: null
		},
		context: null
	});
	</script>
</body>

</html>

In the above code

I have declared the div tag in which we will display the silverlight objects.

In the script tag I have used the function Silverlight.createObjectEx().

This function has different parameters.

First parameter (source) → path at which XAML file is placed.

Second parameter (parentElement) → object of the div tag in which silverlight object will be placed.

Third parameter (id) → Name of the silverlight object created by createObjectEx() method.

Fourth parameter (properties) → display properties i.e. size of the window, background color etc.

Fifth parameter (events) → Events of the silverlight object.

Contents of XAML file

<Canvas
	xmlns="http://schemas.microsoft.com/client/2007"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
	<Ellipse Height="50" Width="50" Stroke="Black" StrokeThickness="5" Fill="Yellow" />
</Canvas>

Here in the Canvas tag I have declared xmlns(silverlight namespace) and xmlns:x (xaml namespace)

I have declared Ellipse tag for creating the ellipse tag.

Now click on the HTML file and you will see the output

Picture showing the ellipse created in the silverlight

Click to Enlarge

Adding Events In Silver Lights

Here I am taking a simple mouse click event. On mouse click I'll call a javascript function.

First of all I'll add the javascript function for changing the position of Ellipse

 function changelocation(sender, args) {

 sender["Canvas.Top"] = 70;

}

To call the event. I have added the code in XAML file.

<Canvas
	xmlns="http://schemas.microsoft.com/client/2007"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" MouseLeftButtonDown="changelocation">

Multiple Canvas In A Single Xaml File

<Canvas
	xmlns="http://schemas.microsoft.com/client/2007"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
	<Canvas>
		<Ellipse Height="50" Width="50" Stroke="Black" StrokeThickness="5" Fill="Yellow" />
	</Canvas>
	<Canvas>
		<TextBlock x:Name="Hello" Canvas.Left="0" Canvas.Top="50" Foreground="Blue" Text="Hello Silverlight" />
	</Canvas>
</Canvas>

Posted By -	Karan Gupta

Posted On -	Wednesday, February 10, 2010

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**