Silverlight Tips of the Day - Blog by Mike Snow

Silverlight Tip of the Day #57 – How to Dynamically Load a Silverlight Control within another Silverlight Control

Let’s say your site is entirely written in Silverlight but you want to be able to load and run a different Silverlight application within your main Silverlight application/site. Currently this scenario is not directly supported in Silverlight. However, I have a work around that will more or less accomplish this scenario.

The way I do this is to add a second, hidden Silverlight control to your web page. I set the Source for this second Silverlight control to be empty (“”) until I want the Silverlight control to load and display. I also put the control in a DIV that is hidden. You can load and unload this control as well and you can dynamically set it to point to different XAP’s to load different applications in your site.

Step 1.

In my web site (I.e. default.aspx file):

Main Silverlight Control that represents my web site:

<div style="height: 100%; z-index: 1; position: absolute;">
    <asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/SLDev.xap"  MinimumVersion="2.0.30523" Width="100%" Height="100%" />
</div>

Second Silverlight control that we will load and display within the main site:

<div id="myDIV" style="z-index: 2; display: none; position: absolute; padding-left: 0px;   padding-top: 200px;">
    <asp:Silverlight ID="Silverlight1" runat="server" Source="" MinimumVersion="2.0.30523" Width="800px" Height="600px" />
</div>

Things to notice:

1. I set the style z-index order to be higher for the second Silverlight control than the first so that it appears on top.
2. I set style display = none for the DIV of the second Silverlight control so that it is not displayed and does not interfere with mouse/keyboard input for the first Silverlight control.
3. I set style position = absolute so that the controls can float on top of each other. You will want to adjust the padding-left and padding-right to properly position the control where you want it on your site.
4. I set Source =”” for the second Silverlight control to keep it from loading an application until I am ready.

Step 2.

In my web site (I.e default.aspx) I add a two Javascript functions that my Silverlight application can call to load and hide the second Silverlight control. Few notes:

1. LoadSilverlightControl() – This function takes a parameter that contains the full path to the XAP we want to load. Example: “ClientBin\TankWar.xap”
2. For the Silverlight Control, I call setAttribute() to change the source of the Silverlight control.
3. For the DIV I modify style.display setting it to “block” so that it will display or “none” to hide it.

<script type="text/javascript">

    function LoadSilverlightControl(ctrl) {

        var control = document.getElementById("Silverlight1");

        var div = document.getElementById("myDIV");

        div.style.display = "block";        

        control.setAttribute("Source", ctrl);

    }

    function HideSilverlightControl() {

        var control = document.getElementById("Silverlight1");

        var div = document.getElementById("myDIV");

        div.style.display = "none";

        control.setAttribute("Source", "");

    }

</script>

Step 3.

The call from Silverlight->Javascript to make the control load and run:

HtmlPage.Window.Invoke("LoadSilverlightControl", "ClientBin/TankWar.xap");

To hide it:

HtmlPage.Window.Invoke("HideSilverlightControl");

Result.

The following screen shots show this in action. Click on the “Games” button….

And my Tank War application is loaded and displayed.