How to create a custom splash screen

So you have a Silverlight project all sorted but you’re getting bored with the default splash screen animation showing the percentage loaded. Help is here at last for designers and creative gurus who may find programming Silverlight a struggle from time to time. I’m by no means a teacher so this may or may not make sense and I’m relying on your feedback to make this the best it can be!

Before you get started

In addition to your usual project files there are a few specific files required to make this work and these may not be part of your Silverlight project. These include a file with some JavaScript (to calculate the percent loaded, change a progress bar, etc.) and a XAML file for the actual splash screen visuals. The following steps go into a bit more detail about these:

Step 1

Create your Silverlight project (I use Blend and have VS2008 as a backup for helping with writing code from time to time).

Step 2

Create a JS (JavaScript) files in the same location as HTML and ClientBin. The name can be anything – I usually name this ‘SplashScreen.js’. This will contain a function (or multiple functions if you’re brave!) for things like updating text showing percent loaded, progress bar and/or countdown text where applicable.

Here is the complete code for all three:

function onSourceDownloadProgressChanged(sender, eventArgs)
{

// UPDATE LOADING STATUS TEXT AS A PERCENTAGE

sender.findName(“uxStatus”).Text = “Loading: ” + Math.round(Math.round((eventArgs.progress * 1000)) / 10) + “%”;

// COUNTDOWN TEXT FROM 100 TO 0 (0 = 100% LOADED)

sender.findName(“uxStatus_CountDown”).Text = Math.round(100 – (Math.round((eventArgs.progress * 1000)) / 10)) +””;

// CHANGE THE WIDTH OF A PROGRESS BAR – THE MULITIPLYER IS THE SAME AS THE FULL WIDTH OF THE PROGRESS BAR AT 100% LOADED

sender.findName(“uxProgressBar”).ScaleY = eventArgs.progress * 100;

}

Step 3

Create a XAML file in the ClientBin folder – I usually name this Splash.xaml and it contains the actual splash screen elements such as the percent loaded text, progress bar and any animations. As far as I understand it this can NOT be a UserControl which can make designing difficult. I found that creating a separate Silverlight project for the splash screen helps with the design process as you can easily build the experience and test it to make sure it’s doing what you want it to. Then it’s as easy as viewing the XAML code, cutting all the elements from within the UserControl and pasting them into your Splash.xaml. Don’t worry if your confused, I was. But once you do it things will start to make sense!

One important note is to ensure the naming convention used in both the JavaScript and XAML files are consistent. I won’t go into any detail about this as I trust you understand the implications of this if your reading this. 🙂

Here’s an example that will work with the JavaScript file from Step 2 (you may need to tweak some of the values to display properly in your project):

<Grid x:Name=”LayoutRoot” Background=”White”>

<Canvas Canvas.Top=”208″ Canvas.Left=”95″ Width=”100″ Height=”10″ Background=”#19000000″ HorizontalAlignment=”Stretch” VerticalAlignment=”Bottom”>

<!– This is the progress bar –>

<Rectangle Width=”10″ Height=”1″ x:Name=”uxProgress” Canvas.Top=”10″ Canvas.Left=”0″ Fill=”#FFCCCCCC” StrokeThickness=”0″ UseLayoutRounding=”False”>

<Rectangle.RenderTransform>

<TransformGroup>

<ScaleTransform x:Name=”uxProgressBar” ScaleX=”1″ ScaleY=”0.001″/>

<SkewTransform AngleX=”0″ AngleY=”0″/>

<RotateTransform Angle=”270″/>

<TranslateTransform X=”0″ Y=”0″/>

</TransformGroup>

</Rectangle.RenderTransform>

</Rectangle>

<!– TextBlock that will show the percent loaded –>

<TextBlock x:Name=”uxStatus” Height=”14″ Text=”Loading…” TextWrapping=”Wrap” Canvas.Top=”-12″ FontSize=”9″ d:IsStaticText=”True” Width=”98″ />

<!– TextBlock that will show a countdown from 100 to 0  –>

<TextBlock x:Name=”uxStatus_CountDown” Height=”14″ Text=”100″ TextWrapping=”Wrap” Canvas.Top=”12″ Width=”98″ FontSize=”9″ d:IsStaticText=”True” TextAlignment=”Right” />

</Canvas>

</Grid>

Step 4

You now have two files – SplashScreen.js and Splash.xaml. The next step is to add a few lines of code to your HTML file (Blend will create this file and name it ‘Default.html’).

Start by adding this line of code following the <head> tag and ensure that it is the first <script> code (there may be more than one and this must be the first):

<script type=”text/javascript” src=”SplashScreen.js”></script>

This will ensure the JavaScript for your splash screen is loaded first and ready to be used by the Splash.xaml.

Next add these two lines of code to the Silverlight <object> further down the page and immediately following the source parameter for the XAP file:

<param name=”splashscreensource” value=”ClientBin/Splash.xaml”/>

<param name=”onSourceDownloadProgressChanged” value=”onSourceDownloadProgressChanged” />

That’s it for the HTML file. Note the second parameter here, this is actually calling the JavaScript you created in step one that will update the Splash.xaml.

Conclusion

Good luck with your custom splash screens and please do let me know if anything is unclear in this tutorial.