Extended splash screen Quickstart for Windows Store apps using C#, XAML, and Prism

  • Article

[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]

From: Developing a Windows Store business app using C#, XAML, and Prism for the Windows Runtime

Previous page | Next page

Learn how to use Prism for the Windows Runtime to display an extended splash screen that imitates the splash screen displayed by Windows. An extended splash screen is a splash screen that stays on the screen for an extended period of time, and should be displayed when an app needs more time to prepare its initial UI.

Download

You will learn

  • How to create an extended splash screen that responds to resize events.
  • How to position and size the extended splash screen correctly.
  • How to use Prism for the Windows Runtime to display an extended splash screen while an app completes additional loading tasks.

Applies to

  • Windows Runtime for Windows 8.1
  • C#
  • Extensible Application Markup Language (XAML)

Building and running the Quickstart

Build the Quickstart as you would a standard project:

  1. On the Microsoft Visual Studio menu bar, choose Build > Build Solution.
  2. After you build the project, you must deploy it. On the menu bar, choose Build > Deploy Solution. Visual Studio also deploys the project when you run the app from the debugger.
  3. After you deploy the project, pick the Quickstart tile to run the app. Alternatively, from Visual Studio, on the menu bar, choose Debug > Start Debugging.

When the app runs you will see the extended splash screen for the app, as shown in the following diagram.

This Quickstart demonstrates how to use Prism for the Windows Runtime to display an extended splash screen that imitates the splash screen displayed by Windows. If an app needs more time to prepare its UI or load network data, you can use an extended splash screen to display a message to the user as the app completes those tasks.

For more info about extended splash screens, see How to extend the splash screen and Guidelines for splash screens.

[Top]

Solution structure

The ExtendedSplashScreen Visual Studio solution contains two projects: ExtendedSplashScreenQuickstart, and Microsoft.Practices.Prism.StoreApps. The ExtendedSplashScreenQuickstart project uses Visual Studio solution folders to organize the source code into these logical categories:

  • The Assets folder contains the splash screen and logo images.
  • The Common folder contains classes provided by Visual Studio that help to simplify application development.
  • The DataModels folder contains the sample data used in the app.
  • The Views folder contains the views that make up the UI for the app's pages.

The Microsoft.Practices.Prism.StoreApps library contains reusable classes used by this Quickstart. For more info about this library, see Prism for the Windows Runtime reference. With little or no modification, you can reuse many of the classes from this Quickstart in another app. You can also adapt the organization and ideas that this Quickstart provides.

[Top]

Key classes in the Quickstart

The MvvmAppBase class provides core startup behavior for a Prism app, with its constructor being the entry point for the app. The App class adds app-specific startup behavior to the app.

The ExtendedSplashScreen class defines the extended splash screen that imitates the splash screen that is displayed by Microsoft Windows.

[Top]

Creating the extended splash screen

An extended splash screen is simply a splash screen that stays on the screen for an extended period of time. It can be defined by creating a class that derives from the Page class, as shown in the following code example.

ExtendedSplashScreenQuickstart\ExtendedSplashScreen.xaml

<Page ...>
    <Canvas Background="#1d1d1d">
        <!-- The real position of these controls will change during runtime -->
        <Image Stretch="None" x:Name="splashImage" Source="Assets/SplashScreen.png" Canvas.Left="350" Canvas.Top="250"/>
        <ProgressRing x:Name="progressRing" Height="50" Width="50" IsActive="True" Canvas.Left="650" Canvas.Top="550"/>
    </Canvas>
</Page>

An extended splash screen must contain an Image control as the child of a Canvas control. The Canvas displays the image that is used on the extended splash screen. The image itself must have a resolution of 620x300 pixels. The ProgressRing control is used to inform users that the app hasn’t crashed and will be ready soon. This helps to create a positive loading experience.

Note  An extended splash screen should use the same background color and image as the Windows splash screen. This helps to ensure a smooth transition from the Windows splash screen to the extended splash screen.

 

[Top]

Responding to resize and image opened events for the extended splash screen

The extended splash screen should adjust the coordinates of its image whenever the window size changes, for example if the user changes the orientation of the device. This helps to ensure a smooth loading experience, regardless of how users manipulate their devices or change the layout of apps on their screens.

To position the extended splash screen image at the same screen coordinates where Windows positions the splash screen image requires a SplashScreen instance to be passed to the ExtendedSplashScreen class. The SplashScreen instance is passed into the class through its constructor.

