WP7: Dissecting we.Muslim app | Part 4 – PROPER Splash Screen

Prev Posts in the Series:

  1. Part 1 – Wireframe
  2. Part 2 – Composites
  3. Part 3 – Icon Sizes

Notice that I put PROPER in All Caps. This is because there are 3 ways of showing Splash Screen and only 1 of them is correct (at least for my app).

Let’s start with the wrong ones and finish up with the right one:

 

1. Splash Screen using SplashScreenImage.jpg

This is made famous by Tim Heuer video.

Basically you use a 480x800 pixels .JPG (yes, it has to be JPG!) and name it “SplashScreenImage.jpg

Then add it to your project root folder and make sure the Build Action is set to Content:

SS061

That’s it, now press F5 and watch that lovely JPG appear while your app is doing some initialization.

So what’s wrong with this approach?

  • It’s a static image, no room for animation. How are we supposed to show that cool “Loading…” progress bar?
  • You may see it on your Emulator when you press F5 for the first time, subsequent calls usually go faster and you’ll just see it fly to the main screen.
  • I deployed this approach to my Samsung Omnia 7 device. First time I run my app, I can see the SplashScreenImage.jpg, after that it just flies so fast to the main screen.
  • What if you want to change the Splash Screen Image dynamically? Well you can’t because SplashScreenImage.jpg cannot be modified at runtime.

Since I have 5 Splash Screens for each prayer time (Fajr, Dhuhur, Asr, Magrib, Isha), this approach doesn’t work well for we.Muslim app. Next…

 

2. Splash Screen using SplashPage.xaml (inherit PhoneApplicationPage)

Basically you right-click project and choose “Add New Item | Windows Phone Portrait Page”, then you modify your Startup Page by editing “WMAppManifest.xml” under Properties folder:

<DefaultTask Name="_default" NavigationPage="SplashPage.xaml" />

Now your SplashPage.xaml will be the first page that shows up, and now you can do anything here (checking for internet, showing login form, showing Terms & Conditions accept form, etc.)

Once you are done with Splash Page and you want to navigate to your Home Screen (MainPage.xaml originally), then just run this code below:

NavigationService.Navigate(new Uri("/MainPage.xaml", UriKind.Relative));

So what’s wrong with this approach?

  • Since we are using NavigationService, the SplashScreen is now part of the screen stack. When user presses Back from your Home Screen (MainPage.xaml), he will go back to this Splash Screen page!
  • There is no Quit in Windows Phone 7 Silverlight app! So the way to handle Application Exit from your home screen is this: Home Screen –> Splash Screen –> force exit by throwing exception.

    Use this code in SplashPage.xaml:
    bool pageVisited = false;
    
    protected override void OnNavigatedTo(NavigationEventArgs e)
    
    {
    
      if (pageVisited)
    
    	App.Quit();
    
      base.OnNavigatedTo(e);
    
      pageVisited = true;
    
    }
    

    But I just said there is no Quit() method in Windows Phone 7. Yes, that is why you need to add this code additionally in your App.xaml.cs:
    private class QuitException : Exception { }
    
    public static void Quit()
    
    {
    
        throw new QuitException();
    
    }
    
    private void Application_UnhandledException(object sender, 
    
        ApplicationUnhandledExceptionEventArgs e)
    
    {
    
        if (e.ExceptionObject is QuitException)
    
            return;
    
        ...
    
    }
    

So this sounds like a code smell… pressing back takes you to the Splash Screen page, and then forcing an exception just to quit the app.

I’m not saying the above method can’t be used, but maybe we got the fundamental concept wrong…that is definition of a page.

 

3. Splash Screen using SplashPagePopup.xaml (inherit UserControl)

Well thank you to Peter Torr for introducing the concept of Places. You will have to read his blog to understand what it is, but I’ll insert the important part from his slide screenshot:

7356.places_5F00_1802C878

So, according to this Places concept, Transient UI like Splash Screen, Login Window, etc. are not Windows Phone Pages!

Now that makes sense, and since I’m in a good mood I will show you how I implemented this for we.Muslim:

a. Right click project and choose “Add New Item | Windows Phone User Control” , name it SplashPagePopup.xaml.

b. Open up SplashPagePopup.xaml and add widgets that you would like to show in your Splash Screen. In my simplest case I just want to display an image:

<Grid x:Name="LayoutRoot" Background="Black" Width="480" Height="800">
  <Image Width="480" Height="800" Name="imgSplashScreen" Stretch="None" />
</Grid>

c. Code this in your MainPage.xaml.cs

private Popup _popup;
private const string SPLASHNO = "SplashNo";
private BackgroundWorker _workerInitTests;
// Constructor
public MainPage()
{
  InitializeComponent();
  ShowSplashPopup();
}
private void ShowSplashPopup()
{
  int splashNo = 0;
  var no = IsolatedStorage.GetSettings(SPLASHNO);
  if (no != null) splashNo = (int)no;
  // Store next setting
  int nextSplashNo = ++splashNo;
  if (nextSplashNo > 5) nextSplashNo = 1;
  IsolatedStorage.StoreSettings(SPLASHNO, nextSplashNo);
  _popup = new Popup {Child = new SplashPagePopup(splashNo), IsOpen = true};
  StartInitTestsWorker();
}
private void StartInitTestsWorker()
{
  _workerInitTests = new BackgroundWorker();
  _workerInitTests.DoWork += _workerInitTests_DoWork;
  _workerInitTests.RunWorkerCompleted += _workerInitTests_RunWorkerCompleted;
  _workerInitTests.RunWorkerAsync();
}
void _workerInitTests_RunWorkerCompleted(object sender, RunWorkerCompletedEventArgs e)
{
  Dispatcher.BeginInvoke(() => _popup.IsOpen = false);
}
void _workerInitTests_DoWork(object sender, DoWorkEventArgs e)
{
  Thread.Sleep(TimeSpan.FromSeconds(10));
}

d. And make sure that MainPage.xaml is now your startup page in WMAppManifest.xml:

<DefaultTask Name="_default" NavigationPage="MainPage.xaml" />

So this is what happens with the code above:

  • A popup window shows on top of the Home Screen (popup.IsOpen = true).
  • We launched a background thread that does some work.
  • Once backgorund thread, our popup that’s covering the home screen is closed (popup.IsOpen = false).
  • You will then see your home screen.

What is so right about this approach?

  • When the popup/Splash Screen shows and we press Back button –> Application Exits (the behaviour we want because)
  • When the Home Screen shows up and we press Back button –> Application Exits without requiring us to throw QuitException.

 

So there, the 3 stories of Splash Screen in Windows Phone 7. I hope it was worth reading for you :)

Share this post: | | | |
Published Friday, February 18, 2011 11:49 PM by zeddy
Filed under:

Comments

# WP7: Dissecting we.Muslim app | Part 5 – Get Current Latitude Longitude

Sunday, February 20, 2011 3:42 AM by Z & his Startup

In this part we will use Location Services to get current coordinates. I’ve created a class that you

# WP7: Dissecting we.Muslim app | Part 6 – Get Area Name from Latitude Longitude

Monday, February 21, 2011 3:30 AM by Z & his Startup

Given a latitude longitude coordinate, let’s now resolve this to a meaningful Area, Country string. Previous

Powered by Community Server (Commercial Edition), by Telligent Systems