×
Namespaces

Variants
Actions
(Difference between revisions)

Custom splash screen page for Windows Phone applications

From Nokia Developer Wiki
Jump to: navigation, search
mehul_raje (Talk | contribs)
(Mehul raje -)
 
mehul_raje (Talk | contribs)
(Mehul raje - - Introduction)
Line 28: Line 28:
  
 
== Introduction ==
 
== 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 you want to engage  user by showing splash screen this article helps you with this."
+
"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 necessory to keep user engage showing splash screen this article helps you with this."
  
 
   
 
   
Line 81: Line 81:
 
     public partial class SplashPage : PhoneApplicationPage
 
     public partial class SplashPage : PhoneApplicationPage
 
     {
 
     {
         private HttpWebRequest request;
+
         private HttpWebRequest request;
  
 
         public SplashPage()
 
         public SplashPage()
Line 116: Line 116:
 
Please note
 
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,
 
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.
+
[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 can do any needed work in background by keeping user engage in splash screen.
 +
 
  
 
Modify MainPage.xaml.cs
 
Modify MainPage.xaml.cs
Line 137: Line 139:
 
             NavigationService.RemoveBackEntry();
 
             NavigationService.RemoveBackEntry();
 
         }
 
         }
 
+
     
     
+
 
     }
 
     }
 
}
 
}
 
</code>
 
</code>
  
 +
<big>Finally add SplashPage.xaml  in WMAppManifest in Navigation Page tab so at first user is navigated to the Splash screen</big>
  
 
== Summary ==
 
== Summary ==

Revision as of 11:42, 2 November 2012


This article explains how to create your own custom splash screen

Enter article metadata as described below. Note that this template can be placed anywhere in the article. Do not remove parameters that you do not use

WP Metro Icon UI.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
CompatibilityArticle
Created: (03 Nov 2012)
Last edited: mehul_raje (02 Nov 2012)

Contents

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 necessory 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 i kept 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 at first user is navigated to the Splash screen

Summary

Remove Category:Draft when the page is complete or near complete


The "platform categories" will be displayed here in preview only - Copy paste relevant categories into text here

Version Hint

Windows Phone: [[Category:Windows Phone]]
[[Category:Windows Phone 7.5]]
[[Category:Windows Phone 8]]

Nokia Asha: [[Category:Nokia Asha]]
[[Category:Nokia Asha Platform 1.0]]

Series 40: [[Category:Series 40]]
[[Category:Series 40 1st Edition]] [[Category:Series 40 2nd Edition]]
[[Category:Series 40 3rd Edition (initial release)]] [[Category:Series 40 3rd Edition FP1]] [[Category:Series 40 3rd Edition FP2]]
[[Category:Series 40 5th Edition (initial release)]] [[Category:Series 40 5th Edition FP1]]
[[Category:Series 40 6th Edition (initial release)]] [[Category:Series 40 6th Edition FP1]] [[Category:Series 40 Developer Platform 1.0]] [[Category:Series 40 Developer Platform 1.1]] [[Category:Series 40 Developer Platform 2.0]]

Symbian: [[Category:Symbian]]
[[Category:S60 1st Edition]] [[Category:S60 2nd Edition (initial release)]] [[Category:S60 2nd Edition FP1]] [[Category:S60 2nd Edition FP2]] [[Category:S60 2nd Edition FP3]]
[[Category:S60 3rd Edition (initial release)]] [[Category:S60 3rd Edition FP1]] [[Category:S60 3rd Edition FP2]]
[[Category:S60 5th Edition]]
[[Category:Symbian^3]] [[Category:Symbian Anna]] [[Category:Nokia Belle]]

Add categories below using category selector.

560 page views in the last 30 days.
×