- ~ Posted by Deepak Kamboj on September 23, 2009
As we all know that Microsoft Silverlight is a cross-browser, cross-platform, and cross-device plug-in for delivering the next generation of .NET based media experiences and rich interactive applications for the Web. In order to work with Silverlight first you need to install the Silverlight plug-in. Please install the from Silverlight plug-in. To add Silverlight to your file, you need a reference to the Silverlight.js file into your, a xaml file that contains the behavior of the Silverlight and some JavaScript code to creates Silverlight plug-in instance.
Step - 1
If you are going to use Silverlight into your ASP.NET website, you need to add the reference of Silverlight.js file into your page (If you have master page, better to add the reference into it so that you don't need to add the reference to all your .aspx pages). Please note that the referecne of Silverlight should be placed between <head> and </head> tag and your code should look like <script src="Silverlight.js" type="text/javascript"></script>. Silverlight.js file can be found at this website too, however we suggest to get the latest from Microsoft website.
Step - 2
You need to create a placeholder for your Silverlight content inside your <body> </body> tag where you want your Silverlight content to appear. In general, you should create a div html element and specify its id property like this <div id="fundaSilverlightPluginHost"> </div>
Step - 3
Write the JavaScript code to call the initialization function of Silverlight object like this. You can write this code after your placeholder (Step-2).
<script language="javascript" type="text/javascript">
createSilverlightPlugin('fundaSilverlightPluginHost', '300', '200', 'YourXamlFilePath.xaml')
</script>
Here I am passing all the required value as a parameter. In this case the
1st parameter is the placeholder that I created in the 2nd step,
2nd parameter is the width of the Silverlight plug-in area
3rd parameter is the height of the Silverlight plug-in area
4th parameter is the .xaml file that specifies the behavior of the Silverlight object
Step - 4
Write JavaScript function to initialize the Silverlight object. In my case it looks like below. It can be placed inside the common JavaScript file of your website. In any case, this code must be rendered to the browse before last step (Step - 3) code otherwise browser may throw JavaScript error. Its always better to place this code between <head> and </head>.
function createSilverlightPlugin(placeHolder, width, height, xamlfile)
{
// Retrieve the div element you created in the previous step.
var parentElement = document.getElementById(placeHolder);
Silverlight.createObject
(
xamlfile, // Source property value.
parentElement, // DOM reference to hosting DIV tag.
placeHolder, // Unique plug-in ID value.
{ // Per-instance properties.
width:width, // Width of rectangular region of
// plug-in area in pixels.
height:height, // Height of rectangular region of
// plug-in area in pixels.
inplaceInstallPrompt:false, // Determines whether to display
// in-place install prompt if
// invalid version detected.
background:'#fecefe', // Background color of plug-in.
isWindowless:'false', // Determines whether to display plug-in
// in Windowless mode.
framerate:'24', // MaxFrameRate property value.
version:'1.0' // Silverlight version to use.
},
{
onError:null, // OnError property value --
// event handler function name.
onLoad:null // OnLoad property value --
// event handler function name.
},
null
); // Context value -- event handler function name.
}
Step - 5
Now, you have the placehoder object and function to initialize the Silverlight object. Its time to write the behavior of the Silverlight object. So create a .xaml file and write below code. Please note that you need to specify this file path as a 4th parameter of Step - 3 initialization function.
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle Height="75" Width="200" Fill="LightGreen" Stroke="Red" StrokeThickness="2" Canvas.Left="5" Canvas.Top="5"></Rectangle>
<TextBlock Canvas.Left="85" Canvas.Top="20" FontSize="15" FontFamily="Arial, Verdana" Text="DotNetFunda.com Silverlight Tutorials"
FontWeight="Bold" Foreground="Blue" TextWrapping="Wrap"></TextBlock>
</Canvas>
Instead of writing above code into a separate .xaml file, you may write it into your .aspx page as well. In that case your code should look like below.
<script type="text/xml" id="xamlScript2">
<?xml version="1.0"?>
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle Height="75" Width="400" Fill="Blue" Stroke="Red"
StrokeThickness="2" Canvas.Left="5" Canvas.Top="5"></Rectangle>
<TextBlock Canvas.Left="20" Canvas.Top="30" FontSize="20"
FontFamily="Arial, Verdana" Text="DotNetFunda.com Silverlight Tutorials"
FontWeight="Bold" Foreground="White" TextWrapping="Wrap"></TextBlock>
</Canvas>
</script>
Notice that if you have written the .xaml code into your .aspx page, your Step - 3 code should be slightly changed as below. Here, instead of specifying the .xaml file path in the 4th parameter of initialization function, you need to specify the id of the .xaml code preceeded by #.
<script language="javascript" type="text/javascript">
createSilverlightPlugin('divDemoSliverlight', '450', '100', '#xamlScript2')
</script>
Step - 6
Thats it!, Just run your page in the browser and you should see a Silverlight banner like below.
References: http://www.silverlight.net
Backtrack: http://www.dotnetfunda.com/tutorials/silverlight/