×
Namespaces

Variants
Actions
(Difference between revisions)

Splash Screen with additional splash image on Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Minor subedit)
hamishwillee (Talk | contribs)
 
(5 intermediate revisions by one user not shown)
Line 1: Line 1:
[[Category:Windows Phone]][[Category:Windows Phone 8]][[Category:UI]][[Category:Code Examples]][[Category:Code Snippet]]
+
[[Category:UI on Windows Phone]][[Category:Code Examples]][[Category:Windows Phone 8]]
 
{{ArticleMetaData <!-- v1.2 -->
 
{{ArticleMetaData <!-- v1.2 -->
 
|sourcecode= [[File:ExtendedSplash.zip]]
 
|sourcecode= [[File:ExtendedSplash.zip]]
Line 10: Line 10:
  
 
== Introduction ==
 
== 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.
+
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.
  
# Defining additional branding to the app(like Company Information).
+
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.
# Defining your Application Information
+
  
== Basic Idea ==
+
{{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.}}
  
# For First Splash Screen: You’ll just need to add a single splash screen image('''SplashScreenImage.jpg''') to root folder of your app project.
+
== Implementation  ==
# 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
+
  
 +
The implementation is fairly straightforward - first we add an image for the "default" splash screen.
  
== Implementation ==
+
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).
  
1 - Create a Windows phone Project in visual studio.
 
  
==== '''Implementing Default(First) Splash Screen''' ====
+
=== Create the default 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.
+
Create a Windows phone Project and implement the default splash screen.
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.
+
 
{|
+
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.
 +
{| class="wikitable"
 
|-
 
|-
 
! Resolution !! Dimensions in pixels !! File name
 
! Resolution !! Dimensions in pixels !! File name
Line 43: Line 43:
  
  
==== '''Implementing Extended(Second) Splash Screen''' ====
+
=== Implementing the extended splash screen ===
3 - Right Click on the Project and Add a New Folder, Name it Images
+
# 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.
4 - Now Create an Image and name it '''ExtendedSplashScreen.jpg''' and add to folder('''Images''') of your project.
+
# Add a new page to your project and name it '''ExtendedSplashScreen.xaml'''
 
+
# Set the Extended Splash Screen as the default page
5 - Now Add a new Page named '''ExtendedSplashScreen.xaml''' in your project.
+
## 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'''
=== Modifying WMAppManifest.xml  ===
+
# In '''ExtendedSplashScreen.xaml''' replace the code with the snippet below. This adds {{Icode|image(ExtendedSplashScreen.jpg)}} to your '''ExtendedSplashScreen.xaml'''
6 - Go in the Properties Folder of your project, and open ''WMAppManifest.xml''<br />
+
#: <code 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:
+
 
+
<code xml>
+
 
<phone:PhoneApplicationPage
 
<phone:PhoneApplicationPage
 
     x:Class="ExtendedSplash.ExtendedSplashScreen"
 
     x:Class="ExtendedSplash.ExtendedSplashScreen"
Line 78: Line 71:
 
</phone:PhoneApplicationPage>
 
</phone:PhoneApplicationPage>
 
</code>
 
</code>
 
+
# Replace '''ExtendedSplashScreen.xaml.cs''' with the following code snippet. The interesting code is {{Icode|Second _Splash()}}, which causes navigation to '''MainPage.xaml.cs''' after three seconds
This code is adding an  {{Icode|image(ExtendedSplashScreen.jpg)}} to your '''ExtendedSplashScreen.xaml'''
+
#: <code csharp>
 
+
=== Modifying ExtendedSplashScreen.xaml.cs ===
+
 
+
In '''ExtendedSplashScreen.xaml.cs''' replace the code with the following code:
+
 
+
<code csharp>
+
 
using System;
 
using System;
 
using System.Collections.Generic;
 
using System.Collections.Generic;
Line 118: Line 105:
 
}
 
}
 
</code>
 
</code>
We call a method {{Icode|Second _Splash()}} in '''ExtendedSplashScreen.xaml.cs''' which is producing a delay of 3 seconds and then calling our '''MainPage.xaml.cs'''
+
# By default if you navigate back from the MainPage the stack will take you back to the extended splash screen. Add {{Icode|OnNavigatedTo}} override to  '''MainPage.xaml.cs''' in order to remove the extended splash screen from the back stack.
 +
#: <code csharp>
 +
protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
 +
{
 +
  base.OnNavigatedTo(e);
  
=== Modifying MainPage.xaml.cs ===
+
  // Check if ExtendedSplashscreen.xaml is on the backstack  and remove
 +
  if (NavigationService.BackStack.Count() == 1)
 +
  {
 +
      NavigationService.RemoveBackEntry();
 +
  }
  
In {{Icode|MainPage}}  if you press back key of the WindowsPhone you will be navigated back to the {{Icode|ExtendedSplashScreen}} and that's not what you want,
+
}</code>
So override the {{Icode|OnBackKeyPress}} Method in '''MainPage.xaml.cs''' and Terminate the Application on Back key press.
+
#: {{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.}}
  
<code csharp>
+
That's it!
protected override void OnBackKeyPress(System.ComponentModel.CancelEventArgs e)
+
{
+
            Application.Current.Terminate();
+
}
+
</code>
+
Just copy paste the above method after the constructor in MainPage.xaml.cs
+
  
And thats it you are done.
+
== 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 ==
 
== Source Code ==
 
The full source code of the example is available here: [[File:ExtendedSplash.zip]]
 
The full source code of the example is available here: [[File:ExtendedSplash.zip]]

Latest revision as of 02:35, 12 November 2013

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

[edit] 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.

[edit] 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).


[edit] 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


[edit] 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!

[edit] 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.

[edit] 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.
884 page views in the last 30 days.