×
Namespaces

Variants
Actions
(Difference between revisions)

Custom splash screen page for Windows Phone applications

From Nokia Developer Wiki
Jump to: navigation, search
chintandave_er (Talk | contribs)
(Chintandave er - code formatting according to language)
SB Dev (Talk | contribs)
m (SB Dev - - Introduction)
 
(24 intermediate revisions by 6 users not shown)
Line 1: Line 1:
[[Category:Windows Phone]][[Category:UI]]
+
[[Category:UI on Windows Phone]][[Category:XAML]][[Category:Code Examples]][[Category:Windows Phone 7.5]]
{{Abstract|This article explains how to create your own custom splash screen }}<br />
+
{{Abstract|This article explains how to create a custom splash screen page for your Windows Phone application.}}
 +
{{SeeAlso|
 +
* [[Custom splash screen with progress bar for Windows Phone applications]]
 +
* [[Hiding the Application Bar during Splashscreen display and controlling its opacity]]
 +
}}
  
 
{{ArticleMetaData <!-- v1.2 -->
 
{{ArticleMetaData <!-- v1.2 -->
|sourcecode= [[File:SplashDemoWinPhone.zip|source code]]
+
|sourcecode= [[File:SplashDemoWinPhone.zip]]
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
|devices= windows phone 8 emulator
+
|devices= Windows Phone 8 Emulator
|sdk= windows phone 8
+
|sdk= Windows Phone 8
|platform= windows phone
+
|platform= Windows Phone
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->  
+
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
+
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|translated-by= <!-- [[User:XXXX]] -->
 
|translated-by= <!-- [[User:XXXX]] -->
|translated-from-title= <!-- Title only -->  
+
|translated-from-title= <!-- Title only -->
 
|translated-from-id= <!-- Id of translated revision -->
 
|translated-from-id= <!-- Id of translated revision -->
|review-by=<!-- After re-review: [[User:username]] -->
+
|review-by= <!-- After re-review: [[User:username]] -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 
|creationdate= 20121102 <!-- Format YYYYMMDD -->
 
|creationdate= 20121102 <!-- Format YYYYMMDD -->
|author= [[User:mehul_raje]]
+
|author= [[User:Mehul raje]]
 
}}
 
}}
  
 +
[[Category:Windows Phone 8]][[Category:Windows Phone 7.5]][[Category:UI on Windows Phone]][[Category:How To]]
 
== Introduction ==
 
