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