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 BackgroundWorkerprivate 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!