Creating a smooth extended splash screen experience

It’s common practice to implement an extended splash screen when your Windows Store app has a long or unpredictable start-up time, because it’s loading data off the web for instance. About 99% of the extended splash screens I’ve seen so far implement a page that looks like the default splash screen with the addition of a ProgressRing control to indicate it’s loading data.

In this post I’d like to explain how to implement an extended splash screen that’s a bit more visually appealing and will transition into the main app experience without the jarring page navigation. My solution will be based off the excellent content available in the “How to extend the splash screen” MSDN article and accompanying Splash screen sample. The solution presented here is written in C#/XAML, but the same techniques can be applied to a JavaScript/HTML based app.

UserControl approach

In the above video, you can see what we’re going to accomplish with our solution. The obvious thing that stands out is the animation when transitioning from the default splash screen to the extended splash screen, but there’s one more interesting thing going on. Notice how the extended splash screen slides off to the left, revealing the default Grid app template to its right. This is accomplished by deviating from the approach mentioned on MSDN and the Splash screen sample and implementing a UserControl as the extended splash screen, rather than a separate page. Personally, I prefer this approach, as it does not force me to fiddle with my app’s initialization by creating the app’s root frame in the extended splash screen page.

The only thing I have to add to my App.xaml.cs is a reference to the SplashScreen object and the LoadState (which will be instantiated in the OnLaunched event handler), so we can determine the default splash screen’s image location and determine whether or not we need to restore the saved state:

public static SplashScreen SplashScreen;
public static bool LoadState;

protected override async void OnLaunched(LaunchActivatedEventArgs args)
{
    if (args.PreviousExecutionState != ApplicationExecutionState.Running)
    {
        LoadState = (args.PreviousExecutionState == ApplicationExecutionState.Terminated);
        SplashScreen = args.SplashScreen;
    }
[...]
}

I’ve also chosen to implement an event which will be fired when the extended splash screen is ready to be dismissed. This even can then be used in the main page to animate in the actual page content (which in this case happens after a delay of 5 seconds):

public delegate void SplashEventHandler();
public event SplashEventHandler SplashDismissed;

async void RestoreStateAsync(bool loadState)
{
    if (loadState)
        await SuspensionManager.RestoreAsync();

    await SimulateLoadingData();

    if (SplashDismissed != null)
        SplashDismissed();
}

private async Task SimulateLoadingData()
{
    await Task.Delay(5000);
}

The actual implementation of the control is quite similar to the ExtendedSplashScreen page from the Splash screen sample, so feel free to go through it in the complete solution that you can download at the end of this post. The one extra thing I’m using is Rob Fonseca-Ensor’s TileCanvas class to create a tiled background on the extended splash screen UserControl, to give a more interesting background.

Using the ExtendedSplash control

Now that we have our UserControl, we can simply add it to our page in the XAML and implement its event handler. I’ve chosen to use a VisualState to dismiss the extended splash screen, as it allows for easier codebehind to implement.

public GroupedItemsPage()
{
    this.InitializeComponent();

    Loaded += (s, e) =>
    {
        Splash.SplashDismissed += Splash_SplashDismissed;
    };
}

void Splash_SplashDismissed()
{
    itemGridView.Visibility = Windows.UI.Xaml.Visibility.Visible;

    VisualStateManager.GoToState(this, "NoSplash", true);
}

That’s pretty much it, feel free to browse through the complete solution below and as always, let me know through the comments or Twitter if you have any questions/suggestions/feedback!

Downloads

Smooth extended splash screen sample - SplashScreenApp.zip (178 downloads)