Partager via

Afficher un écran de démarrage plus longtemps

  • Article

Affichez un écran de démarrage plus longtemps en créant et en affichant un écran de démarrage étendu pour votre application. Cet écran étendu imite l’écran de démarrage affiché lors du lancement de votre application, mais peut être personnalisé. Que vous souhaitiez afficher des informations de chargement en temps réel ou simplement donner à votre application du temps supplémentaire pour préparer son interface utilisateur initiale, un écran de démarrage étendu vous permet de définir l’expérience de lancement.

Remarque

L’expression « écran de démarrage étendu » dans cette rubrique fait référence à un écran de démarrage qui reste sur l’écran pendant une période prolongée. Cela ne signifie pas une sous-classe qui dérive de la classe SplashScreen .

API importantes

Les API suivantes sont utilisées dans cette rubrique :

Recommandations d’écran de démarrage par défaut

Assurez-vous que votre écran de démarrage étendu imite avec précision l’écran de démarrage par défaut en suivant les recommandations suivantes :

  • Votre page d’écran de démarrage étendue doit utiliser une image de 620 x 300 pixels cohérente avec l’image spécifiée pour votre écran de démarrage dans le manifeste de votre application (image d’écran de démarrage de votre application). Dans Microsoft Visual Studio, les paramètres de l’écran de démarrage sont stockés dans la section Écran de démarrage de l’onglet Éléments visuels de votre manifeste d’application (fichier Package.appxmanifest).
  • Votre écran de démarrage étendu doit utiliser une couleur d’arrière-plan cohérente avec la couleur d’arrière-plan spécifiée pour votre écran de démarrage dans le manifeste de votre application (arrière-plan de l’écran de démarrage de votre application).
  • Votre code doit utiliser la classe SplashScreen pour positionner l’image de l’écran de démarrage de votre application aux mêmes coordonnées d’écran que l’écran de démarrage par défaut.
  • Votre code doit répondre aux événements de redimensionnement de fenêtre (par exemple, lorsque l’écran est pivoté ou que votre application est déplacée en regard d’une autre application à l’écran) à l’aide de la classe SplashScreen pour repositionner les éléments sur votre écran de démarrage étendu.

Utilisez les étapes suivantes pour créer un écran de démarrage étendu qui imite efficacement l’écran de démarrage par défaut.

Ajouter un élément de page vide à votre application existante

Cette rubrique part du principe que vous souhaitez ajouter un écran de démarrage étendu à un projet d’application plateforme Windows universelle (UWP) existant à l’aide de C#, Visual Basic ou C++.

  • Ouvrez votre application dans Visual Studio.
  • Appuyez ou ouvrez Project à partir de la barre de menus, puis cliquez sur Ajouter un nouvel élément. Une boîte de dialogue Ajouter un nouvel élément s’affiche.
  • Dans cette boîte de dialogue, ajoutez une nouvelle page vide à votre application. Cette rubrique nomme la page d’écran de démarrage étendue « ExtendedSplash ».

L’ajout d’un élément de page vide génère deux fichiers, un pour le balisage (ExtendedSplash.xaml) et un autre pour le code (ExtendedSplash.xaml.cs).

XAML essentiel pour un écran de démarrage étendu

Suivez ces étapes pour ajouter une image et un contrôle de progression à votre écran de démarrage étendu.

