Revision as of 20:42, 8 March 2013 by chintandave_er (Talk | contribs)

Splash Screen with additional splash image on Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search
WP Metro Icon UI.png
WP Metro Icon WP8.png
Article Metadata
Code ExampleTested with
Devices(s): Nokia Lumia 820
Windows Phone 8
Created: Shayan Rais (07 Mar 2013)
Last edited: chintandave_er (08 Mar 2013)

This article demonstrates how to include a Splash Screen and an Extended Splash Screen for Windows Phone Apps.



A Splash Screen is an image that appears while a game or app is loading. It is used to describe an introduction page of your App.

Generally we see two Splash Screens in an app.

1 - Defining additional branding to the app(like Comapnay Information).

2 - Defining your Application Information

Basic Idea

1) For First Splash Screen: You’ll just need to add a single splash screen image(SplashScreenImage.jpg) to root folder of your app project.

1) For Extended Splash Screen: You’ll need to add a new page(ExtendedSplashScreen.xaml) as a Navigation Page and then do some coding for displaying ExtendedSplashScreen.xaml then navigate back to Mainpage.xaml


1 - Create a Windows phone Project in visual studio.

Implementing Default(First) Splash Screen

2 - Create an Image and name it SplashScreenImage.jpg with a resolution of 768 x 1280 and add to root folder of your project. The phone automatically scales the image to the correct size. If you want to provide pixel-perfect splash screens for all resolutions, you can add the following images to the root folder of your app project.

Resolution Dimensions in pixels File name
WVGA 480 x 800 SplashScreenImage.screen-WVGA.jpg
720p 720 x 1280 SplashScreenImage.screen-720p.jpg
WXGA 768 x 1280 SplashScreenImage.screen-WXGA.jpg

Implementing Extended(Second) Splash Screen

3 - Right Click on the Project and Add a New Folder, Name it Images

4 - Now Create an Image and name it ExtendedSplashScreen.jpg and add to folder(Images) of your project.

5 - Now Add a new Page named ExtendedSplashScreen.xaml in your project.

Modifying WMAppManifest.xml

6 - Go in the Properties Folder of your project, and open WMAppManifest.xml
Under ApplicationUI tab there is a field named Navigation Page which is set to MainPage.xaml , Clear the field and set it to ExtendedSplashScreen.xaml

Modifying ExtendedSplashScreen.xaml

In ExtendedSplashScreen.xaml replace the code with the following code.

FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
<Image HorizontalAlignment="Center" VerticalAlignment="Center" Source="/Images/ExtendedSplashScreen.jpg"/>

This code is adding an image(ExtendedSplashScreen.jpg) to your ExtendedSplashScreen.xaml

Modifying ExtendedSplashScreen.xaml.cs

In ExtendedSplashScreen.xaml.cs replace the code with the following code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
using System.Threading.Tasks;
namespace ExtendedSplash
public partial class ExtendedSplashScreen : PhoneApplicationPage
public ExtendedSplashScreen()
//Call MainPage from ExtendedSplashScreen after some delay
async void Splash_Screen()
await Task.Delay(TimeSpan.FromSeconds(3)); // set your desired delay
NavigationService.Navigate(new Uri("/MainPage.xaml", UriKind.Relative)); // call MainPage

We call a method Second _Splash() in ExtendedSplashScreen.xaml.cs which is producing a delay of 3 seconds and then calling our MainPage.xaml.cs

Modifying MainPage.xaml.cs

In MainPage if you press back key of the WindowsPhone you will be navigated back to the ExtendedSplashScreen and thats not what you want, So override the OnBackKeyPress Method in MainPage.xaml.cs and Terminate the Application on Back key press.

protected override void OnBackKeyPress(System.ComponentModel.CancelEventArgs e)

Just copy paste the above method after the constructor in MainPage.xaml.cs

And thats it you are done.

Source Code

The full source code of the example is available here: File:ExtendedSplash.zip

717 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.


Thank you!

We appreciate your feedback.