Windows 8 : Extended Splash Screen

We say in my last blog : what is a splash screen and best practices to create a splash screen.
In this article we will see
a. What is an extended splash screen.
b. Why do we need an extended splash screen.
c. How do we create an extended splash screen.

So , let us start from the beginning. What is an extended splash screen?
An extended splash screen is nothing but a simple xaml page which is shown to you before you see your landing page.

If it is nothing else than a xaml page , then why do we call it an extended splash screen?
You call it an extended splash screen and not the landing page because some of your background events are still happening here , you write all your extra logic which is required before starting your app here, in the extended splash screen.

This screen is called an extended splash screen , because this screen utilises the same class as the splash screen. The class is called "SplashScreen."

So, now that we know what this extended splash screen? why to use this? and why it is called extended splash screen?

Let us get into the code now.(Its difficult for developers to speak anything other than code....:( )

Okay...

So, let us begin.

Step 1: Open Visual Studio

Step 2:  Create a Windows Store app.

 

 

 

Step 3: Let us name it ExtendedSplash_Sample

Step 4:  In app.xaml.cs Change the OnLaunched method

protected override void OnLaunched(LaunchActivatedEventArgs args)



{
  //First we want to check to see if the application was already running.

if (args.PreviousExecutionState != ApplicationExecutionState.Running)



{
  //If it wasn't, then we want to check to see if it was terminated the last time it was run,

//which we will pass on to our Splash page.

bool loadState = (args.PreviousExecutionState == ApplicationExecutionState.Terminated);

//Create a new Splash page object passing the SplashScreen object to the constructor.

Splash splashPage = new Splash(args.SplashScreen, loadState);

//Set our current app's content = the new Splash page.

Window.Current.Content = splashPage;



}
  Window.Current.Activate();

In the above code ,
Following lines are of importance:


bool loadState = (args.PreviousExecutionState == ApplicationExecutionState.Terminated);

//Create a new Splash page object passing the SplashScreen object to the constructor.

Splash splashPage = new Splash(args.SplashScreen, loadState);

//Set our current app's content = the new Splash page.

Window.Current.Content = splashPage;

       
These are the lines which checks if the app is running or not.
If it is not running, it creates an instance of the class Splash , which is responsible for rendering the splash screen.
and sets the current content of the window to the instance of Splash.

Step 5: In the Splash.xaml add following lines of code:
<Canvas Background="#FF8000">

<Image x:Name="SplashScreenImage"

Source="Assets/SplashScreen_1.png"

Width="620"

  Height="300"

Visibility="Collapsed"/>

<Image x:Name="ProgressRingImage"

Source="Assets/progressRing.png"

Width="620"

Height="100"

Visibility="Collapsed"/>

</Canvas>

 












Step 6 :  You nee to add following code to
            a. Do the required tasks , which should be done while the splash is being loaded.
            b. To remove the splash screen when the task is completed.

Add RemoveExtendedSplash()
private async void RemoveExtendedSplash()



{
  await Task.Delay(TimeSpan.FromSeconds(1));

Window.Current.Content = new MainPage();



}





Step 7:

Now, in the Splash.xaml.cs we need the logic to show the extended splash screen.
So, we overload the constructor , so that it takes an instance of the Boolean : loadstate and an instance of SplashScreen.

This is the constructor which we are calling from the app.xaml

Splash splashPage = new Splash(args.SplashScreen, loadState);

So, we change the constructor to state

public Splash(SplashScreen splashscreen, bool loadState)



{  this.InitializeComponent();



splashScreen = splashscreen;

splashImage = splashScreen.ImageLocation;  splashScreen.Dismissed += new TypedEventHandler<SplashScreen, Object>(splashScreen_Dismissed);

 PositionProgressRing();



}

Step 8:
In the Splash.xaml.cs add the

public SplashScreen splashScreen;

public Rect splashImage;

         
Step 9 : In the constructor we are adding

one delegate : splashScreen.Dismissed += new TypedEventHandler<SplashScreen, Object>(splashScreen_Dismissed);

Declare this delegate as follows:

void splashScreen_Dismissed(SplashScreen sender, object args)

{

}

Step 10 :
The other method we had declared at contructor is PositionProgressRing() , this is the other image we are putting in the extended splash screen.

This method does following:
a. It sets the position of the splash screen.
b. The progress ring/any other image that we need to show when the background process is happening.

One thing that we should note here is the parent for a splash screen or an extended splash screen is not a Grid but a Canvas.


  private void PositionProgressRing()

{
  SplashScreenImage.SetValue(Canvas.TopProperty, splashImage.Y);

SplashScreenImage.SetValue(Canvas.LeftProperty, splashImage.X);

SplashScreenImage.Height = splashImage.Height;

SplashScreenImage.Width = splashImage.Width;
  SplashScreenImage.Visibility = Visibility.Visible;


　
  ProgressRingImage.SetValue(Canvas.TopProperty, (splashImage.Y + splashImage.Height + 100));

ProgressRingImage.SetValue(Canvas.LeftProperty, splashImage.X);

ProgressRingImage.Visibility = Visibility.Visible;



}


Step 11 : OnNavigatingFrom is the other event which you need to add in the splash.xaml.cs
As the name suggests this is responsible for carrying out the tasks which the extended splash screen should do when the user is navigating out of it.

Basically , what it does is it dismisses the extended SplashScreen.
  protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)

{
  base.OnNavigatingFrom(e);



splashScreen.Dismissed -= splashScreen_Dismissed;

}

}

And you are ready!!!

Step 12 : When you execute the app , the app is readu for you to show the extended splash screen as you need

 

 

 

 

  Link to You tube :

 If you have any queries or want to create a windows 8 app store app in c#/xaml , write to me @ architar.dash@gmail.com