In this article we are going to see what are Splash Screens in a Windows Store Application development. Splash Screens in Windows Store or a Windows Phone application development is a screen which will be displayed for fraction of seconds immediately as soon as Windows loads your application or we can say as soon as the user launches the application. This way at the background it provides space for Windows to load the necessary resources that can be initialized and once the app is ready for interaction we can see Windows dismisses the splash screen and shows the app directly. Splash screen is basically a combination of an image (which we can decide out, may be a logo of the app) and a background color.     [more]

Microsoft suggests from its design perspective to have the color combined so that it will have a better user experience. In our previous article we have see how to make use of the Package API class to get the information about the package and the application location programmatically. This article will provide the insight of using the Splash Screen effectively from the different design principles and also we are going to see how to achieve this from the code.

So how to effectively use Splash Screen?

Microsoft has some of the design principles which can be followed in order to have a better user experience for the application, some of the design principles include

• Splash Screen image should clearly showcase the end user what the app is all about.
• Splash Screen image should use a transparent PNG so that it suits well with the background image, if not the image and background will be disjointed which will end up with bad user experience.
• Splash Screen image should be kept ready with 3 different sizes basically for different devices, the sizes include (In Pixel) 620×300, 868×420, 1116×540.
• Splash Screen can be extended keeping in mind the extended version has the same background color and image as the Windows Splash Screen.
• If we wish to show the extended splash screen for few more minutes then we need to add a progress ring at the right place so that the users know that the app is still loading.

While we decided our splash screen with the exact background color and image to be shown as the logo, we also should decide how we are going to make the exact changes to the application. We have 2 options to change the splash screen,

First option is directly by going in to the Package.appxmanifest file and add the Image which is of 620×300 which will reflect in the application splash while loading as shown in the screen below.

Second option is to have more control over the process by adding the code, we can extend the splash screen using the SplashScreen API Class which has a list of properties and events that provides a dismissal event trigger and image location information for the application splash screen to locate and use it. To use the extended splash screen we need to override the OnLaunched method for the application with the below code.

Code:

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

ExtendedSplash is the class which has the detailed design on the changes that the splash screen should host out like it has the customized properties like Height, Width, Location etc. Once we are done with the change we can see the splash screen in action with an extended logo and options as shown in the screen below.

Conclusion:

So in this article we have seen the different design principles and the points on how to use the Splash Screen effectively in the Windows Store application development. Also we have seen how programmatically we can extend the splash screen to support few additional stuffs for the application development.