Animated Splash Screen

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.