Quick Silverlight Tip: Creating/Destroying Silverlight 2 Object dynamically

August 5, 2008

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…

image 

After clicking “Make SL” button application’s object being created and the application being loaded:

image

Pressing “Hide SL” button (while debugging application) brings us to “Application_Exit” breakpoint and also cleans the object:

image image

 

Mission accomplished – Silverlight application added and fully removed dynamically.

Source for sample here.

 

Enjoy,

Alex

Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*