Dans votre fichier ExtendedSplash.xaml :

  • Modifiez la propriété Arrière-plan de l’élément Grid par défaut pour qu’elle corresponde à la couleur d’arrière-plan définie pour l’écran de démarrage de votre application dans le manifeste de votre application (dans la section Ressources visuelles de votre fichier Package.appxmanifest). La couleur d’écran de démarrage par défaut est un gris clair (valeur hexadécimal #464646). Notez que cet élément Grid est fourni par défaut lorsque vous créez une page vide. Vous n’avez pas besoin d’utiliser une grille . Il s’agit simplement d’une base pratique pour créer un écran de démarrage étendu.
  • Ajoutez un élément Canvas à la grille. Vous utiliserez ce canevas pour positionner votre image d’écran de démarrage étendue.
  • Ajoutez un élément Image au canevas. Utilisez la même image de 620 x 300 pixels pour votre écran de démarrage étendu que vous avez choisi pour l’écran de démarrage par défaut.
  • (Facultatif) Ajoutez un contrôle de progression pour afficher aux utilisateurs que votre application charge. Cette rubrique ajoute un ProgressRing au lieu d’un ProgressBar déterminé ou indéterminé.

L’exemple suivant illustre une grille avec ces ajouts et modifications.

    <Grid Background="#464646">
        <Canvas>
            <Image x:Name="extendedSplashImage" Source="Assets/SplashScreen.png"/>
            <ProgressRing Name="splashProgressRing" IsActive="True" Width="20" HorizontalAlignment="Center"></ProgressRing>
        </Canvas>
    </Grid>

Remarque

Cet exemple montre comment définir la largeur de ProgressRing sur 20 pixels. Vous pouvez définir manuellement sa largeur sur une valeur qui fonctionne pour votre application. Toutefois, le contrôle ne s’affiche pas à largeur inférieure à 20 pixels.

Code essentiel pour une classe d’écran de démarrage étendue

Votre écran de démarrage étendu doit répondre chaque fois que la taille de la fenêtre (Windows uniquement) ou l’orientation change. La position de l’image que vous utilisez doit être mise à jour afin que votre écran de démarrage étendu semble correct, quelle que soit la façon dont la fenêtre change.

Utilisez ces étapes pour définir des méthodes pour afficher correctement votre écran de démarrage étendu.

  1. Ajouter des espaces de noms requis

    Vous devez ajouter les espaces de noms suivants à ExtendedSplash.xaml.cs pour accéder à la classe SplashScreen , au struct Rect et aux événements Window.SizeChanged .

    using Windows.ApplicationModel.Activation;
using Windows.Foundation;
using Windows.UI.Core;

  2. Créer une classe partielle et déclarer des variables de classe

    Incluez le code suivant dans ExtendedSplash.xaml.cs pour créer une classe partielle pour représenter un écran de démarrage étendu.

    partial class ExtendedSplash : Page
{
    internal Rect splashImageRect; // Rect to store splash screen image coordinates.
    private SplashScreen splash; // Variable to hold the splash screen object.
    internal bool dismissed = false; // Variable to track splash screen dismissal status.
    internal Frame rootFrame;

   // Define methods and constructor
}

    Ces variables de classe sont utilisées par plusieurs méthodes. La splashImageRect variable stocke les coordonnées où le système a affiché l’image de l’écran de démarrage de l’application. La splash variable stocke un objet SplashScreen et la dismissed variable suit si l’écran de démarrage affiché par le système a été ignoré.

  3. Définir un constructeur pour votre classe qui positionne correctement l’image

    Le code suivant définit un constructeur pour la classe d’écran de démarrage étendue qui écoute les événements de redimensionnement de fenêtre, positionne l’image et (facultatif) le contrôle de progression sur l’écran de démarrage étendu, crée un cadre pour la navigation et appelle une méthode asynchrone pour restaurer un état de session enregistré.

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

    // Listen for window resize events to reposition the extended splash screen image accordingly.
    // This ensures that the extended splash screen formats properly in response to window resizing.
    Window.Current.SizeChanged += new WindowSizeChangedEventHandler(ExtendedSplash_OnResize);

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

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

        // If applicable, include a method for positioning a progress control.
        PositionRing();
    }

    // Create a Frame to act as the navigation context
    rootFrame = new Frame();            
}

    Veillez à inscrire votre gestionnaire Window.SizeChanged (ExtendedSplash_OnResize dans l’exemple) dans votre constructeur de classe afin que votre application positionne correctement l’image dans votre écran de démarrage étendu.

  4. Définir une méthode de classe pour positionner l’image dans votre écran de démarrage étendu

    Ce code montre comment positionner l’image sur la page d’écran de démarrage étendue avec la splashImageRect variable de classe.

    void PositionImage()
{
    extendedSplashImage.SetValue(Canvas.LeftProperty, splashImageRect.X);
    extendedSplashImage.SetValue(Canvas.TopProperty, splashImageRect.Y);
    extendedSplashImage.Height = splashImageRect.Height;
    extendedSplashImage.Width = splashImageRect.Width;
}

  5. (Facultatif) Définir une méthode de classe pour positionner un contrôle de progression dans votre écran de démarrage étendu

    Si vous avez choisi d’ajouter un ProgressRing à votre écran de démarrage étendu, positionnez-le par rapport à l’image de l’écran de démarrage. Ajoutez le code suivant à ExtendedSplash.xaml.cs pour centrer les 32 pixels ProgressRing sous l’image.

    void PositionRing()
{
    splashProgressRing.SetValue(Canvas.LeftProperty, splashImageRect.X + (splashImageRect.Width*0.5) - (splashProgressRing.Width*0.5));
    splashProgressRing.SetValue(Canvas.TopProperty, (splashImageRect.Y + splashImageRect.Height + splashImageRect.Height*0.1));
}

  6. À l’intérieur de la classe, définissez un gestionnaire pour l’événement Dismissed

    Dans ExtendedSplash.xaml.cs, répondez lorsque l’événement SplashScreen.Dismissed se produit en définissant la dismissed variable de classe sur true. Si votre application a des opérations de configuration, ajoutez-les à ce gestionnaire d’événements.

    // 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;

    // Complete app setup operations here...
}

    Une fois la configuration de l’application terminée, quittez votre écran de démarrage étendu. Le code suivant définit une méthode appelée DismissExtendedSplash qui accède au fichier MainPage.xaml défini dans le MainPage fichier MainPage.xaml de votre application.

    async void DismissExtendedSplash()
  {
     await Windows.ApplicationModel.Core.CoreApplication.MainView.CoreWindow.Dispatcher.RunAsync(CoreDispatcherPriority.Normal,() =>            {
          rootFrame = new Frame();
          rootFrame.Content = new MainPage(); Window.Current.Content = rootFrame;
        });
  }

  7. À l’intérieur de la classe, définissez un gestionnaire pour les événements Window.SizeChanged

    Préparez votre écran de démarrage étendu pour repositionner ses éléments si un utilisateur redimensionne la fenêtre. Ce code répond lorsqu’un événement Window.SizeChanged se produit en capturant les nouvelles coordonnées et en repositionnant l’image. Si vous avez ajouté un contrôle de progression à votre écran de démarrage étendu, repositionnez-le également à l’intérieur de ce gestionnaire d’événements.

    void ExtendedSplash_OnResize(Object sender, WindowSizeChangedEventArgs e)
{
    // Safely update the extended splash screen image coordinates. This function will be executed when a user resizes the window.
    if (splash != null)
    {
        // Update the coordinates of the splash screen image.
        splashImageRect = splash.ImageLocation;
        PositionImage();

        // If applicable, include a method for positioning a progress control.
        // PositionRing();
    }
}

    Remarque

     Avant d’essayer d’obtenir l’emplacement de l’image, vérifiez que la variable de classe (splash) contient un objet SplashScreen valide, comme illustré dans l’exemple.

     

  8. (Facultatif) Ajouter une méthode de classe pour restaurer un état de session enregistré

    Le code que vous avez ajouté à la méthode OnLaunched à l’étape 4 : modifier le gestionnaire d’activation de lancement entraîne l’affichage d’un écran de démarrage étendu lors du lancement de votre application. Pour consolider toutes les méthodes liées au lancement d’application dans votre classe d’écran de démarrage étendue, vous pouvez envisager d’ajouter une méthode à votre fichier ExtendedSplash.xaml.cs pour restaurer l’état de l’application.

    void RestoreState(bool loadState)
{
    if (loadState)
    {
         // code to load your app's state here
    }
}

    Lorsque vous modifiez le gestionnaire d’activation de lancement dans App.xaml.cs, vous aurez également la loadstate valeur true si l’application Précédente ApplicationExecutionState de votre application a été arrêtée. Si c’est le cas, la RestoreState méthode restaure l’application à son état précédent. Pour obtenir une vue d’ensemble du lancement, de la suspension et de l’arrêt de l’application, consultez le cycle de vie des applications.

