Is the in-stock splash screen in Silverlight application boring you? Here is an easy way to create custom splash screens for your Silverlight application. Essentially the splash screen itself is an XAML file with the desired graphical content and the download progress of the XAP can be tracked using a little javascript code. As the C# managed enironment has not been loaded we can't use C# code to track the progress. Also the XAML file should not be the part of the XAP file as it has to be displayed while the XAP is been loaded.


To craete a custom splashscreen lets first start a Silverlight project with ASP.NET test website.Then, add a new XAML file to your ASP.NET website (not the Silverlight project). To do so, select the ASP.NET website in the Solution Explorer and choose Website > Add New Item. Choose the Silverlight JScript page template, enter a name(CustomSplashScreen.xaml here), and click Add. This XAML file will hold the markup for your splash screen. In our application we are creating XAML like this to build a custom splashscreen like the image below.

<Grid xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
<Grid >
<Rectangle x:Name="progressBarBackground" Fill="White" Stroke="Black"
StrokeThickness="1" Height="30" Width="200" Grid.Row="1"></Rectangle>
<Rectangle x:Name="progressBar" Fill="Yellow" Height="28" Width="0"
Grid.Row="1" HorizontalAlignment="Left">
</Rectangle>
</Grid>
<TextBlock x:Name="progressText" HorizontalAlignment="Center"
Text="0% downloaded ..."></TextBlock>
</StackPanel>
</Grid>

Next we need to add a little javascript code to track the progress of the XAP file. the event looks like this

<script type="text/javascript">
function onSourceDownloadProgressChanged(sender, eventArgs)
{
sender.findName("progressText").Text = Math.round((eventArgs.progress * 100)) + "% downloaded ...";
sender.findName("progressBar").Width = eventArgs.progress * sender.findName("progressBarBackground").Width;
}
</script>

Also add the following parameters to the <object> tag

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

The parameter 'splashscreensource' is used to identify the splash screen and 'onsourcedownloadprogresschanged' is used to hook up the javascript event.

If instead of <object> tag Silverlight web control is used , it also has two similiar properties named 'SplashScreenSource' and 'OnSourceDownloadProgressChanged'.

Example

<asp:Silverlight ID="silverlightControl" runat="server"
Source="~/ClientBin/MyApp.xap" Version="2.0" Width="800" Height="500"
SplashScreenSource="~/CustomSplashScreen.xaml"
OnSourceDownloadProgressChanged= "onSourceDownloadProgressChanged" />

To test the application add some large mp3 files and set the build action of each one to Resource so it’s added to the XAP file and will be downloaded slowly in the local system.

Labels: ASP.NET, C#, Code, DOTNET, How to, Javascript, Silverlight