Custom splash screen with progress bar for Windows Phone applications
This article demonstrates how to create a splash screen with an animated progress bar.
Article Metadata
Code Example
Tested with
Compatibility
Article
Contents |
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.
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. So we will use the BackgroundWorker class to run an operation in a separate thread. This operation could be a call to the 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 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.
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 ProgressBar, TextBlock and Image in it. The image is the default splash of the project.
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();
}
First 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);
}
Where we use the Sleep() function to wait for some time. When backroungWorker_DoWork() gets expired BackgroundWorker() calls backroungWorker_RunWorkerCompleted() where we close 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 the progress bar we add
this.progressBar1.IsIndeterminate = true;
to the SplashScreenControl.xaml.cs class. Which brings a continuous flow of the progress bar.
Source Code
The full source code of the example is available here: File:SplashBar.zip
