Silverlight Tips provides simple and useful tutorials and tips with real life examples, live demos and sample codes to download.
About authors:
Damon Serji
Damon Serji,
Silverlight developer working at Metia in London.
Gavin Wignall
Gavin Wignall,
Interactive Design Lead, working in design for over 10 years, the last 3 being in Silverlight.
Allan Muller
Allan Muller,
Developer, working on various types of Silverlight and WCF projects.

Before I started writing this post I had a quick search on the internet about Silverlight Preloader (Silverlight progressbar) and noticed a few good posts that already exist and explain how to do this.

However, one thing I noticed from most of the tutorials about creating Silverlight progressbar is that they all replace the standard Silverlight preloader animation with a simple rectangle progressbar! Although displaying your logo with a standard progressbar in shape of rectangle is much better and professional than leaving the standard Silverlight preloader to be displayed, but I think it is not that cool!

To test this project I added a large file to the project in order to slow down the process of loading for us to see the effect. To view the live demo click here.

The code can be downloaded from CodePlex here.

As a result, I want to explain how to take your logo and with a bit use of maths do something cool to it, like filling it with color to display the progress of loading.

1.  Add new xaml and js files to your Web project
this xaml file will include your custom progress bar, you can call this anything you like, here we call it preloader.xaml. To add a new xaml file: right click on your .Web project from the menu find ‘Add’ and click on ‘New Item...’, from the left side (Categories) select ‘Silverlight’, and then from the right side (Templates) choose ‘Silverlight JScript Page’. Once you add the xaml file Visual Studio will add a new .js file for you too.

2. Add splashscreensource and onSourceDownloadProgressChanged parameters to your Silverlight object

on your Default.aspx, or any page that hosts your Silverlight application (in our case SilverlightPreloaderTestPage.aspx), add the splashscreensource parameter i.e.:

<object data="data:application/x-silverlight," type="application/x-silverlight"
    <param name="splashscreensource" value="loading.xaml" />
    <param name="onSourceDownloadProgressChanged" value="onSourceDownloadProgressChanged" />

The first parameter simply loads the loading.xaml while loading the main components of the Silverlight application.

The second parameter calls the onSourceDownloadProgressChanged  function from or preloader.js file.

3. Create a new progress bar in preloader.xaml using Blend
Since we want to fill a logo or a shape with color instead of just creating a rectangle progressbar, we need to draw the shape manually in Expression Blend. You might notice Blend doesn’t open the preloader.xaml file from our .Web project. To solve this issue I simply open a new xaml file in Blend and once I am happy with my changes I copy and paste the code to my preloader.xaml file.

To demonstrate the filling of a shape we need to use Path Clipping technique. Basically we need to create a rectangular Canvas and then cut the shape we want out from it. Then we can move another coloured rectangular, which is inside the canvas but positioned outside it by adding a high margin to it, to the left/right/up/down towards inside the canvas according to the percentage of loading. This way user will see the shape we draw earlier getting filled with color as the percentage of loading increases. To learn about Path Clipping visit Clipping paths in canvas using Expression Blend by Gavin Wignall.

4. Do the calculation in Java Script file
copy this code to your preloader.js file:

function onSourceDownloadProgressChanged(sender, eventArgs) {
    if (sender.findname("loadingStatus") != null) {
        var loaded = Math.round(eventArgs.progress * 10) / 10;
        sender.findName("loadingStatus").Text = "Loading: " + (Math.round(eventArgs.progress * 1000)) / 10 + "%";
        var newValue = 79 - (79 * loaded);
        sender.findName("LoadFill")["Canvas.Top"] = newValue;

onSourceDownloadProgressChanged is the name of function which we call from our object in .aspx page (<param name="onSourceDownloadProgressChanged" value="onSourceDownloadProgressChanged" />).

loadingStatus is a name we have given to a TextBlock in our preloader.xaml. Here we find the TextBlock loadingStatus and then assign the current loading percentage to it.

eventArgs.progress  is a very long number like 0.3452345234232 and shows the percentage of loading, 1 is 100%. So we need to change this to something like 34.5 and 100 as 100%. To do this we first multiply eventArgs.progress  by 1000, this way we get 345.2345234232 and to remove the .2345234232 we use Math.round()function which is a Java Script built-in function. Now we should have 345. To get 34.5 which is the actual percentage of loading we simple divid

e the number by 10. At the end we add a bit of text to the result and insert it to our loadingStatus TextBlock.

In order to show our logo is getting filled by color we need to move the rectangular inside by changing its “Canvas.Top” property which acts just like Margin. As we want to keep the rectangular outside the visible area we position it 79 pixels, which is just the actual height of our rectangular, away from the top, so it sits just below the visible area.

If you follow the maths as I explain above you will understand that ‘loaded’ variable will have a value like 0.34 (this time we multiplied it by 10 instead of 1000). Lets say if we had 99 percent loaded then the ‘loaded’ variable would have a value of 0.99. times that by 79 and you get 78.21, now if we follow the equation: 79 – (78.21) =  0.79. If we set the Canvas.Top to 0.79 then our clipped area will be almost completely filled with color because the rectangular is sitting right at the top and that is exactly what we wanted to achieve.

Please note, if your rectangular is larger or smaller than 79 pixels you need to change both 79 to actual height of your rectangular to get this working correctly.

Posted by Damon Serji on 30. December 2009 12:47 under: Intermediate
 with 9 Comments