Custom splash screen page for Windows Phone applications

Comments

Influencer - Interesting, but...

Hi, mehul_raje

this is an interesting issue, but in my opinion some things are missing yet:

• some feedback the user gets while the splash page is active

and

• runnable sample code.

I tried your steps but the splash.jpg file you refer to was missing.

Thomas

influencer 21:10, 3 November 2012 (EET)

Mehul raje - Need steps,

Hi Influencer,

u tried with sample code i provided?, it already have splash.jpg bundled in it ,and about first point you raised could you please give me some more steps or elaboration as its working fine with me it seems some n/w related issue.

Mehul

mehul_raje 07:55, 4 November 2012 (EET)

Influencer - Used your steps

Hi Mehul, I used the steps you described in the article. I overlooked the link to the sample code in the metadata. Sorry. I'll try the sample. Thanks,

Thomas

influencer 10:29, 4 November 2012 (EET)

Croozeus - Other similar articles; Sub-edited &formatted

Hi Mehul,

Thanks for writing this article. As a first article on the wiki it's a good contribution.

However, I also found two other existing articles related to splash screen in the WP category,

• Improving_the_default_Splash_Screen_on_Windows_Phone
• Hiding_the_Application_Bar_during_Splashscreen_display_and_controlling_its_opacity

In such cases, it would be good to exactly show what your article adds over already existing content.

Improving_the_default_Splash_Screen_on_Windows_Phone article does what your article does too. Please check, what is the difference?

--

I sub-edited and formatted your article. You can see what I changed here: http://www.developer.nokia.com/Community/Wiki/index.php?title=Splash_screen_for_Windows_Phone_application&action=historysubmit&diff=176837&oldid=176785

• I improved the readability of the article - use articles (a, an, the) and capitalization wherever required.
• If you use any function / variable names outside the code blocks it's a good practice to wrap them into Icode template, as I have done. This give a code like font to the text and makes it easier for the reader to differentiate.
• It's good to have the articles split up into sections - introduction,...., summary, sample code, etc. so the readers get a good idea of what the article covers. I formatted your articles into sections.

--Pankaj

croozeus 09:12, 7 November 2012 (EET)

Hamishwillee - Agree with Pankaj

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.

I have added SeeAlso links to the other articles too. Looking forward to hearing your thoughts Mehul.

hamishwillee 06:20, 8 November 2012 (EET)

Mehul raje

Hi,

Thanks Pankaj and Hamish for suggestion it really helped me , i already looked article which you mentioned in comment,

i considered following points while giving this example

1. The major one is this example considers splash screen as separate page rather than considering splash screen as popup and handling it in code behind file of application start up page or app.xaml.cs,the advantage of this is all stuff which we wants to do on application start up in background can be put in separate page(splash page in this case) rather than mixing it in start up page.

2. If application start up page is to be decided on some conditions then this approach is best way, where user can do background processing in splash page and depending on result the start up page can be decided at runtime.

Thanks.

mehul_raje 08:31, 8 November 2012 (EET)

Croozeus - Renamed and added summary

Thanks for your comments Mehul.

I've renamed the article to Custom splash screen page for Windows Phone applications which justifies the content. Also, I added a summary to suggest that there can be other ways (or similar) to create splash screens for WP apps.

Please check if you are happy with it.

--Pankaj

croozeus 11:15, 14 November 2012 (EET)

Hamishwillee - This is a better name + a suggestion

Hi Mehul, Pankaj

First, yes, really good to rename to differentiate from the other article.

Mehul, I don't really agree with your #1 point since you can put the popup behaviour more or less in its own page too if you want. However I do see that by making the splash screen as a page that is displayed first you have the benefits that there is no delay or flicker due to display of the popup. More important you're quite right that in the other approach the first "page" is already drawn underneath the popup while in your approach the splashscreen is the first page and you can decide the next page dynamically.

At the moment the introduction only explains why you might want a splash screen. You might want to cover some other use cases - for example perhaps you just want the splashscreen to display for a bit longer than it takes to load your app. I also suggest you add a line explaining the approach used and its benefits. So perhaps replace "This article helps you to create this splash screen." with "The article shows how to create a splash screen as a page of XAML and display it as soon as the application is launched. A benefit of this approach over others (like using a popup<make that a link to other approach>) is that the next page can be determined dynamically because it has not already been constructed under the splashscreen"

