Splash Screen with additional splash image on Windows Phone
This article demonstrates how to include a splash screen and an extended splash screen for Windows Phone Apps.
A Splash Screen is a screen that is displayed immediately when an app or game is started, and which typically displays app and/or company information. While displaying app information is often valuable, the main purpose of a splash screen is to make the app appear to load quickly and be responsive, while loading occurs in the background.
Windows Phone provide a default splash-screen in the form of a static image that is displayed on page load. This article explains how you can define and display an additional splash screen (with static image) in a XAML page.
Note: This implementation is relatively "basic". There is nothing to stop you having a more "active" splash screen. In some apps, for example an ebook reader, you might want to change both the default and extended screen to throw up the last page read. The key thing to remember is that the app needs to appear responsive to the user, and more complicated screens can increase load-time.
The implementation is fairly straightforward - first we add an image for the "default" splash screen.
The extended splash screen is simply a new XAML page (ExtendedSplashScreen.xaml) which in this case simply displays another image. We add code to ensure that the new page is the default page, that it navigates to Mainpage.xaml when required, and that when the user navigates back from the main page the application exits (rather than navigating to the splash screen page).
Create the default splash screen
Create a Windows phone Project and implement the default splash screen.
You can provide a single image 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).
Alternatively, 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 the extended splash screen
- Right click on the project and add a new folder. Name it "Images"
- Create an image and name it ExtendedSplashScreen.jpg. Add it to the Images folder.
- Add a new page to your project and name it ExtendedSplashScreen.xaml
- Set the Extended Splash Screen as the default page
- Go in the Properties folder of your project, and open WMAppManifest.xml
- Under the ApplicationUI tab there is a field named Navigation Page which is set to MainPage.xaml: Clear the field and set it to ExtendedSplashScreen.xaml
- In ExtendedSplashScreen.xaml replace the code with the snippet below. This adds image(ExtendedSplashScreen.jpg) to your ExtendedSplashScreen.xaml
<Image HorizontalAlignment="Center" VerticalAlignment="Center" Source="/Images/ExtendedSplashScreen.jpg"/>
- Replace ExtendedSplashScreen.xaml.cs with the following code snippet. The interesting code is Second _Splash(), which causes navigation to MainPage.xaml.cs after three seconds
public partial class ExtendedSplashScreen : PhoneApplicationPage
//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
- By default if you navigate back from the MainPage the stack will take you back to the extended splash screen. Add OnNavigatedTo override to MainPage.xaml.cs in order to remove the extended splash screen from the back stack.
protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
// Check if ExtendedSplashscreen.xaml is on the backstack and remove
if (NavigationService.BackStack.Count() == 1)
Note: If it is possible to navigate to the MainPage through some other navigation path, the ExtendedSplashScreen page may not be the item on the back stack! In this case you'll need to use a more complicated mechanism to ensure that you remove only the splash screen - perhaps having the splash screen sending an argument to the MainPage in order to remove itself from the back stack.
This article showed how to create a simple extended splash screen that displays an additional image in a XAML page. The techniques can be extended to more interesting splash screens, but care must be taken to ensure that app loading remains responsive.
The full source code of the example is available here: File:ExtendedSplash.zip