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.

Silverlight Download Progress Indicator

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.

Referenzen einbinden

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

Silverlight 1.0 JScript Page hinzufügen

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

#f4f4f4; margin: 20px 0px 10px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'Courier New', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow: auto; border-top: silver 1px solid; cursor: text; border-right: silver 1px solid; padding-top: 4px" id="codeSnippetWrapper">
#f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px" id="codeSnippet">
<Grid xmlns="schemas.microsoft.com/winfx/2006/xaml/presentation"

#f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px">        xmlns:x="schemas.microsoft.com/winfx/2006/xaml"

        Background="LightGray">

#f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"> 

  <Border CornerRadius="5" 

#f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px">          BorderBrush="Black" 

          BorderThickness="4" 

#f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px">          Padding="13" 

          Width="120" 

#f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px">          Height="65" 

          Background="Yellow">

#f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px">    <TextBlock x:Name="PercentageTextBlock" 

               Text="0 %" 

#f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px">               FontSize="24" 

               FontStretch="Expanded" 

#f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px">               FontStyle="Italic" 

               FontWeight="Bold" 

#f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px">               Foreground="Black"/>

  </Border>

#f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px">  

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

#f4f4f4; margin: 20px 0px 10px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'Courier New', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow: auto; border-top: silver 1px solid; cursor: text; border-right: silver 1px solid; padding-top: 4px" id="codeSnippetWrapper">
#f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px" id="codeSnippet">
<div id="silverlightControlHost">

#f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px">    <#0000ff">object data="data:application/x-silverlight-2," type="application/x-silverlight-2" 

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

#f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px">      <param name="source" #0000ff">value="ClientBin/SilverlightApplication2.xap"/>

      <param name="onError" #0000ff">value="onSilverlightError" />

#f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px">      <param name="background" #0000ff">value="white" />

      <param name="minRuntimeVersion" #0000ff">value="4.0.50826.0" />

#f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px">      <param name="autoUpgrade" #0000ff">value="true" />

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

#f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px">          <img src="go.microsoft.com/fwlink/?LinkId=161376" 

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

#f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px">      </a>

    </#0000ff">object>

#f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px">    <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:

#f4f4f4; margin: 20px 0px 10px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'Courier New', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow: auto; border-top: silver 1px solid; cursor: text; border-right: silver 1px solid; padding-top: 4px" id="codeSnippetWrapper">
#f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px" id="codeSnippet">
<div id="silverlightControlHost">

#f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px">    <#0000ff">object data="data:application/x-silverlight-2," type="application/x-silverlight-2" 

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

#f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px">        id="SilverlightHostObject">

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

#f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px">      <param name="onError" #0000ff">value="onSilverlightError" />

      <param name="background" #0000ff">value="white" />

#f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px">      <param name="minRuntimeVersion" #0000ff">value="4.0.50826.0" />

      <param name="autoUpgrade" #0000ff">value="true" />

#f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px">      <param name="splashScreenSource" #0000ff">value="SplashScreen.xaml" />

      <param name="onSourceDownloadProgressChanged" #0000ff">value="onDownloadProgressChanged" />

#f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px">      <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" 

#f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px">               alt="Get Microsoft Silverlight" style="border-style:none"/>

      </a>

#f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px">    </#0000ff">object>

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

#f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"></div>

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

#f4f4f4; margin: 20px 0px 10px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: 'Courier New', courier, monospace; direction: ltr; max-height: 200px; font-size: 8pt; overflow: auto; border-top: silver 1px solid; cursor: text; border-right: silver 1px solid; padding-top: 4px" id="codeSnippetWrapper">
#f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px" id="codeSnippet">
function onDownloadProgressChanged(sender, args) 

#f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px">{

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

#f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px">    var percentTextBlock = silverlightHost.content.findName("PercentageTextBlock");

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

#f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px">}

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:

Silverlight Splash Screen

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.

Veröffentlicht von Norbert Eder

Ich bin ein leidenschaftlicher Softwareentwickler. Mein Wissen und meine Gedanken teile ich nicht nur hier im Blog, sondern auch in Fachartikeln und Büchern.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Cookie-Einstellungen
Auf dieser Website werden Cookie verwendet. Diese werden für den Betrieb der Website benötigt oder helfen uns dabei, die Website zu verbessern.
Alle Cookies zulassen
Auswahl speichern
Individuelle Einstellungen
Individuelle Einstellungen
Dies ist eine Übersicht aller Cookies, die auf der Website verwendet werden. Sie haben die Möglichkeit, individuelle Cookie-Einstellungen vorzunehmen. Geben Sie einzelnen Cookies oder ganzen Gruppen Ihre Einwilligung. Essentielle Cookies lassen sich nicht deaktivieren.
Speichern
Abbrechen
Essenziell (1)
Essenzielle Cookies werden für die grundlegende Funktionalität der Website benötigt.
Cookies anzeigen