About 99% of the time, when I watch a Silverlight application load, I see the standard loading animation. I’ve seen some really cool Silverlight applications with a highly polished user experience and yet, they don’t spend an extra 10 minutes to make the loading experience decent. This is very surprising to me because it is so very easy to make your own custom splash screen that blends much better than the standard splash.
Default Loading Experience in Silverlight (Meh…)
It’s not that I don’t like the default loading animation. I just get tired of seeing it in almost every single Silverlight application out there.
Here is an example loading screen from Silverlight Contrib.
This only took a few lines of code to accomplish.
Silverlight Plugin Host:
<script type="text/javascript" src="Splash/SplashScreen.js"></script>
...
...
<object id="Xaml1" data="data:application/x-silverlight-2,"
type="application/x-silverlight-2" width="100%" height="100%"> ...
<param name="splashscreensource" value="Splash/SplashScreen.xaml"/>
<param name="onSourceDownloadProgressChanged" value="onSourceDownloadProgressChanged" />
...
Splash.xaml:
<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/slc-watermark.png"
Height="47" Width="343"
HorizontalAlignment="Center" VerticalAlignment="Center"
Margin="10" />
<Grid HorizontalAlignment="Center">
<Rectangle x:Name="rectBorder" StrokeThickness="1" Stroke="#FFC8C8C8"
Height="7" Width="200" HorizontalAlignment="Left"/>
<Rectangle x:Name="rectBar" Fill="#FFC8C8C8"
Height="7" Width="0" HorizontalAlignment="Left" />
</Grid>
</StackPanel>
SplashScreen.js
function onSourceDownloadProgressChanged(sender, eventArgs) {
var myHost = document.getElementById("Xaml1");
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;
}
Ok, now that I’ve shown you how easy it is to create your own splash screen, go fix your apps! No excuses!!