Modifier le gestionnaire d’activation de lancement

Lorsque votre application est lancée, le système transmet les informations de l’écran de démarrage au gestionnaire d’événements d’activation de lancement de l’application. Vous pouvez utiliser ces informations pour positionner correctement l’image sur votre page d’écran de démarrage étendue. Vous pouvez obtenir ces informations d’écran de démarrage à partir des arguments d’événement d’activation passés au gestionnaire OnLaunched de votre application (voir la args variable dans le code suivant).

Si vous n’avez pas déjà remplacé le gestionnaire OnLaunched pour votre application, consultez le cycle de vie de l’application pour savoir comment gérer les événements d’activation.

Dans App.xaml.cs, ajoutez le code suivant pour créer et afficher un écran de démarrage étendu.

protected override void OnLaunched(LaunchActivatedEventArgs args)
{
    if (args.PreviousExecutionState != ApplicationExecutionState.Running)
    {
        bool loadState = (args.PreviousExecutionState == ApplicationExecutionState.Terminated);
        ExtendedSplash extendedSplash = new ExtendedSplash(args.SplashScreen, loadState);
        Window.Current.Content = extendedSplash;
    }

    Window.Current.Activate();
}

Code complet

Le code suivant diffère légèrement des extraits de code indiqués dans les étapes précédentes.

  • ExtendedSplash.xaml inclut un DismissSplash bouton. Lorsque ce bouton est cliqué, un gestionnaire d’événements, DismissSplashButton_Clickappelle la DismissExtendedSplash méthode. Dans votre application, appelez DismissExtendedSplash une fois que votre application a terminé de charger des ressources ou initialiser son interface utilisateur.
  • Cette application utilise également un modèle de projet d’application UWP, qui utilise la navigation Frame . Par conséquent, dans App.xaml.cs, le gestionnaire d’activation de lancement (OnLaunched) définit a rootFrame et l’utilise pour définir le contenu de la fenêtre d’application.