== Introduction ==
"Most of the time during application launch up you need to do some background operations like [http://msdn.microsoft.com/en-us/library/hh221581.aspx making web request] or parsing some data or something else and while doing this in background it is necessary to keep user engage showing splash screen this article helps you with this."
+
In most cases during the launch of an application, you need to do some background operations such as [http://msdn.microsoft.com/en-us/library/hh221581.aspx making a web request], parsing some data or something else and while doing this in the background it is necessary to keep the user engaged by showing a splash screen.<br />
 +
This article helps you to create a splash screen from a 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 the  [[Improving_the_default_Splash_Screen_on_Windows_Phone|popup approach]] is that you can dynamically set start up or the next page depending on the result of your background activity.
  
+
==Necessary steps==
# First create windows phone project from visual studio.
+
# First create a Windows phone Project in visual studio.
#Delete default splash screen image from project
+
# Delete the default splash screen image from project.
#Your project already contains MainPage.xaml file keep it as it is, add new Page named SplashPage.xaml in project , replace existing xaml file code with following code.
+
# Your project already contains a 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 the following code.
  
 
<code xml>
 
<code xml>
Line 57: Line 64:
 
</code>
 
</code>
  
Note  keet  SystemTray.IsVisible= False to show splash image covering whole screen.
+
Make sure to set {{Icode|shell:SystemTray.IsVisible}} to False to use the full screen to display the image.
  
=== Modify SplashPage.cs ===
+
=== Modifying SplashPage.cs ===
Now open SplashPage.cs file
+
Now, edit the SplashPage.cs file
# Handle Loaded Event of SplashPage , refer following code
+
# Handle the {{Icode|Loaded}} Event of SplashPage - {{Icode|SplashPage_Loaded}}, as shown below,
  
 
<code csharp>
 
<code csharp>
Line 79: Line 86:
 
     public partial class SplashPage : PhoneApplicationPage
 
     public partial class SplashPage : PhoneApplicationPage
 
     {
 
     {
         private HttpWebRequest request;
+
         private HttpWebRequest request;
  
 
         public SplashPage()
 
         public SplashPage()
Line 112: Line 119:
 
</code>
 
</code>
  
Please note
+
Please note that the {{Icode|SplashPage_Loaded}} function merely makes an asynchronous HTTP request, and that the {{Icode|ReceiveResponseCallBack}} is called when the HTTP request returns a response. Upon receiving a response, the user is navigated to MainPage.xaml.
SplashPage_Loaded function simply making asynchronous http request, and ReceiveResponseCallBack is called when http request returns response, once response comes user is navigated to MainPage.xaml,
+
[http://msdn.microsoft.com/en-us/library/windowsphone/develop/system.windows.deployment(v=vs.105).aspx deployment.Current.Dispatcher.BeginInvoke] is used to access the UI thread.
[http://msdn.microsoft.com/en-us/library/windowsphone/develop/system.windows.deployment(v=vs.105).aspx 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.
In this file you can do any needed work in background by keeping user engage in splash screen.
+
  
 +
=== Modifying MainPage.xaml.cs ===
  
Modify MainPage.xaml.cs
+
From the SplashPage the user is navigated to the MainPage. Once the MainPage is loaded we should remove the entry of the SplashPage from the [http://msdn.microsoft.com/en-us/library/windowsphone/develop/hh394012(v=vs.92).aspx back stack]. This is done so that the 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.
From SplashPage user is navigated to MainPage , Once MainPage is loaded remove stack entry of SplashPage from [http://msdn.microsoft.com/en-us/library/windowsphone/develop/hh394012(v=vs.92).aspx back stack] as SplashScreen cant be consider as page so user doesn't want to come to SplashScreen,refer following code to do this
+
  
 
<code csharp>
 
<code csharp>
Line 142: Line 148:
 
</code>
 
</code>
  
<big>Finally add SplashPage.xaml in WMAppManifest in Navigation Page tab so user is navigated to the Splash screen on application startup</big>
+
 
 +
=== 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.

Latest revision as of 11:59, 3 September 2013

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

WP Metro Icon UI.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleTested with
SDK: Windows Phone 8
Devices(s): Windows Phone 8 Emulator
Compatibility
Platform(s): Windows Phone
Windows Phone 8
Windows Phone 7.5
Article
Created: mehul_raje (02 Nov 2012)
Last edited: SB Dev (03 Sep 2013)

Contents

[edit] Introduction

In most cases during the launch of an application, you need to do some background operations such as making a web request, parsing some data or something else and while doing this in the background it is necessary to keep the user engaged by showing a splash screen.
This article helps you to create a splash screen from a 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 the popup approach is that you can dynamically set start up or the next page depending on the result of your background activity.

[edit] Necessary steps

  1. First create a Windows phone Project in visual studio.
  2. Delete the default splash screen image from project.
  3. Your project already contains a 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 the 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 to use the full screen to display the image.

[edit] Modifying SplashPage.cs

Now, edit the 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 the SplashPage_Loaded function merely makes an asynchronous HTTP request, and that the ReceiveResponseCallBack is called when the HTTP request returns a response. Upon receiving a response, the user is navigated to MainPage.xaml. deployment.Current.Dispatcher.BeginInvoke is used to access the 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.

[edit] Modifying MainPage.xaml.cs

From the SplashPage the user is navigated to the MainPage. Once the MainPage is loaded we should remove the entry of the SplashPage from the back stack. This is done so that the 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();
}
 
}
}


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

[edit] Sample Code

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

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

This page was last modified on 3 September 2013, at 11:59.
523 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×