Langage: HTML | XAML

Démarrage rapide : navigation entre les pages (XAML)

Cette rubrique présente les concepts de navigation de base et montre comment créer une application qui navigue entre deux pages.

Pour vous aider à choisir le meilleur modèle de navigation pour votre application, voir Modèles de navigation.

Voir le modèle de navigation plat et le modèle de navigation hiérarchique en action dans le cadre de notre série Fonctionnalités d’application de A à Z.

Feuille de route : comment cette rubrique s’articule-t-elle par rapport aux autres ? Voir :

Au même titre que vous parcourez les différentes pages d’un site Web, vous pouvez créer plusieurs pages pour votre application et permettre à l’utilisateur de naviguer entre les pages de l’application. Microsoft Visual Studio propose des modèles de pages qui prennent en charge la navigation de base pour les applications Windows Runtime en C# ou Microsoft Visual Basic. Dans cette rubrique, nous utilisons les modèles de page pour créer une application simple qui prend en charge la navigation.

Remarque  

Lorsque nous évoquons la navigation pour les applications Windows Runtime, nous parlons de la navigation entre les pages d’une même application, et non de la navigation entre applications.

Prérequis

Cette rubrique suppose que vous savez créer une application Windows Runtime de base en C# ou Visual Basic. Pour obtenir des instructions sur la création de votre première application Windows Runtime, voir Créer votre première application Windows Runtime en C# ou Visual Basic.

Création de l’application de navigation

Hh771188.wedge(fr-fr,WIN.10).gifCréation de l’application vide

  1. Dans le menu Visual Studio, choisissez Fichier > Nouveau Projet.
  2. Dans le volet gauche de la boîte de dialogue Nouveau Projet, choisissez le nœud Visual C#, Visual Basic ou Visual C++.
  3. Dans le volet central, choisissez Application vide.
  4. Dans la zone Nom, entrez BlankApp, puis cliquez sur le bouton OK.

    La solution est créée et les fichiers du projet apparaissent dans l’Explorateur de solutions. Pour plus d’informations sur les fichiers de projet, voir Modèles de projets C#, VB, et C++ pour les applications du Windows Store.

    Important  Lorsque vous exécutez Visual Studio pour la première fois, vous êtes invité à vous procurer une licence de développeur. Pour plus d’informations, voir Obtenir une licence de développeur.
  5. Pour exécuter le programme, dans le menu Visual Studio, choisissez Déboguer > Démarrer le débogage, ou appuyez sur F5.

    Une page vide s’affiche.

  6. Appuyez sur Maj+F5 pour interrompre le débogage et revenir à Visual Studio.

Ensuite, ajoutez deux pages au projet. Il s’agit des pages entre lesquelles nous allons naviguer. Effectuez les étapes suivantes deux fois de suite pour ajouter les deux pages.

Hh771188.wedge(fr-fr,WIN.10).gifAjout de la page de base

  1. Dans l’Explorateur de solutions, ouvrez le menu contextuel du nœud de projet BlankApp, puis cliquez sur Ajouter > Nouvel élément.
  2. Dans la boîte de dialogue Ajouter un nouvel élément, choisissez Page vide dans le volet du milieu.
  3. Dans la zone Nom, entrez page1 (ou page2), puis cliquez sur le bouton Ajouter.

Après avoir effectué les étapes précédentes à deux reprises, votre projet doit compter les fichiers suivants.

  • BasicPage1.xaml
  • BasicPage1.xaml.cs ou BasicPage1.xaml.vb
  • BasicPage2.xaml
  • BasicPage2.xaml.cs ou BasicPage2.xaml.vb

Nous allons à présent utiliser les pages que nous avons ajoutées dans l’application. Apportez les modifications suivantes à BasicPage1.xaml.

  • Recherchez l’élément TextBlock nommé pageTitle et affectez la valeur Page 1 à la propriété Text. Le code XAML doit ressembler à ceci ("..." représente d’autres attributs que vous ne modifiez pas) :

    
    
    <TextBlock x:Name="pageTitle" Text="Page 1" .../>
    
    
  • Ajoutez le code XAML suivant en tant que second élément enfant à l’objet Grid racine. L’élément StackPanel doit être frère de l’objet Grid qui contient le bouton Précédent et le titre de la page.

    
    <StackPanel Grid.Row="1"
                Margin="120,0,120,60">
        <HyperlinkButton Content="Click to go to page 2" Click="HyperlinkButton_Click"/>
    </StackPanel>
    
    

