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:

<Grid>
        <Grid.Background>
            <ImageBrush Stretch="Fill" ImageSource="Assets/SplashScreen.png" />
        </Grid.Background>
        <ProgressBar IsIndeterminate="True" Maximum="100" Value="30" Height="7" Width="400" Margin="0,416,0,217"
                     Foreground="#FFFDFF52" BorderBrush="Red">
            <ProgressBar.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Black" Offset="0" />
                    <GradientStop Color="#FF46C4FF" Offset="1" />
                </LinearGradientBrush>
            </ProgressBar.Background>
        </ProgressBar>
    </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:

private async void ExtendedSplashScreen()
{
    await Task.Delay(TimeSpan.FromSeconds(3)); // set your desired delay
    Frame.Navigate(typeof (MainPage)); // call MainPage
}

I created an async method named "ExtendedSplashScreen" which waits three seconds and then navigates to MainPage.

This method is called within initializer:

public Home()
{
     InitializeComponent();
     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:

protected override void OnNavigatedTo(NavigationEventArgs e)
{
   Frame.BackStack.RemoveAt(Frame.BackStack.Count - 1);
}

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.