Learn how to use Prism for the Windows Runtime to display an extended splash screen that imitates the splash screen displayed by Windows. An extended splash screen is a splash screen that stays on the screen for an extended period of time, and should be displayed when an app needs more time to prepare its initial UI.

Download

You will learn

How to create an extended splash screen that responds to resize events.

How to position and size the extended splash screen correctly.

How to use Prism for the Windows Runtime to display an extended splash screen while an app completes additional loading tasks.

Building and running the Quickstart

After you build the project, you must deploy it. On the menu bar, choose Build > Deploy Solution. Visual Studio also deploys the project when you run the app from the debugger.

After you deploy the project, pick the Quickstart tile to run the app. Alternatively, from Visual Studio, on the menu bar, choose Debug > Start Debugging.

When the app runs you will see the extended splash screen for the app, as shown in the following diagram.

This Quickstart demonstrates how to use Prism for the Windows Runtime to display an extended splash screen that imitates the splash screen displayed by Windows. If an app needs more time to prepare its UI or load network data, you can use an extended splash screen to display a message to the user as the app completes those tasks.

Key classes in the Quickstart

The MvvmAppBase class provides core startup behavior for a Prism app, with its constructor being the entry point for the app. The App class adds app-specific startup behavior to the app.

The ExtendedSplashScreen class defines the extended splash screen that imitates the splash screen that is displayed by Microsoft Windows.

[Top]

Creating the extended splash screen

An extended splash screen is simply a splash screen that stays on the screen for an extended period of time. It can be defined by creating a class that derives from the Page class, as shown in the following code example.

An extended splash screen must contain an Image control as the child of a Canvas control. The Canvas displays the image that is used on the extended splash screen. The image itself must have a resolution of 620x300 pixels. The ProgressRing control is used to inform users that the app hasn’t crashed and will be ready soon. This helps to create a positive loading experience.

Note An extended splash screen should use the same background color and image as the Windows splash screen. This helps to ensure a smooth transition from the Windows splash screen to the extended splash screen.

[Top]

Responding to resize and image opened events for the extended splash screen

The extended splash screen should adjust the coordinates of its image whenever the window size changes, for example if the user changes the orientation of the device. This helps to ensure a smooth loading experience, regardless of how users manipulate their devices or change the layout of apps on their screens.

To position the extended splash screen image at the same screen coordinates where Windows positions the splash screen image requires a SplashScreen instance to be passed to the ExtendedSplashScreen class. The SplashScreen instance is passed into the class through its constructor.

The constructor registers event handlers for two events. The event handler for the SizeChanged event of the window ensures that the extended splash screen is positioned and sized correctly. The event handler for the ImageOpened event of the Image control is used to prevent flickering when transitioning from the splash screen displayed by Windows to the extended splash screen. It does this by not activating the window until the extended splash screen is ready to be shown. Each event handler calls the Resize method of the ExtendedSplashScreen class, which is shown in the following code example.

Prism for the Windows Runtime defines an ExtendedSplashScreenFactory property in the MvvmAppBase class. The MvvmAppBase class will check this property during app startup, and if it’s defined it will show the extended splash screen. Therefore the property should be set to a delegate that returns the app’s extended splash screen. In this Quickstart this occurs in the constructor of the App class.

When an app is launched the system passes splash screen information to the app’s launch activation event handler. This information should be used to correctly position the image on the extended splash screen page, over the splash screen image displayed by Windows. In an app that uses Prism for the Windows Runtime, the app’s launch activation event handler is the OnLaunched method in the MvvmAppBase class. This method in turn calls the InitializeFrameAsync method in the same class, passing in the launch activation event arguments.

Inside the InitializeFrameAsync method, if the ExtendedSplashScreenFactory property is defined the factory will create the extended splash screen page and place it in the Frame for display, before continuing with further initialization. This approach allows the extended splash screen to be displayed without performing a navigation operation, ensuring that it will not form part of the app's navigation history.

Once frame initialization is complete, the OnLaunched method will call the OnLaunchApplication method in the App class.

The OnLaunchApplication method in the App class adds app-specific startup behavior to the app. The LoadAppResource method is called provided that the app is being activated. This method simulates the asynchronous loading of resources by creating a Task that will complete after a 7 second delay. Once the Task has completed the GroupedItemsPage is navigated to.