#2 - Estendere il plugin a tutta l'area della finestra del browser

di Alessio Leoncini, in Silverlight 1.0, 7 febbraio 2008

Archiviato in: Javascript, Silverlight, Windows Presentation Foundation, XAML

L'estensione dell'area occupata dal plugin è definita attraverso le proprietà Height e Width dell'elemento OBJECT ed EMBED dichiarati nell'html della pagina:

<div id="divSilverlightPlugInHost">
    <object type="application/x-silverlight" id="FirstSilverlightControl" width="640" height="480">
        <param name="background" value="#CCCCCC" />
        <param name="source" value="#Scene1xaml" />
        <embed type="application/x-silverlight" width="640" height="480" background="#CCCCCC" source="#Scene1xaml" />
    </object>
</div>

È possibile impostare questi valori anche utilizzando i corrispondenti parametri delle funzioni helper Silverlight.createObject e Silverlight.createObjectEx documentate nell'SDK di Silverlight:

<script type="text/javascript">
function createSilverlight()
{
    Silverlight.createObjectEx({
        source: '#Scene1xaml',
        parentElement:parentElement,
        id:'myPlugin',
        properties:{
        width:'100%',
        height:'100%',
        inplaceInstallPrompt:false,
        background:'Black',
        isWindowless:'false',
        framerate:'24',
        version:'1.0'},
        events:{
        onError:null,
        onLoad:Plugin_onLoad
        },
    initParams:null,
    context:null});
}
</script>

Le due proprietà accettano sia valori assoluti espressi in pixel che grandezze percentuali rispetto all'area occupata dall'oggetto al cui interno è contenuto il plugin; impostando entrambi questi valori a 100% l'intera area visibile del browser sarà occupata dalla nostra scena e sarà disponibile per animazioni coreografiche o, ad esempio, per una completa gestione in Silverlight delle immagini di sfondo del sito.
Per equiparare il comportamento dei browser Internet Explorer e Firefox è necessario specificare l'ingombro dell'oggetto al cui interno è renderizzato il plugin impostando gli opportuni attributi nello stile:

<div id="divSilverlightPlugInHost" style="bottom:0px; left:0px; position:absolute; right:0px; top:0px;">
    <script type="text/javascript">
            var parentElement = document.getElementById("divSilverlightPlugInHost");
            createSilverlight();
    </script>
</div>

In questo esempio il div divSilverlightPlugInHost avrà un posizionamento assoluto rispetto alla pagina e non avrà margini rispetto alla stessa.
È importante notare che questa configurazione imposta solo l'ingombro del plugin, il Canvas principale (il Root) manterrà le proprie dimensioni definite nel codice.
È possibile conoscere l'area del plugin effettivamente occupata attraverso le proprietà ActualWidth e ActualHeight dell'oggetto content del plugin stesso.