Freigeben über

Silverlight: ¿Sabía que… puede cargar un control de Silverlight dinámicamente desde otro control de Silverlight?

  • Artikel

Este escenario describe como ejecutar una aplicación Silverlight desde otro sitio/aplicación Silverlight. A pesar que esto no es algo que está soportado directamente por Silverlight, lo puede lograr añadiendo un control adicional Silverlight “ocultado” en la página web.

En este control, tiene que establecer Source = “” hasta que esté listo para cargar y mostrar el control. Posicione el control dentro de un DIV, que también empieza ocultado. Puede cargar y descargar el control, igual que establecerlo dinámicamente apuntando a un XAP para cargar otras aplicaciones en el sitio Web.

Descripción del proceso

Dentro de mi sitio Web (por ejemplo en default.aspx file):

· Control Silverlight principal que representa mi sitio Web:

<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>

· Segundo control Silverlight que cargo y muestro en mi sitio Web:

<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>

Algunas notas:

  1. Establecer la orden z-index del control principal de Silverlight superior al segundo control para que aparezca primero.
  2. Establecer display = none en DIV para el segundo control de Silverlight para que no se muestre y no interfiera con el control principal y el mouse/teclado.
  3. Establecer position = absolute para que los controles puedan “flotar” sobre cada uno. Puede ajustar el relleno (padding) para posicionar los controls en la página Web.
  4. Establecer Source =”” en el segundo control de Silverlight para evitar que se cargue hasta cuando desee.

En el sitio Web (default.aspx) añadir 2 funciones Javascript que la aplicación Silverlight pueda llamar para cargar y ocultar el segundo control Silverlight.

LoadSilverlightControl() – Esta función utiliza un parámetro que contiene la ruta completa del XAP que deseo cargar. Por ejemplo: “ClientBin\TankWar.xap”

  1. Para el control Silverlight, utilizo setAttribute() para cambiar el origen del control Silverlight.
  2. Para DIV, modifico style.display estableciendo “block” para mostrar el control o “none” para ocultarlo.

<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>

Llamada desde Silverlight->Javascript para cargar y ejecutar el segundo control de Silverlight:

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

Para ocultarlo:

HtmlPage.Window.Invoke("HideSilverlightControl");

Resultado

En mi página de ejemplo, hago clic sobre el botón “Games”.

image

Y se carga el juego.

image

Contenido sindicado de Silverlight Tips of the Day - Blog by Mike Snow

Traducción autorizada por Mike Snow.