Extended Splash Screen in Windows Store App

In today's article on Windows 8 Apps we learn how to extended the splash screen that is visible when your Windows 8 Apps is first launched. When users launch an app, they are immediately greeted by the splash screen. Every Windows 8 Apps has a splash screen. You can take splash screen as a welcome window while your app activates.

In my previous article we learned how to added a splash screen and how to customize your splash screen.

http://www.c-sharpcorner.com/UploadFile/99bb20/customized-splash-screen-in-metro-style-application/

With the extended splash screen your app does not land on the page directly; instead it first displays an extended splash screen. We design our extended splash same as a splash screen but then include some extra features like progress ring control.

The extended splash screen is displayed immediately after the splash screen and then after loading is complete, your app is navigated to the landing page from the extended splash screen.

A Micorsoft predefined Metro app also shows an extended splash screen like this when an application is launched.

First, here is the Splash Screen:



Then, next is the Extended Splash Screen:



Here we use the Splash Screen class to implement the extended splash screen when the application is launched.

Here are the steps:

Step 1: First of all we use a XAML page and add markup code for the extended splash screen with progress ring.

Here is the code of the XAML file:

<Grid Background="Green">

        <Image x:Name="extendedSplashImage" Source="image (2).png" Height="300" Width="620"VerticalAlignment="Center"  />

        <ProgressRing x:Name="ProgressRing" Foreground="White"

IsActive="True"

        MaxHeight="50" MinHeight="50" MaxWidth="80"

MinWidth="30" Margin="668,560,620,234" Width="78" Height="74"Unloaded="ProgressRing_Unloaded"></ProgressRing>

    </Grid>

Step 2: In the app.cs file we create some code in the OnLaunched event of the application. Here we obtain the splash screen object from the activated event args and display the extended splash screen by setting the current content of the application; see:

protected override void OnLaunched(LaunchActivatedEventArgs args)

{

     if (args.PreviousExecutionState == ApplicationExecutionState.Running)

     {

           Window.Current.Activate();

            return;

     }

      if (args.PreviousExecutionState == ApplicationExecutionState.Terminated)

      {

                //TODO: Load state from previously suspended application

      }         

      SplashScreen splashScreen = args.SplashScreen;

      MainPage eSplash = new MainPage(splashScreen);

           // Register an event handler to be executed when the splash screen has been dismissed.

       splashScreen.Dismissed += new TypedEventHandler<SplashScreen, object>(eSplash.onSplashScreenDismissed);        

      Window.Current.Content = eSplash;

      Window.Current.Activate();           

}

Step 3: In the Constructor of the XAML page we will set the image location and height and width of the image and progress controls, so that it will be displayed as a splash screen; see:

public MainPage(Windows.ApplicationModel.Activation.SplashScreen splash)

{

    // TODO: Complete member initialization

    this.InitializeComponent();

    this.extendedSplashImage.SetValue(Canvas.LeftProperty, splash.ImageLocation.X);

    this.extendedSplashImage.SetValue(Canvas.TopProperty, splash.ImageLocation.Y);

    this.extendedSplashImage.Height = splash.ImageLocation.Height;

    this.extendedSplashImage.Width = splash.ImageLocation.Width;

      // Position the extended splash screen's progress ring.

    this.ProgressRing.SetValue(Canvas.TopProperty, splash.ImageLocation.Y + splash.ImageLocation.Height + 32);

    this.ProgressRing.SetValue(Canvas.LeftProperty,

    splash.ImageLocation.X +(splash.ImageLocation.Width / 2) - 15);         

}

Step 4: In this step we create a method that does some necessary loading for the extended splash screen while it is on the screen; see:

internal void PerformSetupTasks()
{
    // Begin additional loading tasks here…
    RemoveExtendedSplash();
   // Tear down the extended splash screen after all operations are complete.
}

Step 5: In the last step we navigate to the landing page that is displayed when app is started; see:

void RemoveExtendedSplash()

{           

    Window.Current.Content = new BlankPage1();

    Window.Current.Activate();

}

Step 6: Debug your application and Press F5 to run it. You will see an extended splash screen with progress ring control, as in: