Walkthrough: Windows 8 Extended Splash Screen

So we have two real problems:

1. If your app does not present a UI to the user in a given time, Windows 8 will assume your app is frozen and will terminate it.
2. If your app does not present a UI to the user in a given time, the user will assume your app is frozen and will terminate it.

And, fortunately, we have solutions!

The Splash Screen

Every Windows 8 Store App has a splash screen. It is displayed immediately when your app is launched. It is dismissed when your app is ready for interaction. The splash screen has two parts: 1) a static PNG (620x300px in 100% scaling, 868x420px in 140% scaling, and 1116x540px in 180% scaling) centered over a 2) solid color background. You can customize them both.

The image above shows the app manifest where the splash screen is configured.

The splash screen background is not gradient, it is not animated, and nothing in the splash screen moves. The image can be anything you want, but it is centered, not stretched. As a result, the splash screen doesn’t fight your app for resources. As a result, the splash screen is static and boring.

The image above shows the standard, static splash screen (the Store logo is showing).

The Extended Splash Screen

An extended splash screen is, in all reality, just a page that looks like the standard splash screen. You display it immediately after the splash screen is dismissed; the user thinks it’s a continuation of the splash screen – not something special.

The extended splash performs two core tasks:

1. It completes long-running actions, like loading data from a service or from a file, without resulting in your app being terminated by the framework, and
2. It provides some visual feedback (the type of feedback is up to the developer/designer) so the user knows the app is working hard and not in some frozen state.

Three things make the extended splash tricky:

1. The location of the splash screen image is not always perfectly centered. As a result, the extended splash screen must adjust the size and location of its image so the transition from the static splash screen to the extended splash screen is not visually jerky.
2. The time it takes for the extended splash screen to load the splash screen image varies depending on the hardware. As a result, we can’t display the extended splash screen until the image has opened so the transition to the extended splash screen is not a “blink”.
3. Applications can be both launched and activated. Activated means the app is already running, but invoked into the foreground. As a result, we don’t want to display the extended splash and run our long-running logic. We’ll need special logic to sniff the application state.

The MVVM Pattern

What is better than design patterns to maintain some sense of structure and order to a growing code base? Nothing. And MVVM (Model View View Model) is the perfect design pattern for XAML-based apps. There are core things that make up MVVM, right now we’ll focus on services:

1. Models – classes projecting a singe data record, like a user record or invoice
2. View Models – classes containing data & logic for a single view, like a hub or login page
3. Views – classes presenting a single UI scenario, like a hub or login page
4. Commands – a technique to communicate from a view to a view model
5. Services – a technique to communicate from a view model to something
1. Data Service – retrieves data from… somewhere
2. Dialog Service – presents dialogs and prompts to the user
3. Navigation Service – navigates to/from app pages

The Navigation service

An advanced part of MVVM is the Services pattern which basically abstracts framework functions (such as navigation) to a simple class that encapsulates the logic. Not only does this centralize the logic, which minimizes code and the opportunity for errors, but it can be further abstracted as an interface (for example, IService) for to enable injection and extend unit testing options.

Note: the more we talk about advanced MVVM the more it might make sense to use an MVVM framework instead of writing your own from scratch. This extended the reach of your code from you to other developers who know the same framework. This also adds some complexity as even simple frameworks must have a structured API. The most popular MVVM framework is MVVM Light. In this article, I write my own.

Let’s see it

In the video above, I create a lot more than just an extended splash screen. Most of this is necessary to show the full implementation. Partial implementations throughout the internet are so exhausting. In the real world, we can’t have partial implementations, can we?

One of the advantages of crafting everything from scratch (in the video) is so you can get your head wrapped around the core concepts. I could have used frameworks or pre-packaged code, but I didn’t want to do that. The whole idea was to teach. I know I moved fast, but the video is still pretty long.

Should you be building a Windows Store App, I hope this walkthrough helps. And I hope you can adopt the techniques without actually adopting my exact code. My code, though there is nothing wrong with it, might not be comprehensive enough to handle the complex scenarios in your app.

The source code from the video is available here.

Extended splash screen guidelines

On MSDN, there are some guidelines around extended splash screens. As with all guidelines, these are not rules in stone but rather rules of thumb. They are meant to help your application be better, to fit into the ecosystem more seamlessly, and to deliver improved user experiences. Should your use case or your app’s value proposition be in conflict with a guideline, as the developer/design you are the author of your application and the ultimate judge of what is best. However, if you do not have a clear reason to break a guideline, then you should strive to obey it.

1. Do not show advertisements on your extended splash screen
2. Do not show a different splash image on your extended splash screen
3. Do not show “about” information on your splash screen
4. Do use an image that clearly identifies your app
5. Do use a transparent PNG or match your background color
6. Do use images that support the three scale factors

More advanced

In my sample, I don’t activate the extended splash until it has loaded. But it is worth noting that the image may not have opened even though the page loaded event was raised. This is most likely to be true in slower systems. Anyway, should you want to account for this possibility, then you would attach to the ImageOpened event on the extended splash image. You can even do this activation inside the extended splash itself, and not the app.xaml.cs. The source code referenced in this article actually implements this variation.

Best of luck!