Apportez les modifications suivantes à BasicPage2.xaml.

  • Recherchez l’élément TextBlock nommé pageTitle et affectez la valeur Page 2 à la propriété Text. Le code XAML doit ressembler à ceci :

    
    
    <TextBlock x:Name="pageTitle" Grid.Column="1" Text="Page 2" 
               Style="{StaticResource PageHeaderTextStyle}"/>
    
    
  • Ajoutez le code XAML suivant en tant que second élément enfant à l’objet Grid racine. L’élément StackPanel doit être frère de l’objet Grid qui contient le bouton Précédent et le titre de la page.

    
    <StackPanel Grid.Row="1"
                Margin="120,0,120,60">
        <TextBlock HorizontalAlignment="Left" Name="tb1" Text="Hello World!"/>
    </StackPanel>
    
    

Ajoutez le code suivant à la classe BasicPage1 dans BasicPage1.xaml.cs ou BasicPage1.xaml.vb.


Private Sub HyperlinkButton_Click(sender As Object, e As RoutedEventArgs)
	Me.Frame.Navigate(GetType(BasicPage2))
End Sub	

À présent que nous avons préparé les nouvelles pages, nous devons faire en sorte que BasicPage1 soit la première chose qui apparaisse quand l’application démarre. Ouvrez app.xaml.cs/vb et modifiez la méthode OnLaunched pour appeler Frame.Navigate en utilisant BasicPage1 au lieu de BlankPage. La ligne de code appropriée se présente ainsi :


    If Not rootFrame.Navigate(GetType(BasicPage1), e.Arguments) Then
...

Remarque  Le code ici utilise la valeur de retour de Navigate pour lever une exception d’application en cas d’échec de la navigation vers la fenêtre initiale de l’application. Quand Navigate retourne true, la navigation se déroule.

Vous pouvez désormais tester l’application. Démarrez l’application, puis cliquez sur le lien qui indique Click to go to page 2. La deuxième page doit apparaître avec l’indication « Page 2 » dans la partie supérieure. Dans une application du Windows Store, notez la présence d’un bouton Précédent à gauche du titre de la page. Cliquez sur le bouton pour revenir à la première page. Dans une application Windows Phone Store, cliquez sur le bouton Précédent du téléphone pour revenir à la première page.

Classes Frame et Page

Avant d’ajouter d’autres fonctionnalités à notre application, examinons la façon dont les pages que nous venons d’ajouter prennent en charge la navigation dans l’application.

Le fichier App.xaml.cs/vb/cpp crée un objet Frame s’il n’en existe pas déjà un, et fait de Frame le contenu de la fenêtre active. Si le contenu du cadre est null, l’application navigue vers la page d’accueil comme spécifié dans le code-behind App.xaml. Par exemple, dans l’application Grille, le code est rootFrame.Navigate(typeof(GroupedItemsPage), "AllGroups") ).

La classe Frame est essentiellement responsable de la navigation et implémente des méthodes telles que Navigate, GoBack et GoForward. Vous utilisez la méthode Navigate pour afficher le contenu dans Frame. Dans l’exemple précédent, la méthode App.OnLaunched crée un Frame et passe BasicPage1 à la méthode Navigate. Ensuite, la méthode attribue Frame au contenu de la fenêtre active de l’application. Au final, la fenêtre de l’application contient un objet Frame qui contient BasicPage1.

BasicPage1 est une sous-classe de la classe Page. La classe Page possède une propriété Frame, propriété en lecture seule qui obtient l’objet Frame contenant l’objet Page. Lorsque le gestionnaire d’événements Click de l’objet HyperlinkButton appelle Frame.Navigate(typeof(BasicPage2)), l’objet Frame dans la fenêtre de l’application affiche le contenu de BasicPage2.

SuspensionManager

Important  

La classe d’assistance SuspensionManager est fournie dans les modèles de projets suivants :

Applications WindowsApplication de concentrateur, Application grille, Application partagée
Applications Windows PhoneApplication de concentrateur, Application Pivot
Applications universellesApplication de concentrateur

 

