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.

More by Author

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Must Read