Adding a loader or splash screen to your animation can add the final touch and bring all the elements together. This tutorial will teach you 3 different techniques to creating great loading screen.
1. Progress Bars
2. Text percent loaded
3. Simple loading animation.
First steps
The first step is to set up your loading page and accompanying JavaScript file. Let’s call these SplashScreen.xaml and SplashScreen.js. The SplashScreen.xaml will have all your visual elements and your JavaScript file will have code that updates your visual elements as the application loads.
To create your SplashScreen.xaml page, just open Notepad and paste this code in:
<Canvas
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Name="parentCanvas"
Width="245"
Height="89"
Background="#FF2B2B2B"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
<Grid x:Name="LayoutRoot"/>
</Canvas>
Save the file as SplashScreen.xaml. Now open up Expression Blend, create a new project, and then add this new SplashScreen.xaml to the project, This will allow us to work on the file with a visual design surface.
We will get to the styling in Expression Blend in just a moment, but first we need to wire up the HTML of the project to use the new SplashScreen.xaml and JavaScript when loading the application. This is done by adding 2 new parameters to the mix:
<param name="splashscreensource" value="SplashScreen.xaml"/>
<param name="onSourceDownloadProgressChanged" value="onSourceDownloadProgressChanged" />|
And remember to reference your JavaScript file in the head of the HTML document.
<script type="text/javascript" src="SplashScreen.js"></script>
So now your application will use the new SplashScreen.xaml file as a loading/splash screen for your application.
Open up your JavaScript file and insert this code:
function onSourceDownloadProgressChanged(sender, eventArgs)
{
sender.findName("StatusText").Text =
Math.round((eventArgs.progress * 1000)) / 10 + " percent loaded";
sender.findName("ProgressBarTransform").ScaleY = eventArgs.progress * 158;
}
This function will be called every time the projects loading progress changes (onSourceDownloadProgressChanged). A .text event will update your text block. You’ll notice a refrence to ProgressBarTransform, this isn’t the name of the Progress bar itself, but the name of the transform attached to it.
Now that we have our JavaScript file set up, let’s jump back over to Expression Blend and start styling our loader/splash screen.
Note: When creating your StatusText and ProgressBar, be sure to set your alignments to left and top, because these items will update dynamically, it will play havoc with your canvas size and creating some really interesting issues.
The Progress bar
The progress bar is a simple visual prompt to show users exactly how much of the application has loaded. This technique will use a parameter in the HTML called onSourceDownloadProgressChanged which will call a JavaScript file every time a little more of the application is downloaded.
Here is my XAML for the Progress Bar:
<Rectangle Height="39" Width="1" Canvas.Left="29" Canvas.Top="86" Stroke="#FF000000" RenderTransformOrigin="0,0.5" x:Name="ProgressBar" HorizontalAlignment="Left" VerticalAlignment="Top" StrokeThickness="0" Fill="#FF939393">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform x:Name="ProgressBarTransform" ScaleY="1" ScaleX="0"/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform Y="49" X="0.5"/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
The key points to note when creating a progress bar from scratch are to make sure your width is set to 1, your RenderTransformOrigin is set to left, and your X scale transform is set to 0 and has a name applied to it (so you can reference it in your JavaScript file).
Tip: If you want your loading bar to grow vertically, change your Y scale to 0 and X to 1. Then edit your JavaScript file to change the ScaleY value.
sender.findName("ProgressBarTransform").ScaleY
If you wish to edit the final size of your Progress bar when it hits 100%, edit the eventArgs.progress * 100; value to a higher or lower number.
That’s it for the Progress Bar. Let’s look at creating a text based percentage now.
Showing Percent loaded
This is very similar to the progress bar, but instead of updating the size of a shape, it will update a text box with the percentage loaded.
We already have the function set up for this in our JavaScript file, so all we need to do now is create a textblock called StatusText. You don’t need any preset text, because the function will automatically change it to “# percent loaded.”
Tip: Open your JavaScript file and change the text in the quotation marks to something else.
Math.round((eventArgs.progress * 1000)) / 10 + "% of the application is loaded";
Adding Loading Animations
Creating an animation is a little different. You can’t use the onSourceDownloadProgressChanged parameter to call an animation, because it restarts the animation every time more of the application is downloaded, giving the effect that it’s jittering and broken. Instead to create an animation that plays from start to finish, use an EventTrigger within your SplashScreen.xaml file. This allows you to begin an animation without needing a ‘code behind’ or JavaScript file.
First, create your animation by pressing the “new StoryBoard” button. Once you have created your animation, open up the XAML view on the page. You will notice the animation is referenced at the top of the page as a resource and is called using its x:Name. We need to attach the StoryBoard directly to an object (preferably the object associated to it).
To achieve this create an event trigger and attach it to the object. I am adding my trigger to a rectangle. So I place this inside the <rectangle> tags.
This trigger is set to begin the story board when the rectangle is loaded, but you can change the Rectangle.Loaded function to any of the other interactions available to your object.
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
Once the trigger is in place, there is still no animation present. You need to grab your story board from the top of the XAML and place it between the <StoryBoard> tags, remember not to double up with tags and if you are copying your code from the top, it will throw an error because there are duplicate x:Names in the project (you can delete the x:Name once its inside the trigger).
Note: If you cut your StoryBoard from the top of the page and paste it in your event trigger, it will no longer be available to edit as a normal StoryBoard. My suggestion is to keep the original and copy it into the trigger. Then delete it’s x:Name when in the trigger. Then if you need to change it later, it’s still available. You just need to copy across the new XAML to your trigger each time.
About the Author
Alex Knight
Alex is a Silverlight MVP with a strong focus on the graphics and user interface side of things. He runs a Xamling with Jordan Knight (@jakkaj) which specialises in creating awesome experiences for Silverlight and WPF. So it doesn't matter what platform, if its xaml he digs it. If you want to find more out about Alex, check out:AGKDesign.twitter | xamling.net