La classe d’assistance SuspensionManager n’est pas fournie dans les modèles Application vide.

Au cours de l’installation, SuspensionManager enregistre Frame. SuspensionManager est une classe d’assistance fournie dans le dossier Commun du modèle et qui fournit l’implémentation utilisée pour stocker et charger l’état lorsque l’application est interrompue.

Toutes les applications parcourent un cycle de vie d’application que contrôle le système d’exploitation. Lorsqu’une application est interrompue par le système pour des raisons telles que des contraintes de ressource, l’arrêt, le redémarrage, etc., votre rôle de développeur consiste à restaurer les données lors de la reprise de l’application. SuspensionManager est fourni pour vous aider dans cette tâche.

SuspensionManager capture l’état de session globale pour simplifier la gestion de la durée de vie des processus pour une application. L’état de session est automatiquement effacé selon un certain nombre de conditions et ne doit servir qu’à stocker des informations qu’il est souhaitable de partager entre des sessions mais qu’il est nécessaire d’effacer lorsque l’application cesse de réponse ou est mise à jour. Il s’agit essentiellement des données éphémères de l’interface utilisateur.

SuspensionManager Deux propriétés : SessionState et KnownTypes.

  • SessionState fournit un accès à l’état de session globale pour la session active. Cet état est sérialisé par la méthode SaveAsync et restauré par la méthode RestoreAsync. Toutes les données sont enregistrées et restaurées à l’aide de DataContractSerialization et doivent être aussi compactes que possible. Les chaînes et d’autres types de données autonomes sont fortement recommandés.
  • KnownTypes stocke une liste des types personnalisés fournis au DataContractSerializer utilisé par les méthodes SaveAsync et RestoreAsync lors de la lecture et de l’écriture de l’état de session. D’autres types, initialement vides, peuvent être ajoutés pour personnaliser le processus de sérialisation.

SuspensionManager enregistre l’état dans un dictionnaire, SessionState. Le dictionnaire stocke FrameState correspondant à une clé qui partage une liaison unique à Frame. Chaque dictionnaire FrameState contient l’état de chaque page dans l’état de navigation pour cette trame particulière. Chaque page stocke le paramètre de navigation ainsi que tout autre état que l’utilisateur choisit d’ajouter.

En voici le fonctionnement : lorsque Frame est créé, pour stocker l’état de cette trame, il est nécessaire de l’enregistrer immédiatement. L’appel suivant (SuspensionManager.RegisterFrame(rootFrame, "AppFrame")) permet d’effectuer cette opération. Chaque trame doit avoir une clé unique qui lui est associée. Généralement, la plupart des applications ne possèdent qu’une seule trame. Si vous déclarez une deuxième trame, celle-ci doit également être enregistrée. Lorsqu’une trame est enregistrée, deux propriétés jointes sont définies sur la trame. La première est la clé que vous avez associée à la trame, et la deuxième est le dictionnaire de l’état de session qui sera associé à la trame. Les trames enregistrées précédemment verront la restauration immédiate de leur navigation et de leur état. Il est aussi possible d’annuler l’enregistrement des trames ; l’ensemble de l’historique et de l’état de navigation sera supprimé.

Pour les appels importants : SaveAsync et RestoreAsync. SaveAsync permet d’enregistrer l’intégralité de SessionState. Toutes les trames via SuspensionManager.RegisterFrame conserveront aussi leur pile de navigation actuelle qui permet à son tour à leur page active d’enregistrer ses données. SessionState est ensuite sérialisé à l’aide de DataContractSerializer et écrit dans un fichier stocké dans le dossier local défini par ApplicationData.

RestoreAsync permet de lire dans le SessionState enregistré précédemment. Toutes les trames enregistrées via RegisterFrame pourront également restaurer leur état de navigation précédent, ce qui permettra à leur page active d’enregistrer son état. Comme dans SaveAsync, DataContractSerializer est utilisé pour désérialiser l’état stocké dans un fichier dans le dossier local de l’application.