It would also perhaps be a good idea to explain the interaction with the default splash screen, provide a link to documentation on that, and explain possible issues. As I understand it the default splash screen is just an image, so presumably one implication is that your custom screen might start with the same appearance of this image and then change it.

Thanks for this

Regards

Hamish

hamishwillee 05:16, 15 November 2012 (EET)

Log in or Join to leave comments.

This article explains how to create a custom splash screen page for your Windows Phone application.

See Also

• Custom splash screen with progress bar for Windows Phone applications
• Hiding the Application Bar during Splashscreen display and controlling its opacity

Article Metadata

---

Code Example

Source file: File:SplashDemoWinPhone.zip

---

Tested with

SDK: Windows Phone 8

Devices(s): Windows Phone 8 Emulator

---

Compatibility

Platform(s): Windows Phone

---

Article

Created: mehul_raje (02 Nov 2012)

Last edited: hamishwillee (10 Apr 2013)

Introduction

In most cases during the launch of an application, you need to do some background operations such as making web request, parsing some data or something else and while doing this in background it is necessary to keep the user engaged by showing splash screen.
This article helps you to create splash screen from XAML page and display it as soon as your application launches, and show it until your background activity finishes. The advantage of this approach rather than popup approach is that you can dynamically set start up or next page depending on the result of your background activity.

Necessary steps

1. First create a Windows phone Project in visual studio.
2. Delete default splash screen image from project.
3. Your project already contains MainPage.xaml file, keep it as it is. Add a new Page named SplashPage.xaml in the project, replace the existing xaml file code with following code.

<phone:PhoneApplicationPage
    x:Class="WindowsPhoneSample5.SplashPage"
    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">
 
    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Image Source="/splash.jpg" Stretch="Fill"/>
    </Grid>
 
</phone:PhoneApplicationPage>

Make sure to set shell:SystemTray.IsVisible to False for using the full screen to display the image.

Modifying SplashPage.cs

Now, edit SplashPage.cs file

1. Handle the Loaded Event of SplashPage - SplashPage_Loaded, as shown below,

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.IO;
 
namespace WindowsPhoneSample5
{
    public partial class SplashPage : PhoneApplicationPage
    {
        private HttpWebRequest request;
 
        public SplashPage()
        {
            InitializeComponent();
            Loaded += SplashPage_Loaded;
        }
 
        void SplashPage_Loaded(object sender, RoutedEventArgs e)
        {
            request = (HttpWebRequest)HttpWebRequest.Create(new Uri("http://www.developer.nokia.com/Community/Wiki/Portal:Windows_Phone_UI_Articles"));
            request.BeginGetResponse(new AsyncCallback(ReceiveResponseCallBack), null);
        }
 
        private void ReceiveResponseCallBack(IAsyncResult result)
        {
            HttpWebResponse response = (HttpWebResponse)this.request.EndGetResponse(result);
            using (var stream = response.GetResponseStream())
            {
                using (StreamReader reader = new StreamReader(stream))
                {
                    string str =  reader.ReadToEnd();
                    Deployment.Current.Dispatcher.BeginInvoke(() =>
                    {
                        NavigationService.Navigate(new Uri("/MainPage.xaml", UriKind.Relative));
                    });
                }
            }
        }
    }
}

Please note that SplashPage_Loaded function merely makes an asynchronous HTTP request, and ReceiveResponseCallBack is called when the HTTP request returns a response. On receiving a response, the user is navigated to MainPage.xaml. deployment.Current.Dispatcher.BeginInvoke is used to access UI thread. Thus in the function, you may add code to perform any necessary background tasks while the splash screen is shown to the user.

Modifying MainPage.xaml.cs

From SplashPage the user is navigated to MainPage. Once the MainPage is loaded we should remove the stack entry of the SplashPage from back stack. This is done so that SplashScreen isn't considered as a page and the user doesn't navigate back to it by using the back key. To do this we need to modify the file MainPage.xaml.cs as follows.

namespace WindowsPhoneSample5
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
            Loaded += MainPage_Loaded;
        }
 
        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            NavigationService.RemoveBackEntry();
        }
 
    }
}

ModifyingWMAppManifest

The last step is to add SplashPage.xaml in the Navigation Page tab of WMAppManifest.xml file. This is done so that the user is shown the splash screen when the application is launched.

Sample Code

Sample project demonstrated in this article is available for download here: Media:SplashDemoWinPhone.zip

Summary

This article illustrated how you can develop a custom splash screen page for your Windows Phone application. There are other approaches to create a custom splash screen too, please refer to the see also section for related articles.