Click here to Skip to main content
Click here to Skip to main content

Animated Splash Screen in Windows Store

, , 10 Mar 2014
Rate this:
Please Sign up or sign in to vote.
Windows Store Apps have a boring image as splash screen by default. This article show you how to override the default splash sreen with an animated one.

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 application load itself.

Purpose of Splash Screen

Generally, splash screens are used by developers to make the users wait and see an animation which indicate that 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 do the background stuff.

Splash Screens in Windows Store Apps

Problem?

In Windows Store apps, Microsoft just gave developers 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 splash screen, which is a page with an image in center of 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 load 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. 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 give a good user experience. You can animate the splash screen, if you have an application which do some background stuff and then load the first page. I hope this article will help you!

Source Code

Click here to download attached source code! from author's website http://zianasir.com.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Authors

Malak Zia Nasir
Student University of Swat
Pakistan Pakistan
I am currently studying Software Engineering at University of Swat. I love to dive deep into Cloud, Application Security, Cryptology and UX.
Follow on   Twitter   Google+   LinkedIn

Hana Ali Pacha
Student
Canada Canada
No Biography provided
Follow on   Twitter

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web03 | 2.8.140721.1 | Last Updated 11 Mar 2014
Article Copyright 2014 by Malak Zia Nasir, Hana Ali Pacha
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid