Quick Silverlight Tip: Creating/Destroying Silverlight 2 Object dynamically
One of my clients asked me how to create and show (and then destroy) Silverlight application on the fly.
Here is very fast solution, which allows such an object to be created and destroyed.
First, we (still) need to have some DIV which will hold the object. Here is my sample page HTML:
1: <body>
2: <!-- Runtime errors from Silverlight will be displayed here.
3: This will contain debugging information and should be removed or hidden when debugging is completed -->
4: <div id='errorLocation' style="font-size: small;color: Gray;"></div>
5:
6: <input id="Button1" type="button" value="Make SL" onclick="MakeSL();" />
7: <input id="Button2" type="button" value="Hide SL2" onclick="HideSL('silverlightControlHost');" /> 8: <div id="silverlightControlHost" style="left:10px;top:10px;height:200px;width:320px">
9: </div>
10: </body>
Now let's see the "MakeSL" and "HideSL" JavaScript functions:
1: function MakeSL()
2: { 3: //Create Silverlight object as a string
4: var objScript = '<object data="data:application/x-silverlight," type="application/x-silverlight-2-b2" width="100%" height="100%">';
5: objScript += '<param name="source" value="ClientBin/TestApp.xap"/>';
6: objScript += '<param name="onerror" value="onSilverlightError" />';
7: objScript += '<param name="background" value="white" />';
8: objScript += '<a href="http://go.microsoft.com/fwlink/?LinkID=115261" style="text-decoration: none;">';
9: objScript += '<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>';
10: objScript += '</a>';
11: objScript += '</object>';
12: objScript += '<iframe style="visibility:hidden;height:0;width:0;border:0px"></iframe>';
13:
14: //Helper function call -> will add the object to DIV
15: writer(objScript, "silverlightControlHost");
16: }
17:
18: function HideSL(id)
19: { 20: //Remove object's InnerHTML -> in case of DIV with Silverlight object it also ends the Silverlight application
21: document.getElementById(id).innerHTML="";
22: }
23:
24: function writer(txt, id)
25: { 26: //Get DIV element and put objectString into its InnerHTML
27: var element = document.getElementById(id);
28: element.innerHTML = txt;
29: }
That's it... Now let's run the solution:
At the beginning - no Silverlight at page...
After clicking "Make SL" button application's object being created and the application being loaded:
Pressing "Hide SL" button (while debugging application) brings us to "Application_Exit" breakpoint and also cleans the object:
Mission accomplished - Silverlight application added and fully removed dynamically.
Source for sample here.
Enjoy,
Alex