Saturday, March 03, 2001 ..:: Home ::.. Register  Login
   TechTidBits (Blog)  

You only get one shot to make a first impression! (aka Silverlight Splash Screens)

Nov 22

Written by:
Sunday, November 22, 2009 2:04 PM  RssIcon

hhhhmmmm you've just spent four months slaving over Expression Blend and Visual Studio, suffering through XAML, layout managers, routed events, data binding, EF, POCOs, etc, and the first thing people at your sprint demo say is....."eeeeehhhhhhh" that's ugly!  Read on for a 15m quick fix to help make a great first impression!

You've been working REALLY hard learning Silverlight (SL)/XAML and all it's little secrets, but what is the first thing your users will see of your app?  Pay special attention below to the % completed loading and the blue dots circling it.  THAT'S what they'll see!

Without custom Silverlight splash screen

Boring eh?  hhhhmmmmmm  I smell a marketing/branding opportunity here!  Don't you agree?  If you see an opportunity to splash your users with a......wait for it........a splash screen, read on!  If you think that above is good enough, then maybe you should try Java or just keep root'n for the Sens?  DOH!  Ok, ok, that was a low blow, I apologize. (hee hee)

Now take a quick look at my first attempt at a splash screen.  It's not going to win any Acadamy awards for CGI, but it IS better than the default above IMHO!

With a custom Silverlight splash screen

Ok, ok, the "screen" above isn't all THAT exciting, BUT the important thing is it's a custom XAML form that can "communicate assembly loading progress to your users" with any type of branding you create.  THAT'S how you make a slick first impression for your users!

Caveats?  Yup, one.  You can ONLY use the stuff in the standard Silverlight binaries.  In other words, you can't use any fancy-dancy Silverlight Toolkit controls from CodePlex, Telerik or other custom stuff (but it's just for the splash screen don't forget).  Why is that?  Well, cause the splash screen is one XAML file that loads up before anything else and runs while the XAP file is downloading to your machine.  It's a chicken'n'egg thing.  You have a 200MB XAP file (say it contains a big video file) to download, what good is downloading ALL 200MB then cracking open the XAP file to display a splash screen for 2ms?  Not much eh?  Your users only get the benefits of a splash screen when the downloading of the XAP file is going to be a long time, AND the splash screen file is visible to the user and giving them progress feedback.  So, what MS has done is have the HTML page loading the XAP file, load a special XAML file just for splash screen purposes.  Let's go through that now.

High level summary (aka executive summary LOL))

  • write XML file in your web project (that is your XAML for the splash screen)
  • write JS to update progress (this is most likely where your debugging efforts will be)
  • add two parameters to the Silverlight reference in html, this glues the SL runtime to your splash screen for progress updates

And that's it, Bob's your uncle!  Well, ok, there's a few details I glossed over but they're not that big a deal. 

The only BIG deal is you're going to create/find/add a BIG FILE.  Ya, a LARGE one (easy on the comments there! LOL), I'm talking 100MB+ yup, big!  Why?  Cause how other are you going to simulate a slow network loading a big file (big being very relative here) and seeing your splash screen?  In my test, I used a WMV file that was 170MB and I still only see the splash screen for about 2/3 seconds.  Make sure you set the Build Action to Content and the Copy to Output Directory equal to Copy if newer (otherwise you'll never copy it or you'll always copy on every compile/build). 

Large file properties in Visual Studio

Unfortunately I get charged for too much traffic on my server, so I'm sorry, you'll have to create/find your own 150MB file yourself.

First, let's start with Expression Blend 3.  Why?  Cause it let's us create a Silverlight application with the website all in one shot, and it connects the two, so when you compile your XAP, it gets copied over to the website automagically. 

Creating new project in Expression Blend

You could use Visual Studio for this, what ever floats your boat.  However, the key to this exercise is not in creating websites but a splash screen, so I'll leave how you do this up to you.

Once you do that, you SHOULD see something like below in Visual Studio (yup, flipping between both EB3 and VS08 to show you a solid starting point).  If you don't, either you REALLY know what you're doing and're on your screwed up and to be honest you should restart. 

