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="HanuTechVision 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="HanuTechVision 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. Acknowledgement: I have taken reference of Silverlight.net website in writing these articles. |
No comments:
Post a Comment