Thank you! Once I've finished customising my BlogEngine.NET theme this was next on the list. I'm writing a Silverlight app for Facebook and the loading screen was the only place where I didn't have the right branding.

I hate those bloodly balls aswell. I asked on the forums before for a design perspective, should you show a screenshot  of the app while it is loading.

Its amazing how fast some projects load in silverlight JS as the resources are forced to be externalized from the xap.

Maybe we could you use XAMLWriter to get a xaml screenshot of your app for this? silverlightcontrib.codeplex.com/.../49151

DotNetBurner - burning hot .net content

I think I preferred the blue balls, brass monkeys and all...

Excellent tutorial! Thank you.

Nice to get rid of blue balls but...

the declarative approach to me simply alienates C# developers. MS was surely hoping blend would appeal to designers and adobe shops and force developers hands, but it hasn't.. now developers are largely stuck with an unintuitive format when a simple with { .this; .that; .tother;} clause ('end with' in VB) would have sufficed for UI attributes. nothing will make me buy blend or try any other way than painstakingly convert xaml to C# which I can easily edit and obfuscate. blend with a C# output is MS's best bet. on another note, i wish all silverlight controls were as 'wireframe' as their asp.net cousins.  

Blue Balls?

That sounds really painfull(lol).

I love your videos, please keep them up. Would you recommend have the loading page that is the same as your app. forums.silverlight.net/.../301270.aspx

Nice post.

BUT - I find that most people tend to stick with "blue balls" is because Splash screen development has couple of gotchas.

I mean - when I first tried to develop splash screen I was stuck with number of problems: is some property supported in Splash XAML, why my image isn't loading, why download progress JavaScript is throwing errors, etc. etc.

Here are couple pointers for those who are trying to develop Splash screen but run into problems:

1. Keep Splash.xaml simple. So -> Grid as a root, StackPanel to order items, Image, TextBlock, Rectangle and that's it. If you need example xaml, see this page => pagebrooks.com/.../custom-loading-screens-in-silverlight.aspx

2. Keep Splash.xaml in SAME directory as XAP. This isn't required but it'll help you with situations when you need to point to image. For example if you have XAP in ClientBin (default) and Splash.xaml & logo.png in Splash bin, in Splash.xaml you'll use this to point to image:

<Image Source="../Splash/logo.png" Width="337" Height="71" ... />

3. JavaScript progress notification model is DIFFERENT for HTML pages (when you use object tag) and ASPX pages (when you use asp:Silverlight tag). So for code this will be valid in "HTML/object" mode:

       function onSourceDownloadProgressChanged(sender, eventArgs) {

           var rectBar = sender.findName("rectBar");

           var rectBorder = sender.findName("rectBorder");

           rectBar.Width = eventArgs.progress * rectBorder.Width;

       }

       function onSourceDownloadComplete(sender, eventArgs) {

           var rectBar = sender.findName("rectBar");

           var rectBorder = sender.findName("rectBorder");

           rectBar.Width = rectBorder.Width;

       }

But try to use that same code for "ASPX/asp:Silverlight" and it will throw errors (sender.findName & eventArgs.progress undefined). So instead, go with this code:

       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;

       }

       function onSourceDownloadComplete(sender, eventArgs) {

           var myHost = document.getElementById("Xaml1");

           var rectBar = myHost.content.findName("rectBar");

           var rectBorder = myHost.content.findName("rectBorder");

           rectBar.Width = rectBorder.Width;

       }

[Of course, tie SplashScreenSource, OnPluginSourceDownloadProgressChanged & OnPluginSourceDownloadComplete attributes]

That's it... hope it proves useful to someone who stumbles into same Splash screen problems.

Brilliant.  The other thing I noticed about the blue orb animation thing is that it wouldn't load immediately.  I don't know if there's something unique about the way I'm doing things that's causing this.  But I thought to myself -- what's the point of a loading animation it doesn't show up right away?   There were cases where you'd be staring at a completely blank screen for a couple seconds, wondering if anything at all was going to load.

So I took a radically different approach.  I created the simplest splash screen possible (thanks to the help from your video).  The splash screen simply says "Loading..." in a 36pt Trebuchet MS font.  As a result of this simplicity, the XAML is just 500 bytes and it will appear almost instantaneously.  It gives the user that instant feedback indicating that something is actually happening.

This is now in place at regexhero.net.

Thanks again for the video.

As I continue to work on a reference project (basically building my portfolio site out in Silverlight)