Les utilisateurs rencontrent deux erreurs communes lorsqu’ils tentent de stocker l’état de leur application.

  • Les types stockés par des pages individuelles doivent pouvoir être sérialisés par DataContractSerializer en C# et VB. Pour ce faire, un type personnalisé doit être inscrit avant de pouvoir être enregistré ou restauré. SuspensionManager fournit la collection KnownTypes qui passe les types dans la collection au DataContractSerializer. Lorsque SuspensionManager est appelé pour restaurer l’état dans la substitution OnLaunched du code-behind pour App.xaml, le constructeur d’application constitue un bon endroit pour enregistrer des types.
    
            public App()
            {
                this.InitializeComponent();
                this.Suspending += OnSuspending;
                SuspensionManager.KnownTypes.Add(typeof(MyCustomType));
            }
    
    
    
  • Les paramètres passés dans la navigation doivent pouvoir être sérialisés par la plate-forme. Lors de l’enregistrement et de la restauration de la pile de navigation, Frame.GetNavigationState() et Frame.SetNavigationState() sont appelés. Ces deux appels utilisent un format de sérialisation interne et tous les types passés comme paramètre dans Frame.Navigate() doivent pouvoir être sérialisés par la plateforme.
L’utilisation de SuspensionManager est encapsulée dans l’implémentation de NavigationHelper.

NavigationHelper est une implémentation d’une page qui fournit les avantages suivants :

  • Gestionnaires d’événements pour Navigate, GoBack et GoForward.
  • Raccourcis clavier et souris pour la navigation.
  • Gestion de l’état pour la navigation et gestion de la durée de vie des processus.

En plus de fournir les implémentations décrites, NavigationHelper doit également être appelé à partir des gestionnaires d’événements OnNavigatedTo() et OnNavigatedFrom() qui sont implémentés sur chaque page. Quand ces événements se produisent, NavigationHelper appelle une implémentation de LoadState() et SaveState() spécifique à chaque page. Vous pouvez personnaliser l’implémentation de ces fonctions sur chaque page. Elles doivent être utilisées respectivement à la place de OnNavigatedTo() et OnNavigatedFrom().

Remarque  Dans les applications du Windows Phone Store, l’élément OnNavigatedFrom() est appelé lorsque l’application est suspendue. L’élément OnNavigatedTo() n’est pas appelé lorsque l’application reprend son exécution.

OnNavigatedFrom() est appelé quand la page est sur le point d’être affichée dans une classe Frame. Lorsque vous naviguez vers une nouvelle page, l’état associé à la page est chargé. Si la page est en cours de restauration, l’état précédemment enregistré pour la page est restauré. LoadState est ensuite appelé pour que chaque page puisse réagir. LoadState comporte deux paramètres ; le paramètre de navigation d’origine passé dans OnNavigatedTo et l’état précédent de la page, s’il existe.

L’événement OnNavigatedFrom() est appelé quand la page n’est plus affichée dans une classe Frame. Quand la navigation quitte une page, cette page doit pouvoir enregistrer son état en cours. Un dictionnaire vide est passé dans SaveState(). Chaque page peut substituer SaveState et stocker des objets dans le dictionnaire à clé (chaîne à objet). Ce dictionnaire est ensuite associé à la page et ajouté à SessionState dont SuspensionManager assure le suivi pour la trame donnée.

Remarque  
  • Toutes les données stockées dans la page individuelle doivent être disponibles pour être sérialisées par DataContractSerializer.
  • Il est aussi important de stocker uniquement les informations éphémères de l’interface utilisateur à cet emplacement car cet état sera perdu si l’application est fermée par tout moyen autre que Terminated.

Prise en charge de la navigation dans les modèles de page

Lorsque nous avons créé les pages de navigation, nous avons utilisé le modèle Page de base. Ce modèle, ainsi que d’autres qui prennent en charge la navigation, crée une page qui fournit un bouton Précédent dans le coin supérieur gauche de la page. De par le style appliqué au bouton, ce dernier est uniquement visible lorsque le bouton est activé. C’est pourquoi vous ne voyez pas le bouton Précédent sur la première page, alors qu’il est visible sur la deuxième page.

Les modèles de page suivants offrent la même prise en charge de la navigation.

  • Page de base
  • Page Détail du groupe
  • Page Éléments groupés
  • Page Détail de l’élément
  • Page Éléments
  • Page fractionnée
  • Page Hub
  • Page Résultats de la recherche

Passage d’informations entre les pages

