Silverlight Splashscreen

4 Mar

Having a user wait for your Silverlight application to load is not a perfect idea. First step to avoid this would be to build a smaller XAP-file. That is not always possible and a custom splashscreen therefore makes sense.

Implementing a splashscreen is actually pretty easy. I have made a small tutorial in case you’re using the Silverlight servercontrol (<asp:Silverlight/>):

1) Add a splashscreen.xaml file (the name is not important – just need to be a .xaml file) to your web application hosting the Silverlight application.

2) Open your .aspx file where your Silverlight servercontrol is added – add a link to the splashscreen.xaml file in your Silverlight tag:

   1: SplashScreenSource="SplashScreen.xaml"

3) Add content to your splashscreen.xaml file:

   1: <Grid
   2:     xmlns=""
   3:     xmlns:x=""
   4:     HorizontalAlignment="Stretch"
   5:     VerticalAlignment="Stretch"
   6:     Background="#333333">
   7:     <TextBlock VerticalAlignment="Center"
   8:                HorizontalAlignment="Center"
   9:                x:Name="text1"
  10:                FontFamily="Arial"
  11:                FontSize="72"
  12:                Foreground="#19FFFFFF"
  13:                FontWeight="Bold"/>
  14: </Grid>

This will just make a gray background with a large text in the middle.

4) Go back to your .aspx file and add a javascript function. The function is used to fill the text displayed at the splashscreen.xaml file:

   1: <script type="text/javascript">
   2:     function onSourceDownloadProgressChanged(sender, args) {
   3:         var myHost = document.getElementById("Xaml1");
   4:         var textblock = myHost.content.findName("text1");
   5:         textblock.Text = Math.round(args.get_progress() * 100) + "%";
   6:     }
   7: </script>

Make sure you also trigger this javascript function from your Silverlight tag using the OnPluginSourceDownloadProgressChanged-tag:

   1: OnPluginSourceDownloadProgressChanged="onSourceDownloadProgressChanged"

And you’re done! :) Now you should have a result looking something like this while your Silverlight application loads:


Now it’s all up to you and your imagination to make some sweet xaml-code to spice it up.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: