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:
#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:
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.