ExtendedSplash.xaml

Cet exemple inclut un DismissSplash bouton, car il n’a pas de ressources d’application à charger. Dans votre application, ignorez automatiquement l’écran de démarrage étendu lorsque votre application charge des ressources ou prépare son interface utilisateur initiale.

<Page
    x:Class="SplashScreenExample.ExtendedSplash"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SplashScreenExample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="#464646">
        <Canvas>
            <Image x:Name="extendedSplashImage" Source="Assets/SplashScreen.png"/>
            <ProgressRing Name="splashProgressRing" IsActive="True" Width="20" HorizontalAlignment="Center"/>
        </Canvas>
        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Bottom">
            <Button x:Name="DismissSplash" Content="Dismiss extended splash screen" HorizontalAlignment="Center" Click="DismissSplashButton_Click" />
        </StackPanel>
    </Grid>
</Page>

ExtendedSplash.xaml.cs

Notez que la DismissExtendedSplash méthode est appelée à partir du gestionnaire d’événements Click pour le DismissSplash bouton. Dans votre application, vous n’aurez pas besoin d’un DismissSplash bouton. Au lieu de cela, appelez DismissExtendedSplash lorsque votre application a terminé le chargement des ressources et que vous souhaitez accéder à sa page principale.

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

using Windows.ApplicationModel.Activation;
using SplashScreenExample.Common;
using Windows.UI.Core;

// The Blank Page item template is documented at https://go.microsoft.com/fwlink/p/?LinkID=234238

namespace SplashScreenExample
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    partial class ExtendedSplash : Page
    {
        internal Rect splashImageRect; // Rect to store splash screen image coordinates.
        private SplashScreen splash; // Variable to hold the splash screen object.
        internal bool dismissed = false; // Variable to track splash screen dismissal status.
        internal Frame rootFrame;

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

            // 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 += new WindowSizeChangedEventHandler(ExtendedSplash_OnResize);

            splash = splashscreen;

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

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

                // Optional: Add a progress ring to your splash screen to show users that content is loading
                PositionRing();
            }

            // Create a Frame to act as the navigation context
            rootFrame = new Frame();

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

        void RestoreState(bool loadState)
        {
            if (loadState)
            {
                // TODO: write code to load state
            }
        }

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

        }

        void PositionRing()
        {
            splashProgressRing.SetValue(Canvas.LeftProperty, splashImageRect.X + (splashImageRect.Width*0.5) - (splashProgressRing.Width*0.5));
            splashProgressRing.SetValue(Canvas.TopProperty, (splashImageRect.Y + splashImageRect.Height + splashImageRect.Height*0.1));
        }

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

        // 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;

            // Complete app setup operations here...
        }

        void DismissExtendedSplash()
        {
            // Navigate to mainpage
            rootFrame.Navigate(typeof(MainPage));
            // Place the frame in the current Window
            Window.Current.Content = rootFrame;
        }

        void DismissSplashButton_Click(object sender, RoutedEventArgs e)
        {
            DismissExtendedSplash();
        }
    }
}

