×
Namespaces

Variants
Actions

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
Compatibility
Platform(s):
Windows Phone 8
Article
Created: Shayan Rais (07 Mar 2013)
Last edited: hamishwillee (12 Nov 2013)

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

Contents

Introduction

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.pngNote: 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.

Implementation

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

  1. Right click on the project and add a new folder. Name it "Images"
  2. Create an image and name it ExtendedSplashScreen.jpg. Add it to the Images folder.
  3. Add a new page to your project and name it ExtendedSplashScreen.xaml
  4. Set the Extended Splash Screen as the default page
    1. Go in the Properties folder of your project, and open WMAppManifest.xml
    2. 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
  5. In ExtendedSplashScreen.xaml replace the code with the snippet below. This adds image(ExtendedSplashScreen.jpg) to your ExtendedSplashScreen.xaml
    <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>
  6. 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
    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
     
    }
    }
    }
  7. 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)
    {
    base.OnNavigatedTo(e);
     
    // Check if ExtendedSplashscreen.xaml is on the backstack and remove
    if (NavigationService.BackStack.Count() == 1)
    {
    NavigationService.RemoveBackEntry();
    }
     
    }

    Note.pngNote: 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.

That's it!

Summary

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.

Source Code

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

This page was last modified on 12 November 2013, at 02:35.
722 page views in the last 30 days.
×