Splash Screen and Extended Splash Screen wp8

Article Metadata

---

Code Example

Source file: File:ExtendedSplash.zip

---

Tested with

Devices(s): Nokia Lumia 820

---

Article

Created: Shayan Rais (07 Mar 2013)

Last edited: hamishwillee (12 Mar 2013)

This article demonstrates how to include a splash screen and an extended splash screen for Windows Phone Apps.

Introduction

A Splash Screen is an image that appears while a game or an app is being loaded. It is used as an introduction page of an application.

Generally we see two Splash Screens in an app.

1. Defining additional branding to the app(like Company 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.
2. 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

Implementation

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:

<phone:PhoneApplicationPage
    x:Class="ExtendedSplash.ExtendedSplashScreen"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d"
    shell:SystemTray.IsVisible="False">
 
    <Image HorizontalAlignment="Center" VerticalAlignment="Center" Source="/Images/ExtendedSplashScreen.jpg"/>
 
</phone:PhoneApplicationPage>

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()
        {
            InitializeComponent();
 
            //Call MainPage from ExtendedSplashScreen after some delay
            Splash_Screen();
        }
 
        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 that's 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)
{
            Application.Current.Terminate();
}

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