App.xaml.cs

Ce projet a été créé à l’aide du modèle de projet Application vide (XAML) de l’application UWP dans Visual Studio. Les gestionnaires d’événements et OnSuspending les OnNavigationFailed gestionnaires d’événements sont générés automatiquement et n’ont pas besoin d’être modifiés pour implémenter un écran de démarrage étendu. Cette rubrique ne modifie OnLaunchedque .

Si vous n’avez pas utilisé de modèle de projet pour votre application, consultez l’étape 4 : Modifier le gestionnaire d’activation de lancement pour un exemple de modification OnLaunched qui n’utilise pas la navigation Frame .

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.ApplicationModel;
using Windows.ApplicationModel.Activation;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// The Blank Application template is documented at https://go.microsoft.com/fwlink/p/?LinkID=234227

namespace SplashScreenExample
{
    /// <summary>
    /// Provides application-specific behavior to supplement the default Application class.
    /// </summary>
    sealed partial class App : Application
    {
        /// <summary>
        /// Initializes the singleton application object.  This is the first line of authored code
        /// executed, and as such is the logical equivalent of main() or WinMain().
        /// </summary>
        public App()
        {
            Microsoft.ApplicationInsights.WindowsAppInitializer.InitializeAsync(
            Microsoft.ApplicationInsights.WindowsCollectors.Metadata |
            Microsoft.ApplicationInsights.WindowsCollectors.Session);
            this.InitializeComponent();
            this.Suspending += OnSuspending;
        }

        /// <summary>
        /// Invoked when the application is launched normally by the end user.  Other entry points
        /// will be used such as when the application is launched to open a specific file.
        /// </summary>
        /// <param name="e">Details about the launch request and process.</param>
        protected override void OnLaunched(LaunchActivatedEventArgs e)
        {
#if DEBUG
            if (System.Diagnostics.Debugger.IsAttached)
            {
                this.DebugSettings.EnableFrameRateCounter = true;
            }
#endif

            Frame rootFrame = Window.Current.Content as Frame;

            // Do not repeat app initialization when the Window already has content,
            // just ensure that the window is active
            if (rootFrame == null)
            {
                // Create a Frame to act as the navigation context and navigate to the first page
                rootFrame = new Frame();
                // Set the default language
                rootFrame.Language = Windows.Globalization.ApplicationLanguages.Languages[0];

                rootFrame.NavigationFailed += OnNavigationFailed;

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

            if (rootFrame.Content == null)
            {
                // When the navigation stack isn't restored navigate to the first page,
                // configuring the new page by passing required information as a navigation
                // parameter
                rootFrame.Navigate(typeof(MainPage), e.Arguments);
            }
            // Ensure the current window is active
            Window.Current.Activate();
        }

        /// <summary>
        /// Invoked when Navigation to a certain page fails
        /// </summary>
        /// <param name="sender">The Frame which failed navigation</param>
        /// <param name="e">Details about the navigation failure</param>
        void OnNavigationFailed(object sender, NavigationFailedEventArgs e)
        {
            throw new Exception("Failed to load Page " + e.SourcePageType.FullName);
        }

        /// <summary>
        /// Invoked when application execution is being suspended.  Application state is saved
        /// without knowing whether the application will be terminated or resumed with the contents
        /// of memory still intact.
        /// </summary>
        /// <param name="sender">The source of the suspend request.</param>
        /// <param name="e">Details about the suspend request.</param>
        private void OnSuspending(object sender, SuspendingEventArgs e)
        {
            var deferral = e.SuspendingOperation.GetDeferral();
            // TODO: Save application state and stop any background activity
            deferral.Complete();
        }
    }
}

Référence