Creating a Splash Screen for Your Windows Phone Application

Introduction

One of the first things a user comes to notice when he/she uses an application is the startup screen. It is usually called the splash screen and the term comes from the world of desktop computing. While mobile phones are a different form factor, it is still important for developers to remember that they need to create a favorable impression to the application user from the time the application is started. It is for this reason that they need to make sure that the splash screen they create for their Windows Phone application is appealing.

Types of Splash Screens for Windows Phone Applications

Technically, a splash screen is an image that is rendered on the foreground while the application is busy loading other needed resources in the background.

By default, every Windows Phone application based on Silverlight by default comes with a splash screen, which the Visual Studio IDE adds by default. So, the first and default choice for a splash screen is to go with what Visual Studio provides.

However some developers would prefer to go a step further and leverage XAML to build a dynamic and visually live splash screen.

Let us understand both of the splash screen types in more detail.

Static Splash Screen

By default, all Silverlight for Windows Phone projects create a default splash screen called SplashScreenImage.jpg

All Silverlight for Windows Phone projects create a default splash screen
Figure 1: All Silverlight for Windows Phone projects create a default splash screen

The default splash screen image has a few properties of interest.

Default splash screen image properties
Figure 2: Default splash screen image properties

The height is 800 pixels and the width is 480 pixels, fitting the native resolutions of the Windows Phone devices.

To change the default splash screen, you can choose another jpg image and set its properties as shown below.

Change Windows Phone default splash screen
Figure 3: Change Windows Phone default splash screen

Note that the build action for the image is "Content".

Dynamic Splash Screen

In the world of Rich internet applications, developers seek to get more out of the video capacities of mobile devices. Silverlight users can cheer the fact that they can leverage the power of XAML to beautify the experience.

For a more live experience, we can piggy back on the ever favorite progress bar control, which provides the user with an estimate on how far the application is from being available to use.

In this example we will use an indeterminate progress status bar to show progress.

First off, start a new Silverlight for Windows Phone project. Let's call it DynamicSplashScreen.

Add a user control call SplashScreen as shown below.

Add a user control call SplashScreen
Figure 4: Add a user control call SplashScreen

Now, proceed to change the dimensions of the user control to fit the native resolution of the Windows Phone devices (i.e. 480 x 800)

<UserControl x:Class="DynamicSplashScreen.SplashScreen"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    d:DesignHeight="800" d:DesignWidth="480">

Add a couple of controls on the user control.

In our case, we will add a progress bar and a textbox.

<ProgressBar Height="30" HorizontalAlignment="Left" Margin="37,220,0,0" Name="progressBar1" VerticalAlignment="Top" Width="412" IsIndeterminate="True" />

<TextBox Height="72" HorizontalAlignment="Center" Margin="68,291,31,117" Name="textBox1" Text="Please wait ..." VerticalAlignment="Center" Width="381" />

Make sure you set the IsIndeterminate property of the Progress Bar to true since we will not be showing the exact progress in our hands-on.

Now, we need to modify our load-up code on MainPage.xaml to show our super awesome splash screen.

We will start by adding a class variable of type Popup called "popup".

public partial class MainPage : PhoneApplicationPage
    {
        Popup popup;
        // Constructor

Next in our constructor, we will change the code as shown below.

public MainPage()
        {
                InitializeComponent();
            this.popup = new Popup();
            SplashScreen s = new SplashScreen();
            this.popup.Child = s;
            this.popup.IsOpen = true;
            BackgroundWorker bw = new BackgroundWorker();
            bw.DoWork += new DoWorkEventHandler(bw_DoWork);
            bw.RunWorkerCompleted += new RunWorkerCompletedEventHandler(bw_RunWorkerCompleted);
            bw.RunWorkerAsync(); 
        }

Let us see what we did.

After InitializeComponent, we created a new instance of Popup. Next, we created a new instance of our freshly minted SplashScreen class and wired it up as a child of the popup instance.

We then set the IsOpen property to true.

We then proceed to create an instance of a "Background Worker" class, which will do some work for us. One use of using a background worker class is that it provides a delegate when the work is complete, so we can use that delegate to switch the IsOpen property of the popup to false so that user can see our main application window.

Here is the code.

void bw_RunWorkerCompleted(object sender, RunWorkerCompletedEventArgs e) 
        { 
            this.popup.IsOpen = false;
        }

        void bw_DoWork(object sender, DoWorkEventArgs e)
        {
            Thread.Sleep(4000);
        }

Now, let us go ahead and run this.

When you run this, you will notice that the splash screen lasts about 4 seconds long and while the splash screen is on, the progress bar shows activity that indicates to the user that there is activity.

Windows Phone progress bar
Figure 5: Windows Phone progress bar

If you are not able to follow along, you can grab a copy of the source code which contains the working code on how to setup static as well as dynamic splash screens.

Summary

In this article, we saw how to create static as well as XAML based dynamic splash screens. I hope you have found this information useful.



About the Author

Vipul Vipul Patel

Vipul Patel is a Software Engineer currently working at Microsoft Corporation, working in the Office Communications Group and has worked in the .NET team earlier in the Base Class libraries and the Debugging and Profiling team. He can be reached at vipul_d_patel@hotmail.com

Related Articles

Downloads

Comments

  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Confused by all the agile advice? Relax! With the Agile for Dummies eBook by your side you'll learn the fundamentals of agile and how to increase the productivity of your software teams while enabling them to produce higher-quality solutions that better fulfill customer needs much faster.

  • It's time high-level executives and IT compliance officers recognize and acknowledge the danger of malicious insiders, an increased attack surface and the potential for breaches caused by employee error or negligence. See why there is extra emphasis on insider threats.

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds