Export (0) Print
Expand All
Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.
3 out of 4 rated this helpful - Rate this topic

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

Applies to Windows and Windows Phone

Display a splash screen for more time by creating an extended splash screen. This 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.

To see an extended splash screen in a complete app, see the Splash screen sample.

Using C#/Visual Basic/C++ and XAML? See How to extend the splash screen (Windows Store apps using C#/VB/C++ and XAML).

To give users the impression that the default splash screen is shown for a longer time, your extended splash screen page must accurately imitate the default splash screen 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 as the default splash screen.
  • Your code should respond to the window resize events (like when your app is resized 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 default splash screen.

Prerequisites

  • To follow the steps in this topic, you'll need Microsoft Visual Studio 2013 and Windows 8.1. For downloads, see Get the tools.
  • This topic assumes you want to add an extended splash screen to an existing Windows Runtime app project. If you haven't already created an app, check out our step-by-step guidance: Create your first Windows Store app using JavaScript.
  • Understand the basic principles of app activation. See How to activate an app to 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 default splash screen and keep it simple. 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:

    
    <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):

    
    <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 as the default splash screen.

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

    
    .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 display the extended splash screen using the activated event handler (the activated function) in the default.js file.



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 in the default.js file):

  1. Get the coordinates where the default splash screen image is displayed. These coordinates are stored in a property of 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:

    
    
        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. Listen for the splash screen's dismissed event, then begin loading app resources. The operating system raises the dismissed event when it dismisses the system-provided splash screen and, in this case, transitions to display your app's extended splash screen. Start setup operations inside a dismissed event handler and navigate away from the extended splash screen when app setup is complete.

    The Splash screen sample registers its dismissed event handler (onSplashScreenDismissed) in the activated function in default.js:

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

    Define the dismissed event handler outside the activated event in default.js. Because the Splash screen sample doesn't need to wait for any resources to load, it removes the extended splash screen (ExtendedSplash.remove) when a user clicks the "Learn More" button.

    
        function onSplashScreenDismissed() {
            // Include code to be executed when the system has transitioned from the splash screen to the extended splash screen (application's first view).
            SdkSample.dismissed = true;
    
            // Tear down the app's extended splash screen after completing setup operations here...
            // In this sample, the extended splash screen is torn down when the "Learn More" button is clicked.
            document.getElementById("learnMore").addEventListener("click", ExtendedSplash.remove, false);
            }
        }
    
    

    The Splash screen sample defines ExtendedSplash.remove in its extendedSplash.js file.

    
        // Removes the extended splash screen if it is currently visible.
        function remove() {
            if(isVisible()) {
                var extendedSplashScreen = document.getElementById("extendedSplashScreen");
                WinJS.Utilities.addClass(extendedSplashScreen, "hidden");
            }
        }
    
    
  3. 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 (in default.js):

    
    
            // 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 the ExtendedSplash.show function in the extendedSplash.js file.

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

  4. Listen for window onresize events (Windows only) and respond to window size changes by repositioning the splash screen image in your extended splash screen. This ensures that your extended splash screen is formatted properly if your app is resized or if the screen orientation changes.

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

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

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

    
    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);
        }
    }
    
    

    The sample defines ExtendedSplash.updateImageLocation in its extendedSplash.js. If the extended splash screen is visible, it positions the extended splash screen's image in the same place as the splash screen displayed by the system.

    
    function updateImageLocation(splash) {
        if (isVisible()) {
            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";
            */
        }
    }
    
    

    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
How to extend the splash screen (Windows Store apps using C#/VB/C++ and XAML)
Reference
WinJS.Application.onactivated event
Windows.ApplicationModel.Activation namespace
Windows.ApplicationModel.Activation.splashScreen class
Windows.ApplicationModel.Activation.splashScreen.imageLocation property

 

 

Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback
Show:
© 2014 Microsoft. All rights reserved.