Creating a Splash Screen with a progress bar for WP7 applications.

If you have seen the demo of the sample application "USGA Shot Tracker" that was created by the UX and design team at Microsoft to demonstrate the principles of the UX on WP7 platform, you have probably noticed how the app is displaying a splash screen with an animated progress bar. The problem is that the SplashScreenImage.jpg which is used in the WP7 applications is just a static image and a few people are wondering how this functionality could be achieved. I don't know how exactly it was done in this application, but this what I came up with.

First, I created a new UserControl PopupSplash to the solution and added a few controls to it: ProgressBar, TextBlock and Image:

 After that I added some code to the MainPage to immedietely display a Popup when the MainPage is loaded. For the Popup I've used the PopupSplash  user control and made sure that it'd be shown from the MainPage's constructor:

  // Constructor
 public MainPage()
 {
      InitializeComponent();
      ShowPopup();

      // StartLoadingData();
 }

   private void ShowPopup()
  {
      this.popup = new Popup();          
      this.popup.Child = new PopupSplash();
      this.popup.IsOpen = true;            
  }

After that I started the app in the emulator waited unitl the popup is shown and made print screen by pressing "Prt Scr" button on the keyboard (make sure that any other window has focus besides the emulator). After that I pasted the sreen shot into the Paint program and cropped the image out of the emulator and made sure that the size of the image is 480x800:

Then I saved this image under the name of SplashScreenImage.jpg in my project. All what was left to do is to add some background process that'd emulate some lengthy process:

         private void StartLoadingData()
        {
            backroungWorker = new BackgroundWorker();
            backroungWorker.DoWork += new DoWorkEventHandler(backroungWorker_DoWork);
            backroungWorker.RunWorkerCompleted += new RunWorkerCompletedEventHandler(backroungWorker_RunWorkerCompleted);
            backroungWorker.RunWorkerAsync();
        }
 
        void backroungWorker_RunWorkerCompleted(object sender, RunWorkerCompletedEventArgs e)
        {
            this.Dispatcher.BeginInvoke(() =>
                {
                    this.popup.IsOpen = false;
 
                }
            );
        }
 
        void backroungWorker_DoWork(object sender, DoWorkEventArgs e)
        {
            // Do some data loading on a background
            // We'll just sleep for the demo
            Thread.Sleep(7000);
        }
    }

 When the BackgroundWorker finishes execution it'll close the Popup window. The result is the splash image is shown by the application for a moment and then the popup takes over. This handover is invisible for the user.

As always the project is available for your reuse.

 

ProgressSplashScreen.zip

Comments

• Anonymous
  October 02, 2010
  What about when the user opens the app and the phone happens to be in landscape orientation?

• Anonymous
  October 29, 2010
  Hi priozersk, First of all I appreciate your time in developing this wonderful solution and your kindness in sharing it with the rest of the world. Its absolutely fantastic work. I have a qn over here. Does the splashscreen image used in this project has any copyrights associated with it? Can I re-use it for a commercial application?

• Anonymous
  November 30, 2010
  Hi priozersk, Its not working, if the user open application in landscape? is there any solution

• Anonymous
  February 23, 2011
  Hi priozersk, How To effectively handle Back Key press from Main Page to Splash screen Page ?

• Anonymous
  March 22, 2012
  Absolutely superb work. Thanks for sharing. You have explained things in easy way to understand better.

• Anonymous
  January 01, 2014
  gd

• Anonymous
  January 28, 2014
  Works perfectly :) Wonderful work! And thank you for the share, was useful.