×
Namespaces

Variants
Actions
(Difference between revisions)

Splash Screen with additional splash image on Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search
kiran10182 (Talk | contribs)
m (Kiran10182 -)
hamishwillee (Talk | contribs)
m (Hamishwillee - Minor subedit)
Line 14: Line 14:
 
Generally we see two Splash Screens in an app.
 
Generally we see two Splash Screens in an app.
  
1 - Defining additional branding to the app(like Comapnay Information).
+
# Defining additional branding to the app(like Company Information).
 
+
# Defining your Application Information
2 - Defining your Application Information
+
  
 
== Basic Idea ==
 
== Basic Idea ==
  
1) For First Splash Screen:
+
# For First Splash Screen: You’ll just need to add a single splash screen image('''SplashScreenImage.jpg''') to root folder of your app project.
You’ll just need to add a single splash screen image('''SplashScreenImage.jpg''') to root folder of your app project.
+
# 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) 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
+
  
  
Line 60: Line 56:
  
 
=== Modifying ExtendedSplashScreen.xaml ===
 
=== Modifying ExtendedSplashScreen.xaml ===
In ExtendedSplashScreen.xaml replace the code with the following code.
+
In '''ExtendedSplashScreen.xaml''' replace the code with the following code:
  
 
<code xml>
 
<code xml>
Line 83: Line 79:
 
</code>
 
</code>
  
This code is adding an  image(ExtendedSplashScreen.jpg) to your ExtendedSplashScreen.xaml
+
This code is adding an  {{Icode|image(ExtendedSplashScreen.jpg)}} to your '''ExtendedSplashScreen.xaml'''
  
 
=== Modifying ExtendedSplashScreen.xaml.cs ===
 
=== Modifying ExtendedSplashScreen.xaml.cs ===
  
In ExtendedSplashScreen.xaml.cs replace the code with the following code.
+
In '''ExtendedSplashScreen.xaml.cs''' replace the code with the following code:
  
 
<code csharp>
 
<code csharp>
Line 122: Line 118:
 
}
 
}
 
</code>
 
</code>
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
+
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'''
  
 
=== Modifying 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,
+
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,
So override the OnBackKeyPress Method in MainPage.xaml.cs and Terminate the Application on Back key press.
+
So override the {{Icode|OnBackKeyPress}} Method in '''MainPage.xaml.cs''' and Terminate the Application on Back key press.
  
 
<code csharp>
 
<code csharp>

Revision as of 09:42, 12 March 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 Mar 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 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

722 page views in the last 30 days.
×