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));
- Frame.Navigate(typeof (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.