Sign in
Home Dashboard Docs Samples Downloads Support Community
Dev Center - Windows Store apps > Docs > Developing apps > Creating a UI > Adding a splash screen > How to extend the splash screen

How to extend the splash screen (Windows Store apps using JavaScript and HTML)

Language: JavaScript and HTML | VB/C#/C++ and XAML
2 out of 3 rated this helpful - Rate this topic
In this article

Important APIs

Display a splash screen for more time by creating and displaying an extended splash screen. This 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 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 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 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 the 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 page that effectively imitates the splash screen displayed by Windows.

Prerequisites

How to activate an app

Learn about listening for and responding to activated events.

Step 1: Create an extended splash screen page

Use HTML and CSS to define the look and feel of your extended splash screen. Make sure you design your app's extended splash screen page to imitate the splash screen that is displayed by Windows and keep it simple. 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 page for your app, use the guidelines in Guidelines and checklist for splash screens.

Use these instructions to help you create an extended splash screen for your app.

Hh700390.wedge(en-us,WIN.10).gifEssential markup and styles for an extended splash screen

  1. Associate the JavaScript code, which will display your extended splash screen, with your landing page.

    Add a <script> tag to the <head> tag to link your HTML to your extended splash screen JavaScript file.

    For example, the Splash screen sample associates its extendedSplash.js file with its landing page (default.html) like this:

    HTML
    Copy 
    
<script src="/js/extendedSplash.js"></script>

  2. Add an extended splash screen <div> to your landing page.

    The Splash screen sample uses this HTML to add an extended splash screen <div> to the <body> tag of its landing page (default.html):

    HTML
    Copy 
    
<div id="extendedSplashScreen" class="extendedSplashScreen hidden">
    <img id="extendedSplashImage" src="/images/splash-sdk.png" alt="Splash screen image" />
    <!-- Optionally, add a progress ring. Note: In this sample, the progress ring is not used. -->
    <!--
    <progress id="extendedSplashProgress" style="color: white;" class="win-medium win-ring"></progress>
    -->
    <div id="extendedSplashDescription">
        <span id="extendedSplashText">The splash screen was dismissed and the image above was positioned using the splash screen API.</span>
        <br /><br />
        <button class="action" id="learnMore">Learn More</button>
    </div>
</div>

    The id and class attributes are set so they can be used for styling and manipulation. The extended splash screen <div> also sets the "hidden" class, so that it will not be visible until it is shown by the extended splash screen JavaScript code.

    Tip  If you notice a flicker during the transition to your extended splash screen, add onload="" on your <img> tag like this: <img id="extendedSplashImage" src="/images/splash-sdk.png" alt="Splash screen image" onload="" />. This helps prevent flickering by making the system wait until your image has been rendered before it switches to your extended splash screen.

  3. Add CSS to style the extended splash screen markup on your landing page.

    Make sure you style the extended splash screen HTML to use the position:absolute style. Absolute positioning lets your app use the whole screen when it displays your extended splash screen. It also lets you position the splash screen image using the same screen coordinates that Windows used to position the image, when Windows displayed the splash screen for your app.

    The Splash screen sample adds this CSS (to Default.css) to style the extended splash screen tags on its landing page:

    CSS
    Copy 
    
.extendedSplashScreen {
    background-color:#00b2f0;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    text-align: center;
}

.extendedSplashScreen.hidden {
    display: none;
}

#extendedSplashImage {
    position: absolute;
}

#extendedSplashDescription
{
    position: absolute;
    width: 100%;
    top: calc(100% - 140px);
    text-align: center;
}

#extendedSplashText
{
    font-family: 'Segoe UI Semilight';
    font-size: 11pt;
    text-align: center;
    width: 75%;
    color: #ffffff;
}

    The classes and ids that define these styles also identify the extended splash screen tags in the HTML of the landing page.

Step 2: Add code to your activated event handler that displays your extended splash screen

The Splash screen sample demonstrates how to correctly show the extended splash screen in the sample's activated event handler, the activated function, in the default.js file.

JavaScript
Copy 


