Splash Screen In UWP

Splash Screens are important for all mobile apps. As I wrote earlier in "Creating Splash Screens in WP 8 Apps", the article suggested using Popups for Splash Screen in Windows Phone 8 Apps.

But, today I'm planning to give the UWP-way of building splash screens.

It's a bit different than Silverlight because we'll be using two application pages now
 
Let's build! 

We have 2 pages:

Home.xaml and MainPage.xaml

Home.xaml is our Splash Screen whereas MainPage.xaml is our starting point after Splash Screen is loaded. 
 
Home.xaml has below codes:
  1. <Grid>  
  2.         <Grid.Background>  
  3.             <ImageBrush Stretch="Fill" ImageSource="Assets/SplashScreen.png" />  
  4.         </Grid.Background>  
  5.         <ProgressBar IsIndeterminate="True" Maximum="100" Value="30" Height="7" Width="400" Margin="0,416,0,217"  
  6.                      Foreground="#FFFDFF52" BorderBrush="Red">  
  7.             <ProgressBar.Background>  
  8.                 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">  
  9.                     <GradientStop Color="Black" Offset="0" />  
  10.                     <GradientStop Color="#FF46C4FF" Offset="1" />  
  11.                 </LinearGradientBrush>  
  12.             </ProgressBar.Background>  
  13.         </ProgressBar>  
  14.     </Grid>  
This page has a ProgressBar control.When ProgressBar ends its loading, the other page will open. But before that let me show you what I wrote as background for this page:
  1. private async void ExtendedSplashScreen()  
  2. {  
  3.     await Task.Delay(TimeSpan.FromSeconds(3)); // set your desired delay    
  4.     Frame.Navigate(typeof (MainPage)); // call MainPage    
  5. }  
I created an async method named "ExtendedSplashScreen" which waits three seconds and then navigates to MainPage.

This method is called within initializer:
  1. public Home()  
  2. {  
  3.      InitializeComponent();  
  4.      ExtendedSplashScreen();  
It normally works great using the codes above. But if a user Navigates Back through the buttons, the splash screen re-appears. So the workaround to solve this is to remove back entry in MainPage.xaml.cs:
  1. protected override void OnNavigatedTo(NavigationEventArgs e)  
  2. {  
  3.    Frame.BackStack.RemoveAt(Frame.BackStack.Count - 1);  
  4. }  
As soon as the app runs, it will remove the back entry. Nevertheless, the Splash Screen will be working great.

This is a trick I've been using in all my app projects. Hope that it will be useful for you as well.

If you have other alternatives building a Splash Screen, please share it with us.


Similar Articles