Windows Phone - Extended Splash Screen With Progress Bar

Introduction

Welcome again! In my previous article I’ve talked about Windows Phone “Package.appxmanifest”. I’ve shown there, how to add custom application logos with various resolutions. It makes your app much prettier and attractive.

Adding a Splash Screen

One more important thing to add in your application is a “Splash Screen”. This provides a nice representation of your app and yourself or your company. So, how can you do that? It’s really simple to add a “Splash Screen” in Windows Phone 8.1 with Visual Studio 2013 update 3. Just go to “Package.appxmanifest” and open the “Visual Assets” tab. Then you can find “Splash Screen” at the bottom.


                                                                              Figure 1

All you need to do is just upload your “Splash Screen” in your project and locate this file. This will bring the “Splash Screen” when someone opens the application, but it’ll vanish in the blink of an eye. To make it effective, we need to add a “Splash Screen” in a different way. We call it “Extended Splash Screen”.

Extended Splash Screen

So let’s get cracking in Windows Phone “Extended Splash Screen with Progress Bar”. First of all, take a “Blank App” template, give it the name “ExtendedSplash.xaml” and customize your main grid like this.

<Grid>
    <Image x:Name="extendedSplashImage" Source="Images/SplashScreen.png" Stretch="Fill"/>
    <Canvas>
        <ProgressBar IsIndeterminate="True" Maximum="100" Value="30" Height="10" Width="400"/>
    </Canvas>
</Grid>

Listing 1

Here, we’ve also taken a “ProgressBar” control to indicate that the application is running while displaying the “Splash Screen”. It makes the application really cool. Now in “ExtendedSplash.xaml.cs” put this method below and call it from the constructor, like this:

public ExtendedSplash()
{
    this.InitializeComponent();

    //Call MainPage from ExtendedSplashScreen after some delay
    ExtendeSplashScreen();
}

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

Listing 2

Async Operation

Here we have used an async method named “ExtendeSplashScreen” and made it delayed for three seconds. Then it’ll bring the “MainPage.xaml”.

The async and await keywords in C# are intended to help with offloading long IO operations off the UI thread. The await keyword ensures that nothing happens before the asynchronous method is finished. Both keywords, async and await, always work together. Await without async is not allowed. When using async and await the compiler generates a state machine in the background. If the “ExtendedSplashScreen()” hasn’t finished and still running, “ExtendedSplashScreen()” will return to its calling method, thus the main thread isn't blocked. When the delay is done then a thread from the ThreadPool (can be any thread) will return to MainPage() (the constructor) at its previous state and continue execution.

Changing Starting Page to the Splash Screen Page

One more thing to do is to make the startup page to “ExtendedSplash.xaml” otherwise the splash screen will not work. To do so, go to “App.xaml.cs” and find the “OnLaunched” method and at the bottom you’ll find “rootFrame.Navigate(typeof(MainPage), e.Arguments)”. Change “MainPage” to “ExtendedSplash” that we’ve named our “Splash Screen”.

if (!rootFrame.Navigate(typeof(ExtendedSplash), e.Arguments))
{
   throw new Exception("Failed to create initial page");
}

Listing 3

Handling Back Button Press

Now, we’ve set all things to make our “Splash Screen” work. But it’s really important to understand the Windows Phone page navigation service. We’ve set the starting page to our “Splash Screen” and after three seconds it’ll show the “Main Page”. But when we want to go back, it’ll show the “Splash Screen” again and after three seconds it’ll show the “Main Page” again. So it’s just irritating. To avoid this problem we need to add a method called “HardwareButtons_BackPressed” in “MainPage.xaml.cs” as in the following:

void HardwareButtons_BackPressed(object sender, Windows.Phone.UI.Input.BackPressedEventArgs e)
{
    Frame frame = Window.Current.Content as Frame;
    if (frame == null)
    {
        return;
    }

    if (frame.CanGoBack)
    {
        frame.GoBack();
        //Indicate the back button press is handled so the app does not exit
        e.Handled = true;
    }
}

Listing 4

Here, we make the Frame object name “frame” and if it’s not null and if we are in a go back state then we make “e.Handled” equal to true, so that the app doesn’t exit. If you make it false, the app will exit when you press the back button. Another problem is, if you have multiple of pages then it will show the “Splash Screen” instead of showing the previous page because of calling the method “GoBack”. We need this for another purpose that I'll explaiin later.

Now, we’re handling the “Can go back” task, but our problem still exists. To solve this problem we need to check the “Back State” situation. If the “Back State” equals one, then we have only one page remaining and it’s obviously our “Splash Screen”. So, we just need to remove the “Back State” so that our app can exit. To do so, just put this code inside the “OnNavigatedTo” method.

// Check if ExtendedSplashscreen.xaml is on the backstack and remove
if (Frame.BackStack.Count() == 1)
{
   Frame.BackStack.RemoveAt(Frame.BackStackDepth - 1);
}

Listing 5

Now, back to the unfinished topic of why we need to use the “frame.Goback” method. That is because if we don’t use it we’ll get an exception when we navigate through multiple pages and press the Back key. To avoid that, we need this method.

Running the Application

Now, run the application and it’ll work just fine.


                        Figure 2

If you look closely, you can see the “Progress Bar” on top of the “Splash Screen” and it’ll be displayed for three seconds, then the “MainPage” will be shown.

Summary

To make a commercial app, you must add a Splash Screen that represents the app and gives a different look and feel. So, that’s it. I hope you understand all these things. I’ll be here with a new topic soon. Until then good bye. Have a nice day.

Happy coding!

Read the original article at: http://bit.ly/1DssXax.