function activated(eventObject) {
    if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
        // Retrieve splash screen object
        splash = eventObject.detail.splashScreen;

        // Retrieve the window coordinates of the splash screen image.
        SdkSample.coordinates = splash.imageLocation;

        // Register an event handler to be executed when the splash screen has been dismissed.
        splash.addEventListener("dismissed", onSplashScreenDismissed, false);

        // Create and display the extended splash screen using the splash screen object.
        ExtendedSplash.show(splash);

        // 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.addEventListener("resize", onResize, false);

        // Use setPromise to indicate to the system that the splash screen must not be torn down
        // until after processAll and navigate complete asynchronously.
        eventObject.setPromise(WinJS.UI.processAll().then(function () {
            // Navigate to either the first scenario or to the last running scenario
            // before suspension or termination.
            var url = WinJS.Application.sessionState.lastUrl || scenarios[0].url;
            return WinJS.Navigation.navigate(url);
        }));
    }
}

You can learn more about responding to activated events in How to activate an app.

The Splash screen sample uses these steps to display its extended splash screen and position the splash screen image when the app is activated (inside its activated event handler):

  1. Get the coordinates where Windows displayed the splash screen image. These coordinates are stored in a property on the SplashScreen object, which is accessible from the event object that is passed to the activated event handler.

    The Splash screen sample gets the coordinates using the following code:

    JavaScript
    Copy 
    

    if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
        // Retrieve splash screen object
        splash = eventObject.detail.splashScreen;

        // Retrieve the window coordinates of the splash screen image.
        SdkSample.coordinates = splash.imageLocation;

  2. Position and display the extended splash screen.

    The Splash screen sample positions and displays the splash screen using the following code in its activated event handler:

    JavaScript
    Copy 
    

        // Create and display the extended splash screen using the splash screen object.
        ExtendedSplash.show(splash);

    The Splash screen sample also demonstrates how to use the splashScreen object to position the extended splash screen image in its ExtendedSplash.show function in the extendedSplash.js file.

    JavaScript
    Copy 
    

// Displays the extended splash screen. Pass the splash screen object retrieved during activation.
function show(splash) {
    var extendedSplashImage = document.getElementById("extendedSplashImage");

    // Position the extended splash screen image in the same location as the system splash screen image.
    extendedSplashImage.style.top = splash.imageLocation.y + "px";
    extendedSplashImage.style.left = splash.imageLocation.x + "px";
    extendedSplashImage.style.height = splash.imageLocation.height + "px";
    extendedSplashImage.style.width = splash.imageLocation.width + "px";

    // Position the extended splash screen's progress ring. Note: In this sample, the progress ring is not used.
    /*
    var extendedSplashProgress = document.getElementById("extendedSplashProgress");
    extendedSplashProgress.style.marginTop = splash.imageLocation.y + splash.imageLocation.height + 32 + "px";
    */

    // Once the extended splash screen is setup, apply the CSS style that will make the extended splash screen visible.
    var extendedSplashScreen = document.getElementById("extendedSplashScreen");
    WinJS.Utilities.removeClass(extendedSplashScreen, "hidden");
}

    Tip   The image you specify in your extended splash screen HTML should be the same image that you specified as your splash screen image in your app manifest.

  3. Listen for window onresize events so you can respond to windows size changes by repositioning the splash screen image in your extended splash screen. This helps to ensure that your extended splash screen is formatted properly even when the window size changes, like if your app is your app is snapped or unsnapped, or if the orientation changes.

    The Splash screen sample registers to be notified of onresize events using the following code in its activated event handler:

    JavaScript
    Copy 
    
            // 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.addEventListener("resize", onResize, false);

    The Splash screen sample uses the following code to define the onResize event handler outside its activated event handler:

    JavaScript
    Copy 
    
function onResize() {
    // Safely update the extended splash screen image coordinates. This function will be fired in response to snapping, unsnapping, rotation, etc...
    if (splash) {
        // Update the coordinates of the splash screen image.
        SdkSample.coordinates = splash.imageLocation;
        ExtendedSplash.updateImageLocation(splash);
    }
}

Tip  Rather than trying to reproduce much of the JavaScript code that you need to display an extended splash screen, you can copy the extendedSplash.js file from the Splash screen sample. Then, simply update the existing JavaScript code for your landing page by using the Splash screen sample's default.js file as a model.

Remarks

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

App activation and the activated event handler

An app is activated when an activated event is fired. Your activated event handler is the function 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.

Related topics

Guidelines and checklist for splash screens
How to activate an app
Splash screen sample
Reference
Windows.ApplicationModel.Activation namespace
Windows.ApplicationModel.Activation.splashScreen class
Windows.ApplicationModel.Activation.splashScreen.imageLocation property
Windows.UI.WebUI.webuiapplication.activated event

 

 

Build date: 11/19/2012

Did you find this helpful?
(1500 characters remaining)
© 2013 Microsoft. All rights reserved.