How to create a custom splash (loading) screen in Silverlight

SheoNarayan
Posted by in Silverlight category on for Intermediate level | Points: 250 | Views : 15171 red flag
Rating: 5 out of 5  
 2 vote(s)

In this article, we shall learn how to create custom splash (loading) screen in Silverlight.

Introduction

Splash screen is a screen that appears as the first screen of a Silverlight application when Silverlight app starts loading in your browser. This generally appears if your .xap file is large enough to take more than 0.5 seconds to load.

If nothing custom is specified, generally you will see the number of percentage download complete in the browser, that looks something similar to the 1st image below.

Default Splash :=>  Custom Splash :=>  

In this article, we shall learn how to change this defult behavior and do something our own that will appear as splash screen something similar to the 2nd image above.

I have written hundreds of .NET How to's solution (ebook + source code + video) series based on real time project problems, click here to get it.

Little bit about .xap file

.xap (called as zap) is the collection of assemblies and resources used by a Silverlight application and a manifest file (.xaml) which describes about the contents of the XAP file. XAP file is a simple .zip file, you can try renaming it to .zip file and unzipping it. See what's there inside :).

The .xap file of this article demo app has following file.

Creating custom Silverligh Splash screen

Create a new Silverlight project, write some custom text into MainPage.xaml now to create custom splash screen, we need Silverlight 1.0 JScript page as displayed in below picture. Right click the Silverlight hosting web application and add this file.


Notice what additional has been added into your web project. In my case my file name is SplashScreen.xaml so two files will be added.

  1. SplashScreen.xaml that I added
  2. SplashScreen.js that was added automatically

Do not worry about .js file, leave it as it is. Open the SplashScreen.xaml file and write your own custom text or animation. For this demo, I have modified my SplashScreen.xaml something like this.

<Canvas xmlns="http://schemas.microsoft.com/client/2007"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<TextBlock x:Name="Loading">

<Run FontSize="20" Text="Loading ...."/>

</TextBlock>

</Canvas>

Notice that you will need to select Build Action of both files mentioned above to "Content" (Select the file and look at the Property Window > Build Action) otherwise you will get following error when you wil try to build the project.

Error 1 Project file must include the .NET Framework assembly 'WindowsBase, PresentationCore, PresentationFramework' in the reference list. SilverlightApplication.Web

So at this point, our Silverlight custom splash screen is ready, its time to integrate with our Silverlight hosting page. So lets modify the object tag of our hosting page.

<div id="silverlightControlHost">

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2"

width="100%" height="100%">

<param name="source" value="ClientBin/SilverlightApplication.xap" />

<param name="onError" value="onSilverlightError" />

<param name="background" value="#cdcdcd" />

<param name="minRuntimeVersion" value="4.0.50826.0" />

<param name="autoUpgrade" value="true" />

 

<param name="splashScreenSource" value="SplashScreen.xaml" />

 

<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration: none">

<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight"

style="border-style: none" />

</a>

</object>

<iframe id="_sl_historyFrame" style="visibility: hidden; height: 0px; width: 0px;

border: 0px"></iframe>

</div>

 

To integrate the custom splash screen, we need to add an additional parameter to the object tag. In the above code snippet, notice the bolded parameter named "splashScreenSource" where I have specified the .xaml file.

How to test splash screen?

As written earlier, Silverlight splash screen doesn't appear if your .xap file is going to take less than 0.5 seconds time so you will have to make sure that your .xap file is larger in size. To simulate this scenario, add larger images file into your Silverlight project, select all images and select Embedded Resource from the Property window as displayed in the picture below.

By doing this you are instructing the compiler to embed all the images into the Silverlight project .dll itself and that will do the trick of creating a large Silverlight project .dll. As written above, .xap contains the Silverlight application assemblies so this .dll will be inside the .xap file and thr.xap file size will become bigger.

Additionally, write following into your main .xaml file. Notice the bolded line that is instructing the thread to sleep for 5000 milliseonds.

public partial class MainPage : UserControl

{

public MainPage()

{

InitializeComponent();

System.Threading.Thread.Sleep(5000);

}

}

If you have followed the above steps, try runing your app and you will see the Silverlight splash screen something like below image.

Limitations of creating Splash screen

There are certain limitation on where and what can contain in the custom splash .xaml file. This custom splash xaml file must be placed on the same domain from where its host application exists. If your IIS is not configured to serve the .xaml file (IIS 7 and 7.5 is preconfigured) then you will have to configure (".xaml" with MIME type as "application/xaml+xml")  to your server IIS. Also this .xaml file should be simple and you may not be able to add all the functionality you can add into a normal Silverlight .xaml file.

Conclusion:

By creating custom splash screen, you can give customized experience to the application end user. For example, you can write some custom message along with loading word or provide your company name and other stuffs as well.

Hope this article will be used, keep visitinng and sharing your knowledge! To get forthcoming articles in your inbox directly, please subscribe for it.

Page copy protected against web site content infringement by Copyscape

About the Author

SheoNarayan
Full Name: Sheo Narayan
Member Level: HonoraryPlatinum
Member Status: Administrator
Member Since: 7/8/2008 6:32:14 PM
Country: India
Regards, Sheo Narayan http://www.dotnetfunda.com
http://www.snarayan.com
Ex-Microsoft MVP, Author, Writer, Mentor & architecting applications since year 2001. Connect me on http://www.facebook.com/sheo.narayan | https://twitter.com/sheonarayan | http://www.linkedin.com/in/sheonarayan

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)