How to add extended splash screen with progress rings to a Windows 8 app

Recently I have been seeing Windows 8.1 apps (specifically ones targeting ARM) fail content compliance certification due to requirement 3.2, which states “Your app must not stop responding, end unexpectedly, or exhibit errors that significantly and adversely impact the customer experience”. Notes from testers usually say “Unfortunately, when our reviewers tried to launch your app failed to launch every time”.

Although it is certainly not the case all the time, I believe one of the reasons these apps fail because of time restrictions when launching the app. Since ARM based tables can have lower performance than x86 based ones, they fail this requirement more often. I found that adding an extended splash screen with a progress ring solves this issue since it either tells the tester that the app is not frozen or it makes it pass the time to launch test.

It is very easy to add an extended splash screen to your app. I am going to walk you through the steps to add for a C#/XAML-based app.

First, create a new XAML page called ExtendedSplash.xaml to create a background with an image of your choosing and the progress rings.

    <Grid Background="Black">
        <Image x:Name="extendedSplashImage" Source="Assets/Image.png" Height="300" Width="620" VerticalAlignment="Center" />
        <ProgressRing x:Name="ProgressRing" Foreground="White" IsActive="True" MaxHeight="50" MinHeight="50" MaxWidth="80" MinWidth="30" Margin="590,560,620,234" Width="78" Height="74"></ProgressRing>
    </Grid>

and in ExtendedSplash.xaml.cs, enter this:

        public ExtendedSplash(SplashScreen splash)
        {
            InitializeComponent();

            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);
        }

        internal void onSplashScreenDismissed(Windows.ApplicationModel.Activation.SplashScreen sender, object e)
        {
            // The splash screen has been dismissed and the extended splash screen is now in view.
        }

Finally, in App.xaml.cs, add this on top of OnLaunched function to call the extended splash screen.

            if (args.PreviousExecutionState == ApplicationExecutionState.Running)
            {
                Window.Current.Activate();
                return;
            }
            SplashScreen splashScreen = args.SplashScreen;
            ExtendedSplash eSplash = new ExtendedSplash(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();

Now your app should display an extended splash screen with progress rings when launched until it is ready to display the initial page.