Universal Windows Platform And Extended Splash Screen

Introduction

Splash Screen is a better way to promote your application and gives people a warm welcome at the start. Universal Windows Platform Application has already built in Splash Screen when you create a new project, but this just wiped out in blink of an eye, so people who will use your application can not properly read what is written or the picture was supposed to say. That’s why Extended Splash Screen is very helpful to display what you actually want to say to your user (i.e., what’s this app about, your credentials, copyright and so on).

Working on a Project

Firstly, create a new blank project or you can use your existing Universal Windows Platform Application in this case. First of all, we are going to add a new folder and give it a name ‘Images’. Now, import your Splash Screen image into this folder. The dimension of the image recommended to be 620x300 pixel.



Figure 1: Splash Screen1



Figure 2: Adding Splash Screen

After adding the Splash Screen image, go to the ‘Package.appxmanifest’. Right click on it and select ‘View Code’.



Figure 3: Package.appxmanifest

After selecting ‘View Code’, you can see the backend code of the ‘appxmanifest’ file. Change the Splash Screen image URL with the image that you have added in the ‘Images’ folder.



Figure 4: Changing Image URL

In the above picture, you can see that we have set the BackgroundColor in a specific color code. We have matched the color with our Splash Screens background color and set in the code. You can find the color code by simply opening  the image in Visual Studio.



Figure 5: Getting color code

Select the Dropper tool and click on the Splash Screen background and you can see the actual color code in the Properties menu on the Colors section.

Extended Splash Screen

Now, add a new Blank Page, and give a name ‘ExtendedSplash’. Modify the main grid like the following code:



Figure 6: Extended Splash

<Page
...
mc:Ignorable="d" Background="#00B2F0">
    <Grid Background="#00B2F0">
        <Canvas>
            <Image x:Name="extendedSplashImage" Source="Images/SplashScreen.png" />
        </Canvas>
        <ProgressRing Name="splashProgressRing" IsActive="True" Height="30" Width="30" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="20" Foreground="White"/>
    </Grid>
</Page>

Listing: 1

One more thing, you have to do is to add a new helper class, which you can easily find at Official Windows Platform Sample’s Profile. Create a new folder named ‘Common’ and put the .cs file under the folder.



Figure 7: Adding a helper class

Now come back to the ExtendedSplash.xaml.cs. We have main work to do here. The full source of backend file is given below with description.

publicsealedpartialclassExtendedSplash : Page
{
internalRect splashImageRect; // Rect to store splash screen image coordinates.
internalbool dismissed = false; // Variable to track splash screen dismissal status.
internalFrame rootFrame;

privateSplashScreen splash; // Variable to hold the splash screen object.
privatedouble ScaleFactor; //Variable to hold the device scale factor (use to determine phone screen resolution)

public ExtendedSplash(SplashScreen splashscreen, bool loadState)
    {
        InitializeComponent();
        DismissExtendedSplash();

// Listen for window resize events to reposition the extended splash screen image accordingly.
// This is important to ensure that the extended splash screen is formatted properly in response to snapping, unsnapping, rotation, etc...
Window.Current.SizeChanged += newWindowSizeChangedEventHandler(ExtendedSplash_OnResize);

        ScaleFactor = (double)DisplayInformation.GetForCurrentView().ResolutionScale / 100;

        splash = splashscreen;

if (splash != null)
        {
// Register an event handler to be executed when the splash screen has been dismissed.
            splash.Dismissed += newTypedEventHandler<SplashScreen, Object>(DismissedEventHandler);

// Retrieve the window coordinates of the splash screen image.
            splashImageRect = splash.ImageLocation;
            PositionImage();
        }

// Restore the saved session state if necessary
        RestoreStateAsync(loadState);
    }

asyncvoid RestoreStateAsync(bool loadState)
    {
if (loadState)
awaitSuspensionManager.RestoreAsync();
    }

// Position the extended splash screen image in the same location as the system splash screen image.
void PositionImage()
    {
        extendedSplashImage.SetValue(Canvas.LeftProperty, splashImageRect.Left);
        extendedSplashImage.SetValue(Canvas.TopProperty, splashImageRect.Top);
        extendedSplashImage.Height = splashImageRect.Height / ScaleFactor;
        extendedSplashImage.Width = splashImageRect.Width / ScaleFactor;
    }

void ExtendedSplash_OnResize(Object sender, WindowSizeChangedEventArgs e)
    {
// Safely update the extended splash screen image coordinates. This function will be fired in response to snapping, unsnapping, rotation, etc...
if (splash != null)
        {
// Update the coordinates of the splash screen image.
            splashImageRect = splash.ImageLocation;
            PositionImage();
        }
    }

// Include code to be executed when the system has transitioned from the splash screen to the extended splash screen (application's first view).
void DismissedEventHandler(SplashScreen sender, object e)
    {
        dismissed = true;
    }

asyncvoid DismissExtendedSplash()
    {
awaitTask.Delay(TimeSpan.FromSeconds(3)); // set your desired delay
        rootFrame = newFrame();
MainPage mainPage = newMainPage();
        rootFrame.Content = mainPage;
Window.Current.Content = rootFrame;
        rootFrame.Navigate(typeof(MainPage)); // call MainPage
    }
}

Listing: 2

Here, we have changed the Constructor, which takes two parameters, one is Splash Screen type and another is a Boolean variable which indicated the loading state of the Splash Screen. There are four major functions: ExtendedSplash_OnResize, PositionImage, RestoreStateAsync and DismissExtendedSplash. ExtendedSplash_OnResize calls the PositionImage method based on the windows size and set the coordinate. PositionImage sets the Canvas property depending on the resulation of the screen, and DismissExtendedSplash sets the time to display the Splash Screen and navigate to the MainPage.

One last thing, we have to do is working with app.xaml.cs file. Open up the file and change the OnLaunched method accordingly.

protectedoverridevoid OnLaunched(LaunchActivatedEventArgs e)
{
...
//  Display an extended splash screen if app was not previously running.
if (e.PreviousExecutionState != ApplicationExecutionState.Running)
    {
bool loadState = (e.PreviousExecutionState == ApplicationExecutionState.Terminated);
ExtendedSplash extendedSplash = newExtendedSplash(e.SplashScreen, loadState);
        rootFrame.Content = extendedSplash;
Window.Current.Content = rootFrame;
    }
//Window.Current.Content = rootFrame;
...
}

Listing: 3

We have commented out the current content because it prevents to load the main page and load the Splash Screen page instead. Also, change the OnSuspending method like the following code snippet:

asyncprivatevoid OnSuspending(object sender, SuspendingEventArgs e)
{
    var deferral = e.SuspendingOperation.GetDeferral();
    awaitSuspensionManager.SaveAsync();
    deferral.Complete();
}

Listing: 4

We have set all the things needed. Now you are good to go. Build the application, and hopefully it builds successfully. Now run the application and it will work like a charm.



Figure 8: Splash Screen

Closure

Hopefully this will help you to understand the mechanism of Extended Splash Screen. Now, you can make your app more attractive with great promoting Splash Screen embedded in your application. Happy coding!

Download the project:

Source Code