Change Splash Screen in Windows Store App

A splash screen is an image that appears when an application is loading. The splash screen settings for a Windows Store app are defined in the app package manifest file. Every Windows Store app must contain an app package manifest file that defines the application properties, attributes, assets and capabilities.

By default, a Windows Store app has a gray splash screen. To change that, go to Solution Explorer in Visual Studio and double-click on the Package.appxmanifest. It will load the manifest file in the designer with the six tabs Application, Visual Assets, Capabilities, Declarations, Content URIs, and Packaging.

The splash screen settings are on the Visual Assets tab. Select the Visual Assets tab and then select the Splash Screen item in the left side. See Figure 1.

Figure 1. Windows Store App Splash Screen Settings

As you can see from Figure 1, you will need three different size of images for the splash screen. You must also ensure the sizes of the image are exactly 1116x540, 868x420, and 620x300.

You can use the Browse button (…) to browse an image. Once browsed, the designer automatically changes the name of the image and loads them into the Assets folder of your application.

Now if you run your app, you will see the image apears when the app loads.

Figure 2. Custom Splash Screen

If you want to have a different file name, you can do so by going to the code view of the Package.appxmanifest file and change the Image of the SplashScreen element in the XML file.

Right-click on the Package.appxmanifest file and select View Code. The XML opens in the designer where you may edit the file. See Listing 1.

 

<Applications>
<Application Id="App" Executable="$targetnametoken$.exe" EntryPoint="App1.App">
<m2:VisualElements DisplayName="MCFirstApp" Square150x150Logo="Assets\Logo.png"
Square30x30Logo="Assets\SmallLogo.png"
Description="This is my first Windows Store app."
ForegroundText="light" BackgroundColor="#464646">
<m2:SplashScreen Image="Assets\SplashScreen.png" />
</m2:VisualElements>
</Application>

Listing 1. Code View of Splash Screen Setting

Summary

In this article, we saw how to change the splash screen of a Windows Store app.