Open Visual Studio. Start from a Silverlight project for an application. For this example, name the project SplashScreenSource

Important Note:
Choose the option that creates a Web site for your project. Leave the checkbox Host the Silverlight Application in a new Web site checked; this is also the default. You must do this in order to see download progress; the other option views an HTML page in the file system and the file transfer will happen too quickly to see the splash screen.

To introduce enough download time to make your splash screen testable, make your package deliberately large. The quickest way to do this is to pack the primary assembly with large embedded resource files (these will increase the size even if you do not actually reference them). Your project is already producing the assembly as part of the package. Find some large files somewhere on your computer, which will not compress when packaged into the assembly and the XAP package (photographic images are good for this purpose, or multi-page binary-format documents). Copy and paste them into the project directory, and add them to the project as existing items. Set the build action for each of these files to Resource. The goal is to introduce at least 5 MB of resources into your assembly and package.

(Optional.) Add a TextBlock or some other visible UI element to mainpage.xaml (the initial page of your managed API application) so that you can easily see that the source has completed downloading and you are now displaying XAML that came from the main application package.

Build your project and make sure that it compiles. The start action at this point will just play the default splash screen. Next, you will replace the default behavior.

Right-click SplashScreenSource.Web in the Solution Explorer and choose Properties. Click the Web tab. Change the Start Action default page from SplashScreenSourceTestPage.aspx to SplashScreenSourceTestPage.html.

Right-click SplashScreenSource.Web in the Solution Explorer and choose Add, New Item. Select the Silverlight option in the Categories tree view. Choose the Silverlight JScript Page option. Name the page SplashScreen.xaml. Click Add.

Open SplashScreen.xaml for editing, if it is not already open. This is where you will author your splash screen. Select All, and Paste over the existing code with the following, then save the file:

<Canvas
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        x:Name="parentCanvas" 
        Width="850"
        Height="600"
        Background="OldLace"
        >
  <Canvas Canvas.Top="228.834" Canvas.Left="246.329" Width="357" Height="31.379">
    <Rectangle Width="27.545" Height="1" x:Name="uxProgress" Canvas.Top="29.545" Canvas.Left="1.4">
    <Rectangle.RenderTransform>
      <TransformGroup>
        <ScaleTransform x:Name="uxProgressBar" ScaleX="1" ScaleY="0"/>
        <SkewTransform AngleX="0" AngleY="0"/>
        <RotateTransform Angle="270"/>
        <TranslateTransform X="0" Y="0"/>
      </TransformGroup>
    </Rectangle.RenderTransform>
    <Rectangle.Fill>
      <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
        <GradientStop Color="#FFFFFFFF" Offset="1"/>
        <GradientStop Color="#FFFFFFFF" Offset="0"/>
        <GradientStop Color="#FF2975D0" Offset="0.28"/>
        <GradientStop Color="#FF2975D0" Offset="0.72"/>
      </LinearGradientBrush>
    </Rectangle.Fill>
  </Rectangle>

  <TextBlock x:Name="uxStatus" Height="25" Canvas.Left="125" Text="Loading..." TextWrapping="Wrap" Canvas.Top="4.16"/>

  <Path Width="356.85" Height="1" Fill="#FF3A3A3A" Stretch="Fill" Stroke="#FF000000" Canvas.Top="0" Data="M0,170.5 L356.84209,170.5" Opacity="0.35"/>
  <Path Width="1.662" Height="29.03" Fill="#FF3A3A3A" Stretch="Fill" Stroke="#FF000000" Canvas.Top="0.48" Canvas.Left="0.2" Data="M360,168 L360,0" Opacity="0.35" />

  <Path Width="357.84" Height="1" Fill="#FF3A3A3A" Stretch="Fill" Stroke="#FF000000" Canvas.Top="29" Data="M0,170.5 L356.84209,170.5" Opacity="0.35"/>
  <Path Width="358.85" Height="1" Fill="#FFA2A2A2" Stretch="Fill" Stroke="#FF000000" Canvas.Top="30" Data="M0,170.5 L356.84209,170.5" Opacity="0.25"/>
  <Path Width="1.662" Height="30" Fill="#FF3A3A3A" Stretch="Fill" Stroke="#FF000000" Canvas.Left="356.01" Data="M360,168 L360,0" Opacity="0.35" Canvas.Top="-0.498"/>
  <Path Width="1" Height="31" Fill="#FFA2A2A2" Stretch="Fill" Stroke="#FF000000" Canvas.Left="357.333" Data="M360,168 L360,0" Opacity="0.245" Canvas.Top="-0.498" />      
</Canvas>
</Canvas>

Note:
For purposes of this example, we will provide you with the splash screen animation, but you could put your own animation here as well. For more information about possible animation techniques, see Silverlight Splash Screens.

Return to the Silverlight object element area of SplashScreenSourceTestPage.html for editing. Notice that there are a number of "params" elements as child elements of object already. You will now add several params elements to add your custom splash screen information. Add the following params elements:

<param name="splashscreensource" value="SplashScreen.xaml"/>
<param name="onSourceDownloadProgressChanged" value="onSourceDownloadProgressChanged" />

The second params element is referencing a JavaScript event handler, which you must now define. Right-click SplashScreenSource.Web in the Solution Explorer. Find the file SplashScreen.js in the solution's file list (this file was added when you added SplashScreen.xaml in a previous step. Open SplashScreen.js for editing.

Delete all pre-existing content of SplashScreen.js. Paste in the following onSourceDownloadProgressChanged function, which will update the progress bar in SplashScreen.xaml.

function onSourceDownloadProgressChanged(sender, eventArgs)
{
    sender.findName("uxStatus").Text =  "Loading: " + Math.round((eventArgs.progress * 1000)) / 10 + "%";
    sender.findName("uxProgressBar").ScaleY = eventArgs.progress * 356;
}

Return to SplashScreenSourceTestPage.html for editing. You still need to reference the JavaScript file you just created. Just after the head element in the HTML, add the following:

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

Build your project and make sure that it compiles. The start action at this point will now load SplashScreenSourceTestPage.html and first load your splash screen, and then the source.

Clear your browser cache (otherwise, the assembly might still be cached as content by the browser, and you will not experience the load time). Run the application again.