×
Namespaces

Variants
Actions
(Difference between revisions)

Custom splash screen with progress bar for Windows Phone applications

From Nokia Developer Wiki
Jump to: navigation, search
somnathbanik (Talk | contribs)
(Somnathbanik - - Implementation)
hamishwillee (Talk | contribs)
m (Hamishwillee - Addition to article of: Category:Windows Phone 7.5)
(7 intermediate revisions by 3 users not shown)
Line 1: Line 1:
[[Category:Windows Phone]]
+
[[Category:Windows Phone]][[Category:Silverlight]][[Category:UI]]
{{Abstract|This article demonstrates how to create a splash screen with an animated progress bar.}}
+
{{Abstract|This article demonstrates how to create a splash screen with an animated progress bar on Windows Phone.}}
 
+
{{SeeAlso|
{{ArticleMetaData
+
* [http://msdn.microsoft.com/en-us/library/ff769511(v=vs.92).aspx How to: Create a Splash Screen for Windows Phone]
|sourcecode= [[Media: SplashBar.zip]]<!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
+
* [[Custom splash screen page for Windows Phone applications]]
 +
}}
 +
{{ArticleMetaData <!-- v1.2 -->
 +
|sourcecode= [[Media:SplashBar.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= WP7 Emulator <!-- Devices tested against - e.g. ''devices=N95, N8'') -->
 
|devices= WP7 Emulator <!-- Devices tested against - e.g. ''devices=N95, N8'') -->
|sdk= [https://www.developer.nokia.com/Develop/Windows_Phone/Tools/ Windows Phone SDK 7.1 ]<!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
+
|sdk= [http://www.developer.nokia.com/Develop/Windows_Phone/Tools/ Windows Phone SDK 7.1 ]
|platform= Windows Phone 7.1<!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
+
|platform= Windows Phone 7.5
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
+
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
|capabilities=<!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
+
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|keywords= Splash Screen/ Progress Bar<!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 
|keywords= Splash Screen/ Progress Bar<!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
|id= <!-- Article Id (Knowledge base articles only) -->
+
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
|creationdate= 04th October,2011<!-- Format YYYYMMDD -->
+
|translated-by= <!-- [[User:XXXX]] -->
|author= [[User:somnathbanik]] <!-- Display as link [[User:username]] -->
+
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20111004
 +
|author= [[User:Somnathbanik]]
 
}}
 
}}
  
 +
==Introduction==
 +
The default splash screen in Windows Phone 7 application is a static image of the right size that you declare as a resource with name '''splashscreenimage.jpg''' and set as type "content" . This article shows how you can replace this splash screen with another - in this case one that contains an animated progress bar.
 +
 +
The new splashscreen uses the [http://msdn.microsoft.com/en-us/library/system.windows.controls.primitives.popup%28v=VS.95%29.aspx Popup] class to display content on top of existing content. To remove "flicker" our new splashscreen will use the same static splashscreen as a background, but overlay it with the animated progress bar. The [http://msdn.microsoft.com/en-us/library/system.componentmodel.backgroundworker.aspx BackgroundWorker] class is used to run startup operations in a separate thread, and when complete it closes the [http://msdn.microsoft.com/en-us/library/system.windows.controls.primitives.popup%28v=VS.95%29.aspx Popup] class.
  
==Introduction==
 
The default  '''SplashScreenImage.jpg'''  in windows phone 7 application is a static image. In this article we will add an animated progress bar  in  the splash screen.
 
 
 
 
 
[[File: SplashBar.png|thumb|301px|none| Splash Screen]]  
 
[[File: SplashBar.png|thumb|301px|none| Splash Screen]]  
 
   
 
   
==Basic Idea==
 
Here we will use some tips and tricks to add  the progress bar in the splash screen. As we know that the default splash screen is '''SplashScreenImage.jpg''' and loads when the app starts. We use the [http://msdn.microsoft.com/en-us/library/system.windows.controls.primitives.popup%28v=VS.95%29.aspx Popup] class to displays content on top of existing content. In our case the existing content is the default splash screen, so we will add the same splash screen and the progress bar in the [http://msdn.microsoft.com/en-us/library/system.windows.controls.primitives.popup%28v=VS.95%29.aspx Popup] class so that the user doesn’t have the feel of image change. And thus the user will see the splash screen with an animated progress  bar. The [http://msdn.microsoft.com/en-us/library/system.componentmodel.backgroundworker.aspx BackgroundWorker] class is used to run an operation in a separate thread, so that when it expires we close the [http://msdn.microsoft.com/en-us/library/system.windows.controls.primitives.popup%28v=VS.95%29.aspx Popup] class.
 
 
[[Category:Windows Phone]]
 
 
==Implementation==
 
==Implementation==
 
   
 
   
First lets create a project with ''Windows Phone Application'' Template. Once the project is being created, lets create a ''Windows Phone User Control'' '''SplashScreenControl.xaml''' and add  {{Icode|ProgressBar}}, {{Icode|TextBlock}} and {{Icode|Image}} in it.  The image is the default splash of the project.  
+
First create a project with ''Windows Phone Application'' Template. Once the project is being created, create a ''Windows Phone User Control'' '''SplashScreenControl.xaml''' and add  {{Icode|ProgressBar}}, {{Icode|TextBlock}} and {{Icode|Image}} in it.  The image is the default splash of the project.  
 
<code cpp>
 
<code cpp>
 
<Grid x:Name="LayoutRoot" Background="White" Width="480" Height="800">             
 
<Grid x:Name="LayoutRoot" Background="White" Width="480" Height="800">             
Line 40: Line 46:
 
</code>
 
</code>
 
   
 
   
In ''MainPage.xaml.cs'' Constructor we called a function {{Icode|ShowSplash()}} to load the popup.
+
In ''MainPage.xaml.cs'' constructor we called a function {{Icode|ShowSplash()}} to load the popup.
 
   
 
   
<code cpp>
+
<code csharp>
 
private void ShowSplash()
 
private void ShowSplash()
 
         {
 
         {
Line 50: Line 56:
 
             StartLoadingData();
 
             StartLoadingData();
 
         }
 
         }
 
 
 
 
</code>
 
</code>
First we initialize the [http://msdn.microsoft.com/en-us/library/system.windows.controls.primitives.popup%28v=VS.95%29.aspx Popup] class and then set {{Icode|SplashScreenControl}} class to be hosted in the popup. {{Icode|IsOpen}} opens the popup. Till now the code will load the splash screen (popup) with the progress bar.  
+
 
Now we will add some background process,  and when the background process gets completed we will close the popup as a result user will see the splash screen.  
+
We initialize the [http://msdn.microsoft.com/en-us/library/system.windows.controls.primitives.popup%28v=VS.95%29.aspx Popup] class and then set {{Icode|SplashScreenControl}} class to be hosted in the popup. {{Icode|IsOpen()}} opens the popup. Till now the code will load the splash screen (popup) with the progress bar.  
 +
 
 +
Now we will add some background process,  and when the background process gets completed we will close the popup as a result user will see the splash screen.  
 
Function {{Icode|StartLoadingData()}} starts and complete the background work.
 
Function {{Icode|StartLoadingData()}} starts and complete the background work.
+
 
+
<code csharp>
<code cpp>
+
 
private void StartLoadingData()
 
private void StartLoadingData()
 
         {
 
         {
Line 67: Line 71:
 
             backroungWorker.RunWorkerAsync();
 
             backroungWorker.RunWorkerAsync();
 
         }
 
         }
 
 
 
</code>
 
</code>
 
First we initialize the [http://msdn.microsoft.com/en-us/library/system.componentmodel.backgroundworker.aspx BackgroundWorker] class. We called {{Icode|RunWorkerAsync()}} function to starts execution of a background operation and thus {{Icode|backroungWorker_DoWork()}} is called.
 
First we initialize the [http://msdn.microsoft.com/en-us/library/system.componentmodel.backgroundworker.aspx BackgroundWorker] class. We called {{Icode|RunWorkerAsync()}} function to starts execution of a background operation and thus {{Icode|backroungWorker_DoWork()}} is called.
<code cpp>
+
 
+
<code csharp>
 
void backroungWorker_DoWork(object sender, DoWorkEventArgs e)
 
void backroungWorker_DoWork(object sender, DoWorkEventArgs e)
 
         {
 
         {
Line 78: Line 80:
 
             Thread.Sleep(9000);
 
             Thread.Sleep(9000);
 
         }
 
         }
   
 
 
 
</code>
 
</code>
 
Here we use the {{Icode|Sleep()}} function to wait for some time. When {{Icode|backroungWorker_DoWork()}} gets expired, {{Icode|backroungWorker_RunWorkerCompleted()}} is called which closes the popup.
 
Here we use the {{Icode|Sleep()}} function to wait for some time. When {{Icode|backroungWorker_DoWork()}} gets expired, {{Icode|backroungWorker_RunWorkerCompleted()}} is called which closes the popup.
Line 89: Line 89:
 
             {
 
             {
 
                 this.popup.IsOpen = false;
 
                 this.popup.IsOpen = false;
 
 
             }
 
             }
 
             );
 
             );
 
         }
 
         }
 
 
 
</code>
 
</code>
Thus user can see a splash screen with the progress bar.  
+
 
 +
Thus user can see a splash screen with the progress bar.
 +
 
 
To make a continuous progress bar we add the below code in ''SplashScreenControl.xaml.cs''  
 
To make a continuous progress bar we add the below code in ''SplashScreenControl.xaml.cs''  
<code cpp>
+
<code csharp>this.progressBar1.IsIndeterminate = true; </code >
+
this.progressBar1.IsIndeterminate = true;
+
</code >
+
  
 
==Source Code==
 
==Source Code==
 
The full source code of the example is available here: [[File: SplashBar.zip]]
 
The full source code of the example is available here: [[File: SplashBar.zip]]
 +
[[Category:Code Examples]][[Category:Windows Phone 7.5]]

Revision as of 08:17, 30 November 2012

This article demonstrates how to create a splash screen with an animated progress bar on Windows Phone.

WP Metro Icon UI.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code Example
Source file: Media:SplashBar.zip
Tested with
Devices(s): WP7 Emulator
Compatibility
Platform(s): Windows Phone 7.5
Windows Phone 8
Windows Phone 7.5
Article
Keywords: Splash Screen/ Progress Bar
Created: somnathbanik (04 Oct 2011)
Last edited: hamishwillee (30 Nov 2012)

Introduction

The default splash screen in Windows Phone 7 application is a static image of the right size that you declare as a resource with name splashscreenimage.jpg and set as type "content" . This article shows how you can replace this splash screen with another - in this case one that contains an animated progress bar.

The new splashscreen uses the Popup class to display content on top of existing content. To remove "flicker" our new splashscreen will use the same static splashscreen as a background, but overlay it with the animated progress bar. The BackgroundWorker class is used to run startup operations in a separate thread, and when complete it closes the Popup class.

Splash Screen

Implementation

First create a project with Windows Phone Application Template. Once the project is being created, create a Windows Phone User Control SplashScreenControl.xaml and add ProgressBar, TextBlock and Image in it. The image is the default splash of the project.

<Grid x:Name="LayoutRoot" Background="White" Width="480" Height="800">            
<ProgressBar HorizontalAlignment="Left" Margin="47,692,0,89" Name="progressBar1" Width="383" />
<Image Height="512" HorizontalAlignment="Left" Margin="0,0,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="480" Source="SplashScreenImage.jpg" />
<TextBlock HorizontalAlignment="Left" Margin="185,656,0,114" Name="textBlock1" Text="Please Wait..." Width="111" Foreground="Black" FontSize="22" />
</Grid>

In MainPage.xaml.cs constructor we called a function ShowSplash() to load the popup.

private void ShowSplash()
{
this.popup = new Popup();
this.popup.Child = new SplashScreenControl();
this.popup.IsOpen = true;
StartLoadingData();
}

We initialize the Popup class and then set SplashScreenControl class to be hosted in the popup. IsOpen() opens the popup. Till now the code will load the splash screen (popup) with the progress bar.

Now we will add some background process, and when the background process gets completed we will close the popup as a result user will see the splash screen. Function StartLoadingData() starts and complete the background work.

private void StartLoadingData()
{
backroungWorker = new BackgroundWorker();
backroungWorker.DoWork += new DoWorkEventHandler(backroungWorker_DoWork);
backroungWorker.RunWorkerCompleted += new RunWorkerCompletedEventHandler(backroungWorker_RunWorkerCompleted);
backroungWorker.RunWorkerAsync();
}

First we initialize the BackgroundWorker class. We called RunWorkerAsync() function to starts execution of a background operation and thus backroungWorker_DoWork() is called.

void backroungWorker_DoWork(object sender, DoWorkEventArgs e)
{
//here we can load data
Thread.Sleep(9000);
}

Here we use the Sleep() function to wait for some time. When backroungWorker_DoWork() gets expired, backroungWorker_RunWorkerCompleted() is called which closes the popup.

 
void backroungWorker_RunWorkerCompleted(object sender, RunWorkerCompletedEventArgs e)
{
this.Dispatcher.BeginInvoke(() =>
{
this.popup.IsOpen = false;
}
);
}

Thus user can see a splash screen with the progress bar.

To make a continuous progress bar we add the below code in SplashScreenControl.xaml.cs

this.progressBar1.IsIndeterminate = true;

Source Code

The full source code of the example is available here: File:SplashBar.zip

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

×