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
Splash Screens in Windows Store Apps
In Windows Store apps, Microsoft just gave developers option
to show an image of splash screen without any animations or options.
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.
<Image Source="/Assets/splashscreen.png" Stretch="None"/>
<ProgressRing Width="120" Height="120" IsActive="True" Foreground="#FF0099CC" Margin="623,442,623,206" />
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
Make SplashPage as First Page to Show
, in the
OnLaunched()method, find the line
and replace with
It will look something like this
Again Some Edits in SplashPage
As an example, I did code the
to load and show the animtation for five seconds and then load
MainPage. To do so, create an
Loaded event event-handler for
Then I made an
async method in
SplashPage.xaml.cs file as given below
private async void LoadSomething()
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)
The purpose of this code in
is to make the
SplashPage shown for 5000 milliseconds and then load the
Run the Application, You are Done!
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
Click here to download attached source code! from author's website http://zianasir.com.