Creating Splash Screens in Windows Phone 8 Apps

Problem

You want to build your own nice-looking Splash Screen in your Windows Phone 8 App.

Solution

Every app should have a nice Loading Page at start.

So, we'll building a nice one from scratch. Let's start!

The trick of having a Splash Screen is to display a UserControl as a Popup object. So make sure you add a new usercontrol with the following properties:

UserControl

Height 800

Width 480

Grid

Height 800

Width 480

You can fill in the Grid as you like, but I prefer adding a logo and ProgressBar with "IsIndeterminate" set to "True".

A case you can think as a Splash Screen:

That was Erdal Ozkaya's Blog App I built for Windows Phone :)

We have a label "Erdal Ozkaya" ,the logo of the app, a "Please Wait…" label and then a progressbar with the "IsIndeterminate" property set to "True".

Now that we have a SplashScreen UserControl added and designed, we must add codes to display it at startup.

In your MainPage.xaml (or whatever your start page is), start adding the codes step-by-step as in the following:

1. Create a Popup and BackgroundWorker

private Popup popup;
private BackgroundWorker backroungWorker;

2. Add BackgroundWorker code to simulate the loading by displaying SplashScreen for 9 seconds.Then setting the popup to false to display the MainPage.xaml as in the following:

private void StartLoadingData()
{
  backroungWorker = new BackgroundWorker();
  backroungWorker.DoWork += new DoWorkEventHandler(backroungWorker_DoWork);
  backroungWorker.RunWorkerCompleted +=
new RunWorkerCompletedEventHandler(backroungWorker_RunWorkerCompleted);
  backroungWorker.RunWorkerAsync();
}
void backroungWorker_DoWork(object sender, DoWorkEventArgs e)
{
  Thread.Sleep(9000);
}

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

3. Create a method that displays Popup and load StartLoadingData method.

private void ShowSplash()
{
this.popup = newPopup();
this.popup.Child = newSplashScreenControl();
this.popup.IsOpen =true;
StartLoadingData();
}

4. Finally add ShowSplash in your constructor.

public MainPage()
{
   InitializeComponent();
  ShowSplash();
}

That's it!

Finally when you run the application, SplashScreen will appear 9 seconds then will be closed.

Have fun!