Following Mike Taulty’s rant avoiding the “Blue Balls” when loading a Silverlight application, I’ve been thinking about what ways you’d have to show a loading animation (a.k.a. Splash Screen 🙂 using the progress percentage in a meaningful way.
The idea was to come up with 10 way to do this and it proved to be harder than I thought. I’ve made a little sketch that is a little further down this post, but first let’s have a look at how to show this. Actually is it XAML only, because the application is not loaded yet, so it can only use Javascript code behind. Creating a XAML-file and a JS-file in your Web project is enough.
Create a new XAML file called SplashScreen.xaml without code behind and a Grid or Canvas as the outer container. Place a Textbox to show a percentage and some Rectangles to show the progress.
[sourcecode language=”XML”]
<Canvas
xmlns="<a href="http://schemas.microsoft.com/winfx/2006/xaml/presentation"">http://schemas.microsoft.com/winfx/2006/xaml/presentation"</a>
xmlns:x="<a href="http://schemas.microsoft.com/winfx/2006/xaml"">http://schemas.microsoft.com/winfx/2006/xaml"</a>
Width="640" Height="480" Background="White">
<Canvas Canvas.Top="100" Canvas.Left="100" Width="440" Height="280">
<Rectangle x:Name="rctProgressBarTrack" Width="300" Height="25" Canvas.Top="50" Canvas.Left="10" Fill="Silver" />
<Rectangle x:Name="rctProgressBar" Width="300" Height="25" Canvas.Top="50" Canvas.Left="10" Fill="Red">
<Rectangle.RenderTransform>
<ScaleTransform x:Name="rctProgress" ScaleX="0" ScaleY="1"/>
</Rectangle.RenderTransform>
</Rectangle>
<TextBlock x:Name="txtStatus" Height="20" Canvas.Top="55" Canvas.Left="125" Text="Loading: " TextWrapping="Wrap"/>
</Canvas>
</Canvas>
[/sourcecode]
In your startup file in the Web project add two lines to the Silverlight plug-in:
[sourcecode language=”XML”]
<param name="splashScreenSource" value="SplashScreen.xaml"/>
<param
name="onSourceDownloadProgressChanged"
value="onSourceDownloadProgressChanged" />
[/sourcecode]
Create a small SplashScreen.js file in your Web project containing only this:
[sourcecode language=”XML”]
function onSourceDownloadProgressChanged(sender, eventArgs) {
sender.findName("txtStatus").Text =
"Loading: " + Math.round((eventArgs.progress * 1000)) / 10 + "%";
sender.findName("rctProgress").ScaleY = eventArgs.progress;
}
[/sourcecode]
Now copy the SplashScreen.xaml file to your Web project. If you change it later, don’t forget to copy it into your XAML project again . You may want to create something in your MainPage.xaml so there’s something to show after loading…
Here are a 10 ideas for creating interesting loading animations. Most a using the progress percentage in some way. A few are “indeterminate” so, they could run forever. Note that the last 2 are dynamic, so should update every second or so. You can use the bars to fill other paths too, like coffee cups. You may need to scale a Clipping Mask for that.
Don’t make a Splash Screen that needs it’s own loading animation 🙂
Njoy!
Hi Antoni,
Very nice ideas. But I believe the rant was by Mike Taulty not Tim Heuer.
–
Mark Monster
You’re quite right, Mark. If you followed the link one would see it too.
Merit is due to Mike Taulty.