Splash Screen and Extended Splash Screen wp8

Comments

Influencer - Found another article about splash screens

Hi Shayan,

thank you for your effort in creating this article, but I found at least one older article on creating an active splash screen on WP:

Custom splash screen page for Windows Phone applications.

This article is not yet prepared for the new WP8 resolutions but it shows how to do some background work during the splash, so it even has additional value compared to your solution.

I propose you integrate your WP8 ideas into the existing article instead. There is no point creating a "duplicate" of existing content, so searching first before creating is a very good idea. If you know something about a topic then you can always review and improve one that is already there, and add your name to the update.

Thanks,

Thomas

influencer 23:47, 7 March 2013 (EET)

Chintandave er - Screen snaps

Hi Thanks for this new article.

I like the article and I suggest you to improve it little further by adding some screenshot of some demo code output.

Thanks,

Chintan.

Chintandave er 19:39, 8 March 2013 (EET)

Shayan Rais - Reply

@Influencer

This Page is created to target wp8 Audience

@Chintandave er

Thank you, Sure I will try to update it asap.

Thanks,

Shayan

Shayan Rais 12:54, 9 March 2013 (EET)

Kiran10182 - How would it differ for WP7 and WP8?

Hi Shayan,

First of all, thanks for the article. I would echo what Infuencer said in the first comment. We already have an existing article about Splash screen. You say that this one is for Windows Phone 8. Can you please elaborate how would your article differ from the existing http://www.developer.nokia.com/Community/Wiki/Custom_splash_screen_page_for_Windows_Phone_applications article?

Thanks,

Kiran

kiran10182 21:48, 11 March 2013 (EET)

Hamishwillee - A few things that are different

Hi Shayan

Obviously if there are lots of different ways to do a task, or major differences between approaches for different platform versions, then it is worth having a new article to cover the complicated cases. However as a rule if things don't change between versions then it is better to add the "delta" information to the original article. That way users find the single "right" article - which is why kiran and influencer brought this up.

From what I can see this is the case here - can you possibly integrate into the other article as suggested by Influencer?

In the meantime I have done a minor subedit - # for ordered lists, bold for filename markup, Icode for inline code. Check out the style markeup and how it looks better.

This is not awful, it just isn't the right article to create when we already have one. Thanks for contributing!

Regards

Hamish

hamishwillee 08:39, 12 March 2013 (EET)

Log in or Join to leave comments.

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