11001 – Animated Splash Screen

Animated Splash Screen

I find many Silverlight websites having the default Microsoft splash screen. The Silverlight loads the content (in XAP) one time; and later there is no postback as like other web applications. During the load time, having your logo with your own animated splash makes the site very rich. The effort to create one is very simple and in 3 steps.

Step 1:

Design the splash screeen (.xaml) with Progress bar (Rectangle) and the Textblock to display the download percentage. You can make your Company/Website logo to display on the screen. Don’t overload the screen with complex animation as it take more time further to load it’s content. Make it as simple just as Splash screen.
Copy the file (.xaml) in ClienBin folder.

          

In the figure below, there is a ScaleTransform progressBarScale, which shows the download percentage. The value for the transform comes from the DownloadProgress event of JavaScript function from Home page.

     

Step 2:

Create 2 Javascript functions: 1 – DownloadProgress and 2 – DownloadComplete.
DownloadProgress is fired when there is progress in download and the eventargs.progress gives the value of the download status. Assign the value to the TextBlock we created in Splash.xaml.

DownloadComplete
is fired when the download is completed. You can make use of this function to stop any StoryBoard created in Splash screen.

Step 3:

In the Param area of the home page, assign the SplashScreenSource to the Splash xaml created. Add the params for the events we created in previous step.

Note:

Don’t forget to include the Silverlight.js file in the head section. The latest version can be downloaded from Codeplex site.

We will be discussing the importance of the 2 main important .js files –
Silverlight.js and Silverlight.supportedUserAgent.js in more detail – in next article.

2 thoughts on “11001 – Animated Splash Screen

Leave a Reply

Your email address will not be published. Required fields are marked *