Splash screen/loader for Silverlight appz

I have been pretty quite for a little while, been flat out with some projects but I just wanted to quickly post about a little trick I worked out recently. An easy way to put a little loading animation on your Silverlight applications.

The way I have done it is a very broken down simple way to do it, if you want to get a little more complex in your approach check out Silverlight.net

But as for now, let’s do this.

Ok so you have already made your sweet little app but there is still something missing, that final touch instead of the normal Silverlight loader to make the application consistent.

First step is to make a new loading animation. Open blend or Visual Studio and create a new project. I find a nice little spinning animation or something works well, and make sure you repeat it so that it continues to play until the project is fully loaded.

Alright, once you have the animation the way you like it, build it and in the project file, navigate to the output folder. ProjectFolder/ProjectName/Bin/Debug > in there you should find your newly created Splash Screen.

You need to grab the .dll and the .xap file from there and throw it into the “debug” folder on the application you want the loader to appear on.

Next step is to link it all together. This is pretty easy.

First thing is to open the .html file in notepad or your editing program and add this line with all the other param lines.

<param name=”splashscreensource” value=”ProjectName.xap”/>

But obviously changing the projectname.xap to correspond with your splash screen animation name.

The only other change you need to make to your project is in the AppManifest.xaml file.

Open it up with a HTML editor/notepad, and add this line next to the other AssemblyPart.

<AssemblyPart x:Name=”splashscreenanimation” Source=”ProjectName.dll” />

If all goes to plan, you should have nice loading screen that will show up while the project loads.

You might not be able to test it very well on your local machine because the project loads so fast, but it should look sweet on-line!

Hope this has helped a little.

Alex.


15 Comments so far
Leave a comment

Hi Alex,

thanks for this little very(!) cool trick! :-)

Stone

Comment by Stone

[...] Post: 160 Post: Approved at: Aug-6-2008Kelley Blue Book site adds Deep ZoomThey now have added a "perfect Car Finder: Photo Edition" that uses Deep Zoom.  Seems pretty easy to use:http://www.kbb.com/kbb/PerfectCarFinder/PhotoEdition.aspxhttp://www.earthtimes.org/articles/show/kbbcom-launches-photo-edition-of-its-new-car-perfect-car-finderr,491042.shtmlAspect Oriented Programming for Silverlighthttp://www.infoq.com/news/2008/08/AOP-SilverlightSplash Screen / Loader for SL Appshttp://agkdesign.wordpress.com/2008/08/05/splash-screenloader-for-silverlight-appz/ [...]

Pingback by Post: 160 - Mirrored Blogs

Mine doesn’t show my splash screen. Just blank, then loads my site

Comment by Craig Muckleston

Hmm interesting… I seem to be having a few problems myself now where it is crashing my browser everytime, doesn’t matter if its FF or IE…
Did you copy to code straight from my blog? because for some reason the talking marks are changed… try deleting the talking marks and re-entering them….

Comment by agkdesign

[...] headers of a SL DataGrid at 45 degrees to conserve space … I like this a lot… go take a look! Splash screen/loader for Silverlight appz Alex Knight posted information on how to setup a ‘loading’ app for your Silverlight … the [...]

Pingback by Silverlight Cream for August 12, 2008 -- #344

Hi,

I’ve followed your instruction but didn’t able to see any Splash Screen. Would you please tell what am I doing wrong?

Comment by Faisal

Hi Faisal,
There seems to be some issues with the splash screen source attribute…. I haven’t been a little run off my feet but I should be able to have a look at it with the latest version soon and update my post of the matter and try and resolve any issues with it….

Comment by agkdesign

Thanks very much for your reply. I’ll be eagerly waiting for your updated post. One thing I noticed, when I assign My projects zap to myTestPage.aspx , for example , SplashScreenSource=”~/SplashScreen.xap” it becomes visible but whenever I try to do this by adding a Xaml to my preloadertest.web I’m finding it difficult to display any animation. Can you provide any solution please?

Comment by Faisal

mine is nt wrking :(

Comment by Namita

its not taking up the XAP

Comment by Namita

Hi there,
Since I wrote this post (it was a while ago) I have found that this isn’t a good way to do things, it will work fine if your calling a simple XAML page. Check this tutorial out: http://msdn.microsoft.com/en-us/library/cc903962(VS.95).aspx , that should help you get a nice progress bar and % happening… Also grab the feed for Silverzine.com as I will be posting there soon on how to create a really cool splash screen/loader..

Comment by agkdesign

infact i have also tried this one..its wrking only for a progress bar or so.i want to know how to relate my storyboard with the js file as i want to make my own animation to appear on the spalsh screen.

Comment by Namita

yeah I will be covering how to use event triggers to apply an animation to your loader in the next post on Silverzine, it will be live in the next few days I hope

Comment by agkdesign

Thank u very much for your reply Alex :)
I will be eagerly waiting for your next post on silverzine

Comment by Namita

Hi Namita,
If you head over to SilverZine, I have just posted a big article on all the different ways you can create loaders in Silverlight…

http://silverzine.com/tutorials/splash-screens-and-loaders-in-silverlight/

Comment by agkdesign




Leave a comment
Line and paragraph breaks automatic, e-mail address never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <pre> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>