Tutorial: create a custom Silverlight Splash Screen

The first time a user visit the page which holds your Silverlight app, the browser needs to download the XAP file first, but sometimes this file can become large, so Silverlight automatically displays its default “loading screen”, also called a “Splash Screen”:

Silverlight default splash screen

Good news is you can customize the default splash screen!

To do this you need to create a XAML file for the UI and use a bit of JavaScript to show progression status, this tutorial will show you how step by step. Source code is available at the end.

Build the animation in XAML

My goal in this tutorial is to display an animated UI and a progress bar, something like this:

Silverlight splash screen

Create a new blank XAML file in the web project, not in the Silverlight project as we want the plug-in to be able to display this file while your Silverlight app is loading, so it must not reside in the xap. Here I create a blank splash.xaml file in ClientBin folder. Also this is not a regular Silverlight xaml page with codebehind, so just create a new xml file and rename it as xaml.

Keep in mind that in this xaml splash screen you can only use Silverlight controls from the core plugin (no DataGrid, Calendar, Toolkit controls here…) because your app and referenced assemblies are not there yet…

Feel free to use Expression Blend to design this page.

For the animation part I use an Ellipse with a RotateTransform and animate its Angle property from 0 to 360 during 2 sec with a DoubleAnimation. The Ellipse will animate continuously until the xap has finished downloading.

For the progress bar I use 2 Rectangle, one for the black border and a green one to fill the former.


<Rectangle Stroke="#FF000000" Width="384" Height="29" RadiusX="2" RadiusY="2" StrokeThickness="3"/>
<Rectangle Fill="#FF03FF00" StrokeThickness="0" Width="377" Height="23.25" RenderTransformOrigin="0,0.5">
      <ScaleTransform x:Name="progressBarScale" />
<TextBlock Width="272" Height="62" Foreground="#FFFFFFFF" Text="" TextWrapping="Wrap" x:Name="txtLoading" FontSize="30"/>


The TextBlock will simply display progress percentage.

Notice the ScaleTransform named “progressBarScale” which will allow us to animate the green bar via JavaScript.


Activate your splash screen

To make your Silverlight application use your custom splash screen you set the SplashScreenSource object tag parameter and point to the xaml file.


<object data="data:application/x-silverlight-2," type="application/x-silverlight-2">
    <param name="source" value="ClientBin/CustomSplashScreen.xap"/>
    <param name="SplashScreenSource" value="ClientBin/splash.xaml" />
    <param name="onSourceDownloadProgressChanged" value="DownloadProgress" />

The onSourceDownloadProgressChanged param specify a JavaScript function that runs while the xap file is downloading.

For a comprehensive list of Silverlight param, see my previous post.


Display progression with JavaScript

On the same HTML page we add the DownloadProgress JavaScript function we can wire up to a function.

<script type="text/javascript">
function DownloadProgress(sender, eventArgs) {
    sender.findName("txtLoading").Text = "Loading: " + Math.round(eventArgs.progress * 100) + "%";
    sender.findName("progressBarScale").ScaleX = eventArgs.progress;

eventArgs.progress provide the loading progress value as a number from 0 to 1.
findName() function gets reference to the XAML element by x:Name, so we can display progress percentage in the TextBlock, and update the ScaleX property of the ScaleTransform to move the green bar. To make the green bar grow from left to right set the RenderTransformOrigin to 0.


Test your splash screen

Testing your custom splash screen locally can be hard because it loads too fast. To solve this add a big file in your Silverlight project and mark it as “Content” so it gets embedded in the XAP and slow down the loading time.

Here I add a video (big.avi - 90MB) just to try my splash screen, then I will remove it once I am satisfied with my loading experience.


Download source code


Technorati Tags:


  • Thanks for this tutorial! Simple and clear.

  • Very useful article. Is it possible to modify the source for the built-in animation?

    I want to SLIGHTLY modify the built-in default animation so the text (displaying the PERCENTAGE DOWNLOADED number)in the middle of the spinning blue balls is white and not black.

    I've looked at Silverlight.debug.js, but that seems to just handle installing and version checking etc. I can't see the source of this built-in default animation is in order to modify it for this one Silverlight app.

    Any thoughts?

  • Very good tutorial. I especially like how you show us a way to test our slash screen locally. Honestly that is the reason I have not used a splash screen much in the past.

  • This is cool, I have to play with this one at home now! :> Awesome!

  • Hello,
    Thanks a lot for that sample !!
    I still have a little problem...
    I can only get it working (my version of if) on Firefox and on the HTML page.
    Which means that as soon as it is a aspx page or IE it does not work anymore...
    Can you help me ?


  • DjoDjo, since you're able to get it to work in one browser but not another, I'm guessing it's a JS issue. I had the same problem with my JS, it just wasn't able to find the appropriate objects. Try some more different ways to "find" your SL objects.

Comments have been disabled for this content.