×
Namespaces

Variants
Actions
(Difference between revisions)

Custom splash screen page for Windows Phone applications

From Nokia Developer Wiki
Jump to: navigation, search
croozeus (Talk | contribs)
m (Croozeus - Abstract & metadata)
croozeus (Talk | contribs)
m (Croozeus - - Introduction: Edited, improved, formatted)
Line 26: Line 26:
  
 
== Introduction ==
 
== Introduction ==
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 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 achieve the same functionality.
+
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 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 this splash screen.
 
   
 
   
# 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 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 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.
  
 
<code xml>
 
<code xml>
Line 56: Line 56:
 
</code>
 
</code>
  
Make sure to set SystemTray.IsVisible= False to show splash image covering the whole screen.
+
Make sure to set {{iCode|shell:SystemTray.IsVisible}} to False for using the full screen to display the image.
  
 
=== Modify SplashPage.cs ===
 
=== Modify SplashPage.cs ===
Now open SplashPage.cs file
+
Now, edit 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 111: Line 111:
 
</code>
 
</code>
  
Please note that SplashPage_Loaded function merely makes an asynchronous http request, and ReceiveResponseCallBack is called when http request returns response. On receiving the response, user is navigated to MainPage.xaml.  
+
Please note that {{iCode|SplashPage_Loaded}} function merely makes an asynchronous HTTP request, and {{iCode|ReceiveResponseCallBack}} is called when the HTTP request returns a response. On receiving a response, the 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 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.
In this file, you may perform any necessary background tasks while the splash screen is visible.
+
Thus in the function, you may add code to perform any necessary background tasks while the splash screen is shown to the user.
  
Modify 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 [http://msdn.microsoft.com/en-us/library/windowsphone/develop/hh394012(v=vs.92).aspx 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.
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 139: Line 138:
 
</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>
+
The last step is to add SplashPage.xaml in the Navigation Page tab of WMAppManifest -  so user is shown the splash screen when the application is launched.

Revision as of 09:41, 7 November 2012

This article explains how to create a custom splash screen 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: croozeus (07 Nov 2012)

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 this splash screen.

  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 Template:ICode to False for using the full screen to display the image.

Modify SplashPage.cs

Now, edit SplashPage.cs file

  1. Handle the Template:ICode Event of SplashPage - Template:ICode, 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 Template:ICode function merely makes an asynchronous HTTP request, and Template:ICode 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.

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();
}
 
}
}

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

600 page views in the last 30 days.
×