Notre application navigue entre deux pages, mais elle n’effectue pour le moment rien d’intéressant. Souvent, lorsqu’une application possède plusieurs pages, celles-ci doivent partager des informations. Passons des informations de la première page à la deuxième page.

Dans BasicPage1.xaml, remplacez l’objet StackPanel que vous avez ajouté précédemment par le code XAML suivant.


<StackPanel Grid.Row="1"
    Margin="120,0,120,60">
    <TextBlock Text="Enter your name"/>
    <TextBox Width="200" HorizontalAlignment="Left" Name="tb1"/>
    <HyperlinkButton Content="Click to go to page 2" Click="HyperlinkButton_Click"/>
</StackPanel>


Dans BasicPage1.xaml.cs ou BasicPage1.xaml.vb, remplacez le gestionnaire d’événements HyperlinkButton_Click par le code suivant.


    Private Sub HyperlinkButton_Click(sender As Object, e As RoutedEventArgs)

        Me.Frame.Navigate(GetType(BasicPage2), tb1.Text)

    End Sub
	

Dans BasicPage2.xaml.cs ou BasicPage2.xaml.vb, renseignez la méthode navigationHelper_LoadState vide avec le code suivant :


    Private Sub navigationHelper_LoadState((e As NavigationHelper.LoadStateEventArgs)
        Dim name As String = TryCast(e.NavigationParameter, String)
        If Not String.IsNullOrWhiteSpace(name) Then
            tb1.Text = "Hello, " & name
        Else
            tb1.Text = "Name is required.  Go back and enter a name."
        End If
    End Sub

Exécutez l’application, tapez votre nom dans la zone de texte, puis cliquez sur le lien indiquant Click to go to page 2. Lorsque vous appelez this.Frame.Navigate(typeof(BasicPage2), tb1.Text); dans l’événement Click de l’objet HyperlinkButton, la propriété tb1.Text est passée lorsque BasicPage2 se charge. Ensuite, la méthode navigationHelper_LoadState de BlankPage2 obtient la valeur des données d’événement et l’utilise pour afficher un message.

Mise en cache d’une page

Dans le dernier exemple, vous avez peut-être remarqué que si vous cliquez sur le bouton Précédent sur BasicPage2, l’élément TextBox sur BasicPage1 est vide au moment de l’affichage. Supposons que l’utilisateur de l’application souhaite revenir en arrière et apporter une modification sur la page précédente. Si BasicPage1 comprend de nombreux champs à remplir, l’utilisateur peut être déçu s’il constate que les champs sont réinitialisés quand l’application revient à cette page. Vous pouvez spécifier la mise en cache d’une page à l’aide de la propriété NavigationCacheMode. Dans le constructeur de BasicPage1, attribuez à NavigationCacheMode la valeur Enabled.


Sub New()
    InitializeComponent()
    ...
    Me.NavigationCacheMode = Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled
End Sub


À présent, lorsque vous exécutez l’application et que vous passez de BasicPage2 à BasicPage1, l’élément TextBox sur BasicPage1 conserve sa valeur.

Récapitulatif

Dans cette rubrique, vous avez appris à créer une application simple qui navigue entre les pages. Vous avez aussi découvert comment passer des informations d’une page à une autre et comment spécifier la mise en cache de l’état d’une page.

Étapes suivantes

Pour obtenir un exemple complet qui utilise un grand nombre des fonctionnalités Page et Frame ensemble, voir Exemple de navigation XAML. L’exemple comprend des fonctionnalités non abordées ici, notamment :

Rubriques associées

Navigation entre les pages
Pour les concepteurs
Modèles de navigation
Modèles de commandes
Disposition
Bouton Précédent
Recommandations en matière de contrôle Hub
Recommandations en matière de barres d’application (applications Windows Runtime)
Rendre la barre de l’application accessible
Pour les développeurs (XAML)
Windows.UI.Xaml.Controls Hub class
Windows.UI.Xaml.Controls AppBar class
Windows.UI.Xaml.Controls CommandBar class
Votre première application - Troisième partie : navigation, disposition et vues
Votre première application - Ajouter une navigation et des vues à une application du Windows Store en C+ (didacticiel 3 sur 4)
Exemple de contrôle Hub XAML
Exemple de contrôle AppBar XAML
Exemple de navigation XAML
Ajout de barres d’application (XAML)

 

 

Afficher:
© 2015 Microsoft