What my sample Solution looks like

Next, add an XML file and name it SplashScreen.xaml (notice the XAML extension?) in the ClientBin directory in the website.  I'll point that out again cause it's easy to miss, make sure the XML file you create for your splash screen is NOT in the Silverlight application but IS inside of the website.  What's the big deal? GOOD question!  Cause if it were in the Silverlight project, it would get compiled in to the XAP file which is what we don't want, and we want to make sure the website can see it to display it WHILE the XAP file is downloading.

It doesn't matter what/how you get the XML/XAML into the website, just that you use only the SL stuff in SL2 or SL3 you're users have (ie no "extras") cause those extras haven't been downloaded yet for use.  My sample XAML looks like this.  Sorry for the png, this blog engine isn't very nice towards XAML script.

Splash screen XAML contents

If you can't picture it in your mind, it's the second picture up above (my company logo with a progress bar at the bottom).  The key here is the progress bar parts are named, this is vital to be able to reference them in JS so they can get updated.  Yup, you'll have to write a bit of javascript.  But it's just a little bit and I'll give you the meat of it all.

Next is the javascript, we need it so the important pieces of the splash screen can be updated.  The if statement's else clause gets executed the first time to setup the communication for the loading progress, after that, it's the first part of the if statement that gets run everytime through.  Sorry for the png but this blog engine isn't very nice towards script tags.

 Javascript to make it all work

Now that you have the XAML for your splash screen and the JS to update the progress, next you need to tell the webpage loading your XAP file to use this new information.  Sorry for the pic, this....oh you get it by now eh? DOH!  LOL

Webpage contents with Object tag

The difference above between the default object tag from a new page and mine is the last two params, the SplashScreenSource and onSourceDownloadProgressChanged.  The former referencing the relative position of your splash screen (notice how I'm referencing the ClientBin directory), and the latter is the same JS fuction you created above.

Once you do AAAAAAAAAAAAAALL that, compile and run, then with a bit of luck, you'll see the progress loading on your customized splash screen!  (Don't forget to include a LARGE file)  With a bit of MORE luck you'll get an error and only take 5-10m debugging it (most likel you have a JS error or referencing the splash screen incorrectly, yup, both mistakes I made, DOH!)

Interesting observations during all this:

  • To make this work you will need to have a LARGE (upwards of 100MB or more) in your XAP file to see this work correctly. Add the LARGE file to the project containing your SL XAMLs, make sure the Build Action = Content and the Copy to Output Directory = Copy if newer.
  • The XML splash screen file by itself won't lend itself nicely to using Expression Blend, you might have to dance between Visual Studio and Expression Blend (especially if you're learning SL or don't know the attributes very well).
  • Once you "change partners" from Expression Blend back to Visual Studio, you'll notice the entire solution will recompile and the large file will be reimported into the XAP file ("Adding AppManifest.xaml" stage takes a long time).
  • When you're "changing partners" always make sure to save your work and hit the Yes buttons in the appropriate editor to reload the solution/project/files to ensure you have the latest changes from the other dance partner.

hhhmmmmm what if you're not loading 200MB files, you ask?  Why would you ever want this?  Good question!  Can you guarantee the speed of the network of EVERYONE loading your SL app?  Can you guarantee your XAP file will NEVER grow?  That you'll NEVER have any pictures/sounds at all?  Can you guarantee network connectivity is 100% reliable?  Having a customized splash screen is an easy way to brand your app and give your users a more personal touch.

Now that you've easily branded your application in a way only you can, it's time to grab a coffee and get coding!




Location: Blogs Parent Separator TechTidBits

1 comment(s) so far...

Re: You only get one shot to make a first impression! (aka Silverlight Splash Screens)

If you're interested in this, but are a bit intimidated, you might want to check out a Channel 9 vid which demos this process.

By phenry on   Thursday, February 11, 2010 10:01 AM

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Add Comment   Cancel 
Copyright 1999-2012 by   Terms Of Use  Privacy Statement