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>
<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" />
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" />
Labels: ASP.NET, C#, Code, DOTNET, How to, Javascript, Silverlight