×
Namespaces

Variants
Actions
(Difference between revisions)

Custom splash screen page for Windows Phone applications

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Add Sliverlight category)
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update - Fix metadata)
Line 3: Line 3:
  
 
{{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
Line 9: Line 9:
 
|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]]
 
}}
 
}}
  
Line 30: Line 30:
 
# First create windows phone project from visual studio.
 
# First create windows phone project from 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.<br />
+
# 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.<br />
  
  
Line 57: Line 57:
 
</code>
 
</code>
  
Note keet SystemTray.IsVisible= False to show splash image covering whole screen.
+
Note keet SystemTray.IsVisible= False to show splash image covering whole screen.
  
 
=== Modify SplashPage.cs ===
 
=== Modify SplashPage.cs ===
 
Now open SplashPage.cs file
 
Now open SplashPage.cs file
# Handle Loaded Event of SplashPage , refer following code
+
# Handle Loaded Event of SplashPage, refer following code
  
 
<code csharp>
 
<code csharp>
Line 79: Line 79:
 
     public partial class SplashPage : PhoneApplicationPage
 
     public partial class SplashPage : PhoneApplicationPage
 
     {
 
     {
         private HttpWebRequest request;
+
         private HttpWebRequest request;
  
 
         public SplashPage()
 
         public SplashPage()
Line 118: Line 118:
  
 
Modify MainPage.xaml.cs
 
Modify MainPage.xaml.cs
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
+
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 141: Line 141:
 
</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>
+
<big>Finally add SplashPage.xaml in WMAppManifest in Navigation Page tab so user is navigated to the Splash screen on application startup</big>
 +
[[Category:Code Examples]]

Revision as of 10:06, 6 November 2012

This article explains how to create your own custom splash screen

{{ArticleMetaData |sourcecode= [[File:SplashDemoWinPhone.zip |installfile= |devices= windows phone 8 emulator |sdk= windows phone 8 |platform= windows phone |devicecompatability= |dependencies= |signing= |capabilities= |keywords= |language= |translated-by= |translated-from-title= |translated-from-id= |review-by= |review-timestamp= |update-by= |update-timestamp= |creationdate= 20121102 |author= mehul_raje }}

Introduction

Most of the time during application launch up you need to do some background operations like 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.

  1. First create windows phone project from visual studio.
  2. Delete default splash screen image from project
  3. 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.


<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>

Note keet SystemTray.IsVisible= False to show splash image covering whole screen.

Modify SplashPage.cs

Now open SplashPage.cs file

  1. Handle Loaded Event of SplashPage, refer 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.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 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, deployment.Current.Dispatcher.BeginInvoke is used to access UI thread. In this file you can do any needed work in background by keeping user engage in splash screen.

Modify MainPage.xaml.cs From SplashPage user is navigated to MainPage, Once MainPage is loaded remove stack entry of SplashPage from back stack as SplashScreen cant be consider as page so user doesn't want to come to SplashScreen,refer following code to do this

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

Finally add SplashPage.xaml in WMAppManifest in Navigation Page tab so user is navigated to the Splash screen on application startup

551 page views in the last 30 days.
×