Download source code - 208.2 KB

Introduction

The default splash screen of Microsoft Windows Store application is just an image. It will be cool to get some animations on your splash screen, till the application loads itself.

Purpose of Splash Screen

Generally, splash screens are used by developers to make the users wait and see an animation which indicates that the system is working. Many applications have animated splash screen like Skype for Windows 8. On one hand, there is splash screen animation and to the other hand, the system does the background stuff.

Splash Screens in Windows Store Apps

Problem?

In Windows Store apps, Microsoft just gave developers the option to show an image of splash screen without any animations or options.

Solution?

There is no way to change or edit how the original splash screen is shown. Rather, you can show a page exactly like the splash screen, which is a page with an image in the center of the screen. To do that, I built a small application to show an animated splash screen on a page. I altered the code in App.xaml.cs to show the splash screen page, then it loads the main content page. Something like Skype's splash screen.

To do so, follow these steps.

Add a Blank Page, and Customize It

To show animations, you need a page exactly like splash screen. So add a new Blank Page.

After adding the page, add the splash screen image to the page.

    <Grid Background="White">
        <Image Source="/Assets/splashscreen.png" Stretch="None"/>
        <ProgressRing Width="120" Height="120" IsActive="True" 
         Foreground="#FF0099CC" Margin="623,442,623,206" />
    </Grid>

In my application manifest, I chose White color as background for splash screen. So I edited the SplashPage to have White background (<Grid Background="White">). To do so, go to Package.appxmanifest and set the splash screen background White in Splash Screen in Visual Assets tab.

The image should not stretch (make Stretch="None" for splash logo image). And I put a ProgressRing in the SplashPage. Now you are done making a clone of Splash Screen. The next step is to override the code in App.xaml.cs to show the SplashPage.

Make SplashPage as First Page to Show

In App.xaml.cs, in the OnLaunched()method, find the line:

rootFrame.Navigate(typeof(MainPage), e.Arguments);

and replace with:

rootFrame.Navigate(typeof(SplashPage), e.Arguments);

It will look something like this:

Again Some Edits in SplashPage

As an example, I did code the SplashPage to load and show the animtation for five seconds and then load MainPage. To do so, create an Loaded event event-handler for SplashPage.

Then I made an async method in SplashPage.xaml.cs file as given below:

        private async void LoadSomething()
        {
            await Task.Delay(5000);
            this.Frame.Navigate(typeof(MainPage));
        }

And invoked this method from Page_Loaded event-handler. So the event-handler code should look like:

        private void Page_Loaded(object sender, RoutedEventArgs e)
        {
            LoadSomething();
        }

The purpose of this code in SplashPage.xaml.cs is to make the SplashPage shown for 5000 milliseconds and then load the MainPage.

Run the application. You are done!

Conclusion

By customizing the application, it gives a good user experience. You can animate the splash screen if you have an application which does some background stuff and then loads the first page. I hope this tip will help you!

History

11^th March, 2014: Initial version

Animated Splash Screen in Windows Store