thomas martinsen

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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   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.