Splash Screen in Silverlight 4

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.

function appDownloadProgressChanged(sender, args) {
            var host = document.getElementById("SilverlightPlugIn");
            var percentTextBlock = host.content.findName("PercentageTextBlock");

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

List 2

Hope you get idea of how to integrate the custom splash screen with the silverlight application. I have created simple splash screen you can create animations during the download progress.

Note: As I have used the control of silverlight application like border, grid and text block I have added the reference of the PresentationCore and PresentationFramework in my web application.

I have not not included the silverlight application in the source project. As I was testing the output locally so I have embed large image files in the silverlight application so that size of the .xap file will  increase and it will take some time to download locally. You can download the source code from here 

All and any comments / bugs / suggestions are welcomed!