Le applicazioni Silverlight sono un misto di assembly .NET, risorse e markup XAML che vengono inglobati e compressi tramite ZIP in un file con estensione .xap. Quando poi il browser carica la pagina, il tag object specifico di Silverlight carica tale file dal server per eseguirne il contenuto. Qualora però questo file sia di grosse dimensioni, l'esecuzione dell'applicazione viene ritardata finché questo non viene completamente caricato. Per intrattenere e notificare l'utente che è in corso il caricamento, il plugin di Silverlight dispone già di un preloader standard che mostra la percentuale di caricamento.

Ciò nonostante è consentito attraverso un parametro indicare un preloader personalizzato così da poter inserire altre informazioni e cambiare layout. Per usufruire di questa funzionalità il controllo Silverlight per ASPNET, contenuto nell'assembly System.Web.Silverlight e disponibile con SDK, dispone della proprietà SplashScreenSource che permette di indicare il file XAML da caricare per la fase iniziale. Poiché il runtime non è ancora pronto e si vuole tenere più leggera possibile la fase di preloading, non è possibile usare codice managed, ma semplicemente affidarsi a codice JavaScript. Infatti oltre allo splash screen da utilizzare, si può indicare con onPluginSourceDownloadProgressChanged la funzione da richiamare quando la percentuale di caricamento cambia e poter quindi intervenire sugli elementi presenti nel file XAML.

Ecco quindi come configurare il controllo:

<asp:Silverlight ID="player" runat="server" 
    Source="~/ClientBin/PreloaderTest.xap" MinimumVersion="2.0.30523" 
    Width="100%" Height="100%" SplashScreenSource="~/Preloader.xaml" onpluginsourcedownloadprogresschanged="onSouceDownloadProgressChanged" />

Il file preloader.xaml contiene del semplice markup per mostrare la percentuale e una progress bar di caricamento:

<Canvas Canvas.Top="298.834"
        Canvas.Left="249.329"
        Width="357"
        Height="31.379">
   <Rectangle Width="27.545"
              Height="1"
              Fill="Green"
              Canvas.Top="29.545">
      <Rectangle.RenderTransform>
         <TransformGroup>
            <ScaleTransform x:Name="uxProgressBar"
                            ScaleX="1"
                            ScaleY="0" />
            <RotateTransform Angle="270" />
         </TransformGroup>
      </Rectangle.RenderTransform>
   </Rectangle>

   <TextBlock x:Name="uxStatus"
              Height="25"
              Canvas.Left="125"
              Text="Caricamento..."
              TextWrapping="Wrap"
              Canvas.Top="3.16" />

Per agire poi sulla TextBox e sul Rectangle per variare la sua dimensione, si definisce una funzione che viene chiamata più volte, a discrezione del plugin:

function onSouceDownloadProgressChanged(sender, args) {
    var p = $get("player").content;
    p.findName("uxStatus").Text = "Caricamento " + Math.round(args.get_progress() * 100) + "%";
    p.findName("uxProgressBar").ScaleY = args.get_progress() * 356;
}

Nel codice precedente si noti l'uso della proprietà content per accendere all'elemento radice del file XAML e il metodo findName per cercare gli elementi e agire sulle rispettive proprietà .NET. Per rendere visibile l'effetto e far durare il caricamento in fase di test, si consiglia di inserire nel progetto Silverlight un file di 5/10 MB con build action impostata su Resource.