Customized Splash Screen in Windows Store App

Today we are going to learn about splash screens in Windows 8 Apps. It is the first screen that will appear when your application is run. It makes your application more interactive and inviting. It provides a good launch experience for your users.

A splash screen is a combination of screen images and a background color. We can also customize the default splash screen of the Metro app.

When you create a Windows 8 Apps the default splash screen will looks like this:



In this article we learn how to add a splash screen for a Windows 8 Apps.

To customize the splash screen we need to set the splash screen image and also set the background color of the splash screen. You can change your splash screen image and background color in the "package.appxmanifest" manifest file.

Steps to be followed to add a splash screen.

Step 1: Open the application on which you want to add a splash screen.

Step 2: Go to the Solution Explorer and ensure the "show all files" option is enabled.



Step 3: Then, go down to the following path:

bin->debug->AppxManifest.xml



Step 4: When you open it, you will see the Splash Screen element tag as a child of the Visual Elements element.

<Applications>

    <Application Id="App" Executable="consumewebapi.exe" EntryPoint="consumewebapi.App">

      <VisualElements DisplayName="consumewebapi" Logo="Assets\Logo.png" SmallLogo="Assets\SmallLogo.png" Description="consumewebapi" ForegroundText="light" BackgroundColor="#464646">

        <DefaultTile ShowName="allLogos" />

        <SplashScreen Image="Assets\SplashScreen.png" />

      </VisualElements>

    </Application>

 </Applications>

Step 5: In this tag you can set your splash screen image by giving the correct path of the image that was added to your Visual Studio project, as in:

<VisualElements DisplayName="consumewebapi" Logo="Assets\Logo.png" SmallLogo="Assets\SmallLogo.png" Description="consumewebapi" ForegroundText="light" BackgroundColor="#464646">

       <DefaultTile ShowName="allLogos" />

       <SplashScreen Image="Assets\Clipboard01.png" />

</VisualElements>

Note: Select a transparent png image to give the splash screen the best visual results. The splash screen image you choose must be 620 x 300 pixels using a 1x scaling factor.

Step 6: Now, you have to set the Background Color field of the Splash Screen section that will display as the background color in the splash screen.

<SplashScreen Image="Assets\Clipboard01.png" BackgroundColor="Green" />

Step 7: Now, build and run the application to see the output. Windows displays this splash screen immediately when the application is launched.