Display a splash screen for more time

In this article

Display a splash screen for more time by creating an extended splash screen for your app. This extended screen imitates the splash screen shown when your app is launched, but can be customized. Whether you want to show real-time loading information or simply give your app extra time to prepare its initial UI, an extended splash screen lets you define the launch experience.

Note The phrase "extended splash screen" in this topic refers to a splash screen that stays on the screen for an extended period of time. It does not mean a subclass that derives from the SplashScreen class.

Make sure your extended splash screen accurately imitates the default splash screen by following these recommendations:

Your extended splash screen should use a background color that is consistent with the background color specified for your splash screen in your app manifest (your app's splash screen background).

Your code should use the SplashScreen class to position your app's splash screen image at the same screen coordinates as the default splash screen.

Your code should respond to window resize events (such as when the screen is rotated or your app is moved next to another app onscreen) by using the SplashScreen class to reposition items on your extended splash screen.

Use the following steps to create an extended splash screen that effectively imitates the default splash screen.

Add a Blank Page item to your existing app

This topic assumes you want to add an extended splash screen to an existing Universal Windows Platform (UWP) app project using C#, Visual Basic, or C++.

Open your app in Visual Studio 2015.

Press or open Project from the menu bar and click Add New Item. An Add New Item dialog box will appear.

From this dialog box, add a new Blank Page to your app. This topic names the extended splash screen page "ExtendedSplash".

Adding a Blank Page item generates two files, one for markup (ExtendedSplash.xaml) and another for code (ExtendedSplash.xaml.cs).

Essential XAML for an extended splash screen

Follow these steps to add an image and progress control to your extended splash screen.

In your ExtendedSplash.xaml file:

Change the Background property of the default Grid element to match the background color you set for your app's splash screen in your app manifest (in the Visual Assets section of your Package.appxmanifest file). The default splash screen color is a light gray (hex value #464646). Note that this Grid element is provided by default when you create a new Blank Page. You don't have to use a Grid; it's just a convenient base for building an extended splash screen.

Add a Canvas element to the Grid. You'll use this Canvas to position your extended splash screen image.

Add an Image element to the Canvas. Use the same 600 x 320 pixel image for your extended splash screen that you chose for the default splash screen.

(Optional) Add a progress control to show users that your app is loading. This topic adds a ProgressRing, instead of a determinate or indeterminate ProgressBar.

Add the following code to define Canvas and Image elements, as well as a ProgressRing control, in ExtendedSplash.xaml:

Note This code sets the width of the ProgressRing to 20 pixels. You can manually set its width to a value that works for your app, however, the control will not render at widths of less than 20 pixels.

Essential code for an extended splash screen class

Your extended splash screen needs to respond whenever the window size (Windows only) or orientation changes. The position of the image you use must be updated so that your extended splash screen looks good no matter how the window changes.

Use these steps to define methods to correctly display your extended splash screen.

These class variables are used by several methods. The splashImageRect variable stores the coordinates where the system displayed the splash screen image for the app. The splash variable stores a SplashScreen object, and the dismissed variable tracks whether or not the splash screen that is displayed by the system has been dismissed.

Define a constructor for your class that correctly positions the image

The following code defines a constructor for the extended splash screen class that listens for window resizing events, positions the image and (optional) progress control on the extended splash screen, creates a frame for navigation, and calls an asynchronous method to restore a saved session state.

(Optional) Define a class method to position a progress control in your extended splash screen

If you chose to add a ProgressRing to your extended splash screen, position it relative to the splash screen image. Add the following code to ExtendedSplash.xaml.cs to center the ProgressRing 32 pixels below the image.

In ExtendedSplash.xaml.cs, respond when the SplashScreen.Dismissed event occurs by setting the dismissed class variable to true. If your app has setup operations, add them to this event handler.

// Include code to be executed when the system has transitioned from the splash screen to the extended splash screen (application's first view).
void DismissedEventHandler(SplashScreen sender, object e)
{
dismissed = true;
// Complete app setup operations here...
}

After app setup is complete, navigate away from your extended splash screen. The following code defines a method called DismissExtendedSplash that navigates to the MainPage defined in your app's MainPage.xaml file.

Prepare your extended splash screen to reposition its elements if a user resizes the window. This code responds when a Window.SizeChanged event occurs by capturing the new coordinates and repositioning the image. If you added a progress control to your extended splash screen, reposition it inside this event handler as well.

Note Before you try to get the image location make sure the class variable (splash) contains a valid SplashScreen object, as shown in the example.

(Optional) Add a class method to restore a saved session state

The code you added to the OnLaunched method in Step 4: Modify the launch activation handler causes your app to display an extended splash screen when it launches. To consolidate all methods related to app launch in your extended splash screen class, you could consider adding an asynchronous method to your ExtendedSplash.xaml.cs file to restore the app's state.

When you modify the launch activation handler in App.xaml.cs, you'll also set loadstate to true if the previous ApplicationExecutionState of your app was Terminated. If so, the RestoreStateAsync method restores the app to its previous state. For an overview of app launch, suspension, and termination, see App lifecycle.

Modify the launch activation handler

When your app is launched, the system passes splash screen information to the app's launch activation event handler. You can use this information to correctly position the image on your extended splash screen page. You can get this splash screen information from the activation event arguments that are passed to your app's OnLaunched handler (see the args variable in the following code).

If you have not already overridden the OnLaunched handler for your app, see App lifecycle to learn how to handle activation events.

In App.xaml.cs, add the following code to create and display an extended splash screen.

Complete code

Note The following code slightly differs from the snippets shown in the previous steps.

ExtendedSplash.xaml includes a DismissSplash button. When this button is clicked, an event handler, DismissSplashButton_Click, calls the DismissExtendedSplash method. In your app, call DismissExtendedSplash when your app is done loading resources or initializing its UI.

This app also uses a UWP app project template, which uses Frame navigation. As a result, in App.xaml.cs, the launch activation handler (OnLaunched) defines a rootFrame and uses it to set the content of the app window.

ExtendedSplash.xaml: This example includes a DismissSplash button because it doesn't have app resources to load. In your app, dismiss the extended splash screen automatically when your app is done loading resources or preparing its initial UI.

ExtendedSplash.xaml.cs: Note that the DismissExtendedSplash method is called from the click event handler for the DismissSplash button. In your app, you won't need a DismissSplash button. Instead, call DismissExtendedSplash when your app is done loading resources and you want to navigate to its main page.

App.xaml.cs: This project was created using the UWP app Blank App (XAML) project template in Visual Studio 2015. Both the OnNavigationFailed and OnSuspending event handlers are automatically generated and don't need to be changed to implement an extended splash screen. This topic only modifies OnLaunched.