Custom splash screen page for Windows Phone applications
hamishwillee
(Talk | contribs) m (Hamishwillee - Fix typo) |
kiran10182
(Talk | contribs) m (Kiran10182 -) |
||
| 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. | |
# First create windows phone project from visual studio. | # First create windows phone project from visual studio. | ||
| Line 112: | Line 112: | ||
</code> | </code> | ||
| − | Please note | + | 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. |
| − | SplashPage_Loaded function | + | |
[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 | + | In this file, you may perform any necessary background tasks while the splash screen is visible. |
Modify MainPage.xaml.cs | Modify MainPage.xaml.cs | ||
Revision as of 10:17, 6 November 2012
This article explains how to create your own custom splash screen
Article Metadata
Code Example
Tested with
Compatibility
Article
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 achieve the same functionality.
- First create windows phone project from visual studio.
- 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.
<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
- 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 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. 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.
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
