Custom Silverlight loading screen

The default Silverlight loading screen can quickly become a little boring and conservative, so here is a small guide for the people that wishes to add a custom loading screen (og splash screen if you will).

When you create a Silverlight Application using Visual Studio, you will get two projects – lets say you create a Silverlight Application and name it TestApp. In this case you will get a client project called TestApp and a server project called TestApp.Web as shown in the image. In the TestApp.Web project you can create a folder in the root and call it “Splash” this is where we will be placing the splash image as well as the xaml file.The first thing we need to do is to modify the TestAppTestPage.aspx (unless you have set the .html as startup of course).

Replace the following line:

<script type="text/javascript" src="Silverlight.js"></script>

With:

<script type="text/javascript" src="SplashScreen.js"></script>
<script type="text/javascript" src="Silverlight.js"></script>

When that has been done you need to create a new JavaScript file, call it SplashScreen.js and place it in the root of the TestApp.Web project (or you can download it here). If you have created the file yourself you need to add the following method in the .js file:

function onSourceDownloadProgressChanged(sender, eventArgs)
{
    var myHost = document.getElementById("Xaml");
    var rectBar = myHost.content.findName("rectBar");
    var rectBorder = myHost.content.findName("rectBorder");
    if (eventArgs.progress)
        rectBar.Width = eventArgs.progress * rectBorder.Width;
    else rectBar.Width = eventArgs.get_progress() * rectBorder.Width;
}

The last think you need to change in the TestAppTestPage.aspx is the following object, the changes has been marked with bold:

<div id="silverlightControlHost">
  <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
    <param name="source" value="ClientBin/TestApp.xap"/>
    <param name="splashscreensource" value="Splash/SplashScreen.xaml"/>
    <param name="onSourceDownloadProgressChanged" value="onSourceDownloadProgressChanged" />
    <param name="onError" value="onSilverlightError" />
    <param name="background" value="white" />
    <param name="minRuntimeVersion" value="4.0.50401.0" />
    <param name="autoUpgrade" value="true" />
    <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
      <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
    </a>
  </object>
  <iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>
</div>

The final two things you do is to first create a image file named image.jpg and place it in the Splash folder (this will be the loading image), second you need to create a xaml file and call it SplashScreen.xaml – this file should also be placed in the Splash directory. In the empty SplashScreen.xaml file you add the following code:

<StackPanel xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" VerticalAlignment="Center" Margin="0,100,0,0">
    <Image Source="../Splash/image.jpg" Width="100" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10" />
    <Grid HorizontalAlignment="Center">
        <Rectangle x:Name="rectBorder" StrokeThickness="1" Stroke="#64d64d" Height="7" Width="150" HorizontalAlignment="Left"/>
        <Rectangle x:Name="rectBar" Fill="#64d64d" Height="7" Width="0" HorizontalAlignment="Left" />
    </Grid>
</StackPanel>

You can of course change any of this to better suit your needs… Hope this helps, if you should have any problems or questions you are welcome to leave a comment.

/Peter

See larger image Microsoft Expression Studio 4 Ultimate (DVD-ROM) List Price: $599.95 USD New From: $325.00 In Stock Used from: $366.00 In Stock Release date June 28, 2010.