SplashScreen in Silverlight

Silverlight verwendet eine Standard-Fortschrittsanzeige für den Download der Anwendung an. Nachfolgend findet sich eine Abbildung derselben – diese dürfte aber hinreichend bekannt sein.

In einem professionellen Umfeld möchte man diese hingegen meist austauschen. Dazu sind nur wenige Schritte notwendig, welche nachfolgend anhand eines einfachen Beispiels beschrieben werden.

Schritt 1 – Splash-Screen erstellen

Beim Erstellen eines neuen Silverlight-Projektes kann die Wahl getroffen werden, ein Webprojekt (für Tests) zu erstellen. Das ist für dieses Beispiel notwendig. Da im Web-Projekt der Splash-Screen angesiedelt sein wird, müssen drei Referenzen eingebunden werden:

• PresentationCore
• PresentationFramework
• WindowsBase

Die Referenzen sind auch in der nachfolgenden Abbildung ersichtlich.

Nun ist der Splash-Screen an sich einzubinden. Dazu ist eine neue Silverlight 1.0 JScript Page hinzuzufügen, diese wird SplashScreen.xaml benannt.:

Im Markup wird ein Grid-Element, ein Border und ein TextBlock verwendet:

<Grid xmlns="schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="schemas.microsoft.com/winfx/2006/xaml"

        Background="LightGray">

  <Border CornerRadius="5" 

          BorderBrush="Black" 

          BorderThickness="4" 

          Padding="13" 

          Width="120" 

          Height="65" 

          Background="Yellow">

    <TextBlock x:Name="PercentageTextBlock" 

               Text="0 %" 

               FontSize="24" 

               FontStretch="Expanded" 

               FontStyle="Italic" 

               FontWeight="Bold" 

               Foreground="Black"/>

  </Border>

</Grid>

Hinweis: Bitte beachten, dass die XML-Namespaces ausgetauscht werden müssen, damit die Elemente gefunden werden.

Das TextBlock-Element erhält den Namen PercentageTextBlock. Auf diesen wird später per Javascript zugegriffen.

Schritt 2 – Konfiguration und Ansprechen des Splash-Screens

Per Standard wird das Silverlight-Objekt wie folgt eingebunden:

<div id="silverlightControlHost">

    <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" 

        width="100%" height="100%">

      <param name="source" value="ClientBin/SilverlightApplication2.xap"/>

      <param name="onError" value="onSilverlightError" />

      <param name="background" value="white" />

      <param name="minRuntimeVersion" value="4.0.50826.0" />

      <param name="autoUpgrade" value="true" />

      <a href="go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">

          <img src="go.microsoft.com/fwlink/?LinkId=161376" 

               alt="Get Microsoft Silverlight" style="border-style:none"/>

      </a>

    </object>

    <iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>

</div>

Dies ist nun zu weitern. Zum Einen muss dem object-Tag ein Identifier zu verpassen, auf den dann später zugegriffen wird. Zum Zweiten muss der Splash-Screen selbst konfiguriert werden, als auch die Möglichkeit, auf den Download-Fortschritt zu reagieren.

Für die beiden letzteren Fälle stehen zwei Parameter zur Verfügung:

• splashScreenSource
  
  Dieser Parameter enthält die Uri zum SplashScreen der angezeigt werden soll.
• onSourceDownloadProgressChanged
  
  Hier wird eine Javascript-Funktion definiert, welche bei einer Veränderung des Download-Fortschrittes aufgerufen wird.

Hinweis: Es steht ein weiterer Parameter onSourceDownloadComplete zur Verfügung. Dadurch kann auf die Fertigstellung des Downloads reagiert werden.

In der Endausbaustufe sieht die Einbindung der Silverlight-Anwendung folgendermaßen aus:

<div id="silverlightControlHost">

    <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" 

        width="100%" height="100%" 

        id="SilverlightHostObject">

      <param name="source" value="ClientBin/SilverlightApplication2.xap"/>

      <param name="onError" value="onSilverlightError" />

      <param name="background" value="white" />

      <param name="minRuntimeVersion" value="4.0.50826.0" />

      <param name="autoUpgrade" value="true" />

      <param name="splashScreenSource" value="SplashScreen.xaml" />

      <param name="onSourceDownloadProgressChanged" value="onDownloadProgressChanged" />

      <a href="go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">

          <img src="go.microsoft.com/fwlink/?LinkId=161376" 

               alt="Get Microsoft Silverlight" style="border-style:none"/>

      </a>

    </object>

    <iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>

</div>

Nun fehlt nur noch die Javascript-Funktion onDownloadProgressChanged, welche durch das Ereignis onSourceDownlaodProgressChanged aufgerufen wird:

function onDownloadProgressChanged(sender, args) 

{

    var silverlightHost = document.getElementById("SilverlightHostObject");

    var percentTextBlock = silverlightHost.content.findName("PercentageTextBlock");

    percentTextBlock.Text = "" + Math.round(args.progress * 100) + " %";

}

Hier wird im ersten Schritt das Silverlight-Hostobjekt bezogen, das TextBlock-Element gesucht und der Wert des Fortschritts übergeben.

Das Ergebnis sieht dann wie folgt aus:

Fazit

Der Austausch des Silverlight-Splash-Screens ist eine sehr einfache Angelegenheit und verleiht der Anwendung ein professionelleres Erscheinungsbild. Es bietet sich daher an, diese Möglichkeit zu nutzen. Mit ein wenig Gespür können schnell gute Ergebnisse erzielt werden.