Language: JavaScript and HTML | VB/C#/C++ and XAML

2 out of 8 rated this helpful - Rate this topic

How to extend the splash screen (Windows Store apps using C#/VB/C++ and XAML)

In this article

Prerequisites
Create an extended splash screen page
Modify the launch activation handler
Related topics

Important APIs

SplashScreen class

Display a splash screen for more time by creating and displaying an extended splash screen. This extended screen imitates the splash screen that is displayed by Windows. You may want to display an extended splash screen to show real-time loading information to users, or simply because your app needs more time to prepare its initial UI.

To give users the impression that the Windows splash screen is shown for a longer time, your extended splash screen page must accurately imitate the splash screen that is shown by Windows in at least these ways:

Your view 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 extended splash screen page should use a 620 x 300 pixel image that is consistent with the image specified for your splash screen in your app manifest (your app's splash screen image).
Your code should use the SplashScreen class to position your app's splash screen image at the same screen coordinates where Windows positions the image when Windows displays the splash screen.
Your code should respond to window resize events (like when your app is snapped or the screen is rotated) by using the SplashScreen class to update your extended splash screen page.

Use the following steps to help you create an extended splash screen that effectively imitates the splash screen that is displayed by Windows.

Prerequisites

How to activate an app: Learn about listening for and responding to Activated events.

Instructions

Step 1: Create an extended splash screen page

Use XAML to define a simple extended splash screen page for your app.

If your page is overly complex, it might seem busy and overwhelming, or incongruous and jarring, after the relatively simple splash screen that is displayed by Windows. For help designing a good splash screen and extended splash screen for your app, use the guidelines in Guidelines and checklist for splash screens.

For example, the Splash screen sample defines its extended splash screen page in its "ExtendedSplash.xaml" file.

Use these instructions to help you create a basic extended splash screen.

Hh868191.wedge(en-us,WIN.10).gif Essential XAML for an extended splash screen page

Use a Grid to define the appearance of your extended splash screen.

In ExtendedSplash.xaml, the Splash screen sample sets the size and background of the extended splash screen of the page like this:

XAML


<Grid Background="#00b2f0"
      x:Class="SplashScreenSample.ExtendedSplash"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d"
      d:DesignWidth="1366" d:DesignHeight="768">

As shown in the example, use XAML to set the Background, d:DesignWidth, and d:DesignHeight attribute values of the Grid. Use values that are appropriate for your app.

Add a 620 x 300 pixel image to your extended splash screen.

Add elements to the Grid to define the layout of your extended splash screen. For some guidance about what an extended splash screen should look like, see Guidelines and checklist for splash screens.

You must add a Canvas element and add an Image element as a child of the Canvas. This Canvas element displays the image that you're using in your extended splash screen page.
Tip To ensure that your image is consistent with the splash screen image that is displayed by Windows use the same image for your extended splash screen.

In "ExtendedSplash.xaml", the Splash screen sample demonstrates how to add an image to the default Grid of the page:
XAML
Copy
<Canvas Grid.Row="0"> <Image x:Name="extendedSplashImage" Source="Assets/splash-sdk.png" /> </Canvas>
The Splash screen sample sample also adds a StackPanel element below the image so that when you run the sample, you can dismiss the extended splash screen and interact with the sample. You should avoid adding additional elements so that your extended splash screen stays uncluttered.

Your extended splash screen needs to refresh whenever the window size changes, like if the user changes the orientation of the device or snaps your app. Most importantly, the position of the image you use must be updated so that your extended splash screen looks good no matter how the window size changes.

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

Hh868191.wedge(en-us,WIN.10).gif Essential code for an extended splash screen

Create a partial class and declare class variables

In ExtendedSplash.xaml.cs, the Splash screen sample demonstrates how to create a (partial) class to represent an extended splash screen.
C#
Copy
partial class ExtendedSplash { internal Rect splashImageRect; // Rect to store splash screen image coordinates. private SplashScreen splash; // Variable to hold the splash screen object. internal bool dismissed = false; // Variable to track splash screen dismissal status. internal Frame rootFrame; // Define methods and constructor }
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 class method to position the image in your extended splash screen

The Splash screen sample demonstrates how to position the image on the extended splash screen page by using the splashImageRect class variable.


    void PositionImage()
    {
        extendedSplashImage.SetValue(Canvas.LeftProperty, splashImageRect.X);
        extendedSplashImage.SetValue(Canvas.TopProperty, splashImageRect.Y);
        extendedSplashImage.Height = splashImageRect.Height;
        extendedSplashImage.Width = splashImageRect.Width;
    }

Inside the class, define a handler for the Dismissed event

In ExtendedSplash.xaml.cs, the Splash screen sample demonstrates how to respond to when the SplashScreen.Dismissed event fires by setting the dismissed class variable.


    // 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;

        // Navigate away from the app's extended splash screen after completing setup operations here...
    }

Inside the class, define a handler for Window.SizeChanged events

The Splash screen sample demonstrates how to respond when a Window.SizeChanged event fires by capturing the new coordinates and repositioning the image.


    void ExtendedSplash_OnResize(Object sender, WindowSizeChangedEventArgs e)
    {
        // Safely update the extended splash screen image coordinates. This function will be executed in response to snapping, unsnapping, rotation, etc...
        if (splash != null)
        {
            // Update the coordinates of the splash screen image.
            splashImageRect = splash.ImageLocation;
            PositionImage();
        }
    }

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

Inside the class, override the OnNavigatedTo method for the extended splash screen page

The Splash screen sample demonstrates how to override the Page.OnNavigatedTo method by capturing the SplashScreen object, setting a handler for the SplashScreen.Dismissed event, and repositioning the image.


    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        // Retrieve splash screen object
        splash = (SplashScreen)(e.Parameter);
        if (splash != null)
        {
            // Register an event handler to be executed when the splash screen has been dismissed.
            splash.Dismissed += new TypedEventHandler<SplashScreen, object>(DismissedEventHandler);

            // Retrieve the window coordinates of the splash screen image.
            splashImageRect = splash.ImageLocation;
            PositionImage();
        }
    }

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

Define a constructor for your class that correctly positions the image

The Splash screen sample demonstrates how to define a constructor for the extended splash screen class so that the image is correctly positioned.


    public ExtendedSplash(SplashScreen splashscreen, bool loadState)
    {
        InitializeComponent();

        LearnMoreButton.Click += new RoutedEventHandler(LearnMoreButton_Click);

        // Listen for window resize events to reposition the extended splash screen image accordingly.
        // This is important to ensure that the extended splash screen is formatted properly in response to snapping, unsnapping, rotation, etc...
        Window.Current.SizeChanged += new WindowSizeChangedEventHandler(ExtendedSplash_OnResize);

        splash = splashscreen;
        if (splash != null)
        {
                // Register an event handler to be executed when the splash screen has been dismissed.
                splash.Dismissed += new TypedEventHandler<SplashScreen, Object>(DismissedEventHandler);

                // Retrieve the window coordinates of the splash screen image.
                splashImageRect = splash.ImageLocation;
                PositionImage();
        }

        // Create a Frame to act as the navigation context 
        rootFrame = new Frame();
            
        // Restore the saved session state if necessary
        RestoreStateAsync(loadState);
    }

Make sure you register your Window.SizeChanged handler (ExtendedSplash_OnResize in the example) in your class constructor so that your app positions the image correctly in your extended splash screen.

If you added non-essential elements to your extended splash screen XAML, you should also make sure your constructor includes code to support those elements, if necessary. For example, the Splash screen sample, renders a clickable button at the bottom of its extended splash screen and we added a handler (LearnMoreButton_Click) to respond to the event.

Step 2: 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 the 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.

If you have not already overridden the OnLaunched method for your app, see How to activate an app to learn how to handle activation events.

The Splash screen sample demonstrates how to create and display a extended splash screen in its OnLaunched method.


protected override void OnLaunched(LaunchActivatedEventArgs args)
{
    if (args.PreviousExecutionState != ApplicationExecutionState.Running)
    {
        bool loadState = (args.PreviousExecutionState == ApplicationExecutionState.Terminated);
        ExtendedSplash extendedSplash = new ExtendedSplash(args.SplashScreen, loadState);
        Window.Current.Content = extendedSplash;
    }

    Window.Current.Activate();
}

Note The args variable in the example contains event arguments (like the SplashScreen object) that the system passed to the sample's OnLaunched handler.

Your extended splash screen is displayed when you activate the current window, as shown in the example.

Remarks

To see the code examples in context, see the Splash screen sample.

Tip If you followed these instructions and you notice a flicker during the transition to your extended splash screen, see the Troubleshooting section in Guidelines and checklist for splash screens for help.

App activation and the launch activated event handler

An app is activated when an Activated event is fired. Your OnLaunched handler is the method you use to respond to these events. In your activated event handler, you should identify and respond appropriately to different kinds of activated events.

Learn more about responding to Activated events in How to activate an app, and learn more about different kinds of Activated events in the Windows.ApplicationModel.Activation reference.