by johnnystock via RIA Thoughts on 2/3/2010 11:27:00 PM
I recently had the privilege of recording an episode of Silverlight TV with John Papa where we discussed the creation of Splash pages in Silverlight. This post is a companion post to that episode so if you haven’t watched it yet, be sure to check it out after (or before) reading this post.
Sample code download
Let me be clear about this, when I mention splash page I’m referring to a custom loading screen. This is a lightweight Silverlight application that runs while your main Silverlight application is downloading. Typically these will include things like progress bars, user tips, humorous statements or even news headlines.
What these are not is the “Click here to Enter” screens that were so popular a decade ago. Please never build one of those. Ever.
Why do you need to build a custom splash page? The reasons are numerous but what it boils down to is keeping your users engaged so they don’t leave before your application is downloaded.
Unfortunately, many great Silverlight applications do not have a good loading experience currently. This is partially due to the environments in which we develop and test our applications. If we never notice a slow load time, we may never realize that it is needed.
Luckily for us, the Silverlight team didn’t forget about the need for a good loading experience. They did several things to make loading a decent experience. First, they created a simple animation (like the one at right) that runs whenever a xap file takes longer than .5 seconds to load. Second, they added some simple hooks to allow us to replace that default experience, with one of our own making. I’ll be talking more about these hooks in a bit.
There is a common misconception when it comes to splash pages in Silverlight that you have to use Silverlight 1.0 to create them. While there is a basis for this, it’s not quite right. What you ARE limited to is the JavaScript API, but that is not the same as Silverlight 1.0. You actually can use any control or feature in whatever version the user is running [#1] as long as it is included in the core runtime, not in an external assembly. In practice what this means is that you can use things like Grids, StackPanels or Easing Functions but you cannot use the DataGrid, Behaviors or custom control libraries.
Throughout this post I will show you how to build a simple splash page and how to add the features most commonly used in them. Hopefully this will give you enough information to be able to build custom loading experiences that are suited to the application you are building and the brand it represents.
I mentioned earlier that part of the reason we forget to create loading screens is that we never see a long download time. This also can make it hard to see how your new splash page will look and act if it is only displayed for .7 seconds. Luckily, there are ways to simulate a slow connection to allow you to test your app. The basics are simple, add a huge file to your application. There are a couple extra steps you need to perform to make sure it fulfills it’s role.
Adding a large file like this should give you several seconds of loading time even on the Cassini web server that is integrated with Visual Studio.
When you are first learning how to build splash screens, it’s nice to have somewhere to begin. Luckily, there is a page on MSDN that provides you with a starter screen that you can then customize or replace as you create your own experience. How to: Define a Simple Silverlight Splash Screen walks you through the steps and give you the code to create a splash screen that contains a simple progress bar with % complete.
Everything in this post is based on what you will learn and the files created when going through that how to document. The basic pieces you should take away from that are the Object Params that are needed, the loose XAML page, and how JavaScript interacts with with the XAML page. We will talk about each of these items below.
There are three separate Object Params that come into play when dealing with Splash pages, two of them are in the MSDN example and those are most likely the only ones you will need. All of these are detailed in the MSDN page but only two of them are used.
splashscreensource
<param name="splashscreensource" value="FullSample.xaml"/>
The splashscreenscource is the file that contains the xaml for your splash experience. This is a “loose” xaml file that lives in your website, not in your Silverlight application. To add it through the Visual Studio 2008 “Add New Item” dialog, look for the template titled: Silverlight JScript Page. This template will create a .xaml and a .js file with the given name.
onsourcedownloadprogresschanged
<param name="onSourceDownloadProgressChanged" value="onSourceDownloadProgressChanged" />
The value of this param is the name of a JavaScript function that gets called every time the download progress changes. This is very useful in wiring up things like progress bars, download percentage and for kicking off other events. Examples of all of these will be given later.
onsourcedownloadcomplete
<param name="onsourcedownloadcomplete" value="onsourcedownloadcomplete" />
Similar to onsourcedownloadprogresschanged, this param’s valus is a JavaScript function name, but this one fires only when the main Silverlight application is fully downloaded. This is the least commonly used of the Params but can still be useful. It is not used in the MSDN example and you will most likely not use it often either, but it’s nice to know it’s there. Possible uses for this event are the cleaning up of running JS routines or for kicking off a final animation or message. Just be aware that once this event fires the main app displays too fast to see the results of the function so you should plan accordingly.
Typically when people look at het splash page examples out there they get scared off because most of them use the Canvas as the base element and stick to Silverlight 1.0 XAML. This is further perpetuated by the fact that Expression Blend 3 looks at the loose .xaml file and throws up a message saying it cannot edit Silverlight 1 apps. Well, You are not limited to Silverlight 1 and you can use Blend, you just need to trick it.
The easiest way to use Expression Blend to build your splash page is to create a dummy page in your Silverlight application and use that for creating the design in Blend. Once you have everything the way to want it just copy the XAML into the loose .xaml page in your web project. There are a few caveats to using this approach however:
The example in the MSDN page shows one way to wire up a progress bar, but it’s not the only way. You are only limited by your imagination (or that or your design team) in what you can do here.
The only thing that is required is in the function that gets called by the onSourceDownloadProgressChanged event uses the eventArgs.progress value to modify a property of one of your XAML objects to show the download progress. Typically this is the width or scale of a rectangle that gets modified so that it grows longer as the download percentage increases. The two code examples below accomplish roughly te same task but in different ways.
sender.findName("uxProgressBar").ScaleY = eventArgs.progress * 356;sender.findName("uxStatus").Text = "Loading: " + Math.round((eventArgs.progress * 1000)) / 10 + "%";//ORsender.findName("uxProgressBar").Width = eventArgs.progress * 500;sender.findName("uxStatus").Text = "Loading: " + Math.round(eventArgs.progress * 100) + "%";
While things like a progress bar and download percentage are fairly straight forward, there are a few other things you can also do that can add interest to your splash screen. One great example of this is changing a bit of text periodically. This can keep the user engaged or even entertained while they wait for your application to download. The basics of this are simple:
var teasers = ["It's loading, I promise.", "Still loading", "Almost here!", "Ready?"];function onSourceDownloadProgressChanged(sender, eventArgs) { sender.findName("TeaserText").Text = teasers[Math.round(eventArgs.progress * 3)];}
In the above example I’m changing the text of a TextBlock with strings contained in an array based on the percentage downloaded. It would also be easy to tie text changes to a timer that starts when the download begins.
One of the (few) things the public seems to know about Silverlight is that it can do great animations. You can, and in many cases should, include these animations in your splash pages as well. So one question that typically arises from this is: With no Code Behind and no Behaviors, how to we start animations? Well, JavaScript of course.
var started = false;function onSourceDownloadProgressChanged(sender, eventArgs) { if (!started) { sender.findName("BallDrop").begin(); started = true; }}
The above example shows how to start an animation named “BallDrop” the first time the function is called and set a flag to ensure that it doesn’t attempt to start the animation over and over. Once again you could also start an animation based on time elapsed or a certain percentage downloaded.
Once you’ve created the perfect splash page that will keep your users entertained and engaged while waiting for your huge Silverlight application to load, there are a couple more things you may want to do. If you’ve taken the approach I outline in this post, you still need to remove a couple of files from your Silverlight application project. You definitely don’t want the large file that simulates slow download speed to be part of your deployed application, so go ahead and delete that now. Also, if you used a dummy page to enable the use of Expression Blend in designing your page, you should take that out of your production code as well.
Here are a few random tips to think about when building your splash page.
I know this has been a lot to cover in this post but I hope it has given you the knowledge needed to implement your own splash page. Feel free to ask me questions on twitter (@johnnystock) or here in the comments.
#1. As of the writing of this post, Silverlight 3 is released and Silverlight 4 is in Beta
Original Post: Silverlight Splash Page
The content of the postings is owned by the respective author. Silverlight Feeds is not responsible for the contents of the postings. This site is automatically generated and cannot be reviewed for abusive content. If you find abusive content on Silverlight Feeds, please contact us. Designated trademarks and brands are the property of their respective owners. All rights reserved.
