Articles → SILVERLIGHT → Basic Example Of Silverlight

Basic Example Of Silverlight









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








<!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>






















<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>








Picture showing the ellipse created in the silverlight
Click to Enlarge


Adding Events In Silver Lights






 function changelocation(sender, args) {

 sender["Canvas.Top"] = 70;

}




<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/FeedbackCharacters remaining 250