In this post I will show you how to
create the custom splash screen for your Silverlight application. You
have seen many software which use nice splash screen during loading of
the software applications like Microsoft office, excel and many others. I
have also created splash screen for my desktop applications which I
have developed during my professional life. But I didn’t created any for
the web application which I have developed in asp.net. But now the
Silverlight provide the functionality of the splash screen. Splash
screens provide something interesting and creative to increase
anticipation and excitement for the application.
The
splash screen is displayed while the .xap file is downloading when the
.xap file is downloaded the splash screen disappear. So xaml file for
the splash screen is not included in the Silverlight application rather
the splash screen file which is of xaml is placed in the web
application. When Silverlight application start the default splash
screen which you can see is the shown in the image 1. Here you can see the spinning blue balls animation splash screen.
 |
| Image 1 |
Let us start with the our own splash screen , the splash screen which I have created is shown in the Image 2. In Image 2
you can see that I have created simple splash screen for my application
which will show the percentage complete in digits so that user can see
how much the application is downloaded.
 |
| Image 2 |
The code for the splash screen which
is written in the file SilverlightLoader.xaml is place in the web
project which you can see after downloading the source code. The code
consist of the grid layout and then Border and the textblock which will
shown the download complete in percentage. I have also set drop shadow
effect for the border which contain the text block control.
The next step is to integrate the custom splash screen with the web application. You can see in the List 1
splashScreenSource property is used to reference the splash screen. By
using this property, you can point to where a custom splash screen’s
XAML is stored.
<div id="silverlightControlHost"> <object id="SilverlightPlugIn" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%"> <param name="source" value="ClientBin/Custom Splash Screen.xap" /> <param name="onError" value="onSilverlightError" /> <param name="background" value="white" /> <param name="minRuntimeVersion" value="4.0.50401.0" /> <param name="splashScreenSource" value="SilverlightLoader.xaml" /> <param name="onSourceDownloadProgressChanged" value="appDownloadProgressChanged" /> <param name="autoUpgrade" value="true" /> <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration: none"> <img src="http://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>
List 1
The next step is to monitor the
download progress of the .xap file for this you need to wire up
JavaScript event handlers to the onSourceDownload-ProgressChanged events
defined by the plug-in. The definition of the changed event is listed
in the List 2 as shown below. The onSourceDownloadProgressChanged
event will fire any time the progress of a download has changed by 0.5
percent or more. If this event is triggered, you may access the total
progress through the second parameter of the
onSourceDownloadProgressChanged event. This parameter exposes a
floating-point property called progress. The value of this property is
between 0.0 and 1.0, so you must multiply the value by 100 in order to
convert the value to a percentage. When the progress has reached 1.0,
the onSource- DownloadComplete event will fire.