ExtendedSplashScreenQuickstart\ExtendedSplashScreen.xaml.cs

public ExtendedSplashScreen(SplashScreen splashScreen)
{
    this.splashScreen = splashScreen;

    this.InitializeComponent();
    
    this.SizeChanged += ExtendedSplashScreen_SizeChanged;
    this.splashImage.ImageOpened += splashImage_ImageOpened;
}

The constructor registers event handlers for two events. The event handler for the SizeChanged event of the window ensures that the extended splash screen is positioned and sized correctly. The event handler for the ImageOpened event of the Image control is used to prevent flickering when transitioning from the splash screen displayed by Windows to the extended splash screen. It does this by not activating the window until the extended splash screen is ready to be shown. Each event handler calls the Resize method of the ExtendedSplashScreen class, which is shown in the following code example.

ExtendedSplashScreenQuickstart\ExtendedSplashScreen.xaml.cs

private void Resize()
{
    if (this.splashScreen == null) return;

    // The splash image's not always perfectly centered. Therefore we need to set our image's position 
    // to match the original one to obtain a clean transition between both splash screens.

    this.splashImage.Height = this.splashScreen.ImageLocation.Height;
    this.splashImage.Width = this.splashScreen.ImageLocation.Width;

    this.splashImage.SetValue(Canvas.TopProperty, this.splashScreen.ImageLocation.Top);
    this.splashImage.SetValue(Canvas.LeftProperty, this.splashScreen.ImageLocation.Left);

    this.progressRing.SetValue(Canvas.TopProperty, this.splashScreen.ImageLocation.Top + this.splashScreen.ImageLocation.Height  + 50);
    this.progressRing.SetValue(Canvas.LeftProperty, this.splashScreen.ImageLocation.Left + this.splashScreen.ImageLocation.Width / 2 - this.progressRing.Width / 2);
}

The Resize method is used to correctly position and size the controls in the extended splash screen by updating their values based upon the coordinates of the splash screen image displayed by Windows.

[Top]

Displaying the extended splash screen and launching additional loading tasks

Prism for the Windows Runtime defines an ExtendedSplashScreenFactory property in the MvvmAppBase class. The MvvmAppBase class will check this property during app startup, and if it’s defined it will show the extended splash screen. Therefore the property should be set to a delegate that returns the app’s extended splash screen. In this Quickstart this occurs in the constructor of the App class.

ExtendedSplashScreenQuickstart\App.xaml.cs

this.ExtendedSplashScreenFactory = (splashscreen) => new ExtendedSplashScreen(splashscreen);

When an app is launched the system passes splash screen information to the app’s launch activation event handler. This information should be used to correctly position the image on the extended splash screen page, over the splash screen image displayed by Windows. In an app that uses Prism for the Windows Runtime, the app’s launch activation event handler is the OnLaunched method in the MvvmAppBase class. This method in turn calls the InitializeFrameAsync method in the same class, passing in the launch activation event arguments.

Microsoft.Practices.Prism.StoreApps\MvvmAppBase.cs

rootFrame = new Frame();

if (ExtendedSplashScreenFactory != null)
{
    Page extendedSplashScreen = this.ExtendedSplashScreenFactory.Invoke(args.SplashScreen);
    rootFrame.Content = extendedSplashScreen;
}

Inside the InitializeFrameAsync method, if the ExtendedSplashScreenFactory property is defined the factory will create the extended splash screen page and place it in the Frame for display, before continuing with further initialization. This approach allows the extended splash screen to be displayed without performing a navigation operation, ensuring that it will not form part of the app's navigation history.

Once frame initialization is complete, the OnLaunched method will call the OnLaunchApplication method in the App class.

ExtendedSplashScreenQuickstart\App.xaml.cs

protected override async Task OnLaunchApplication(LaunchActivatedEventArgs args)
{
    if (args.PreviousExecutionState != ApplicationExecutionState.Running)
    {
        // Here we would load the application's resources.
        await this.LoadAppResources();
    }

    this.NavigationService.Navigate("GroupedItems", null);
}

The OnLaunchApplication method in the App class adds app-specific startup behavior to the app. The LoadAppResource method is called provided that the app is being activated. This method simulates the asynchronous loading of resources by creating a Task that will complete after a 7 second delay. Once the Task has completed the GroupedItemsPage is navigated to.

For info about how app startup occurs and the interaction between the MvvmAppBase class and the App class, see Bootstrapping an MVVM Windows Store app Quickstart.

[Top]