Loading Screen Images and Colors in Windows 8

The loading screen for any WinRT application is defined by the image file in your application ‘SplashScreen.png’. If you change this image your application ‘loading…’ screen will reflect whatever is in this image. There are a few extra things you can do with this image though.

If you want to change the name of it you can easily do this by clicking on your Package.appxmanifest and selecting a different image from the section ‘Splash Screen’.

If you are quite happy with the splashscreen.png image that is provided though, and you want to support all three image sizes of monitors supported by WinRT you can also provide ‘alternate’ larger versions of your splashscreen image. Simply save alongside the original splashscreen.png the following three files as per the Microsoft requirements:

  • SplashScreen.scale-100.png (this should be an image that is 620×300 pixels)
  • SplashScreen.scale-140.png (this should be an image that is 868×420 pixels)
  • SplashScreen.scale-180.png (this should be an image that is 1116×540 pixels)

Now what will happen is if your application is loaded on larger screens it will use the larger images. Note the default splashscreen.png should be the same size as the SplashScreen.scale-100.png as this refers to the image that is 100% screen size.

I would recommend using transparency in your png files also as it will use the background color of your loading screen around it. You can also change the background color if you like (also in the Package.appxmanifest file under ‘Background color’) to a named color. You have to choose from this list on this page (at the bottom of the page there is the list of color names), however there is a great reference of all the colors by name on this page here if you want to see what each of those colors looks like visually, as well as the associated hex code. So, for example, if you wanted a yellow background simply set your background color as ‘yellow’ (don’t use the hex value, make sure you use the color name).

With these couple of extensions to your loading screen you can make it much more tailored to your application and make your design start from the second a user starts your WinRT application!

Update: Just found this great post by Jeff Blankenburg on splash screens which goes into a lot more detail and covers some great concepts, including placing an advertisement on your splash screen: