Utiliser des pages à onglets avec des pages sur la pile de navigation

  • 5 minutes

La navigation par menu volant et la navigation à onglets ne sont que deux façons de permettre à un utilisateur de parcourir les données présentées par une application. Une autre technique consiste à utiliser la navigation sur pile. Chaque type de navigation est adapté à différents types de relations entre les pages.

Vous pouvez utiliser la navigation de pile en combinaison avec des menus volants et des onglets. Dans cette unité, nous examinons brièvement les différences entre la navigation par onglet et le menu volant et la navigation de pile, puis apprenons à créer des applications qui combinent les deux techniques.

Aperçu des menus volants et de la navigation par onglet

Les menus volants et la navigation par onglet fournissent un mécanisme utile qui permet à l’utilisateur de sélectionner la page à afficher à tout moment. L’utilisateur accède à une page en sélectionnant simplement l’onglet ou l’élément de menu volant approprié. Cette forme de navigation est utile pour les éléments de données qui ont une relation de pairs entre eux. Dans l’application d’astronomie, les pages Soleil, Lune et À propos sont toutes des pairs. Il n’y a pas de relation directe entre elles.

Toutefois, pour les données hiérarchiques, la navigation de pile peut être plus appropriée. La navigation sur pile permet à l’utilisateur d’explorer une série de pages, où la page suivante de la pile fournit une vue plus détaillée d’un élément sélectionné dans la page précédente.

Examinez le cas suivant :

Vous ajoutez une nouvelle page à l’application d’astronomie qui affiche des corps célestes. Vous souhaitez que l’utilisateur appuie sur l’un de ces objets célestes, puis affiche des informations à son sujet. La meilleure présentation de la page listant les corps célestes serait dans une page d’onglets comme un jumeau des pages des phases de la lune et du lever du soleil. Les informations détaillées sur le corps céleste sont mieux présentées sous la forme d’une série d’étapes utilisant la navigation sur pile. Ce mécanisme permet également à l’utilisateur de revenir à la page principale des corps astronomiques en appuyant sur un bouton Précédent.

Le Shell .NET MAUI inclut une expérience de navigation basée sur l’URI qui utilise des routes pour accéder à n’importe quelle page de l’application, sans avoir à suivre une hiérarchie de navigation définie. En outre, il vous permet de naviguer vers l’arrière sans avoir à visiter toutes les pages de la pile de navigation.

La classe Shell définit les propriétés de navigation suivantes :

  • BackButtonBehavior, de type BackButtonBehavior : une propriété qui définit le comportement du bouton Précédent.
  • CurrentItem, de type ShellItem : l’élément actuellement sélectionné.
  • CurrentPage, de type Page : la page actuellement présentée.
  • CurrentState, de type ShellNavigationState : l’état actuel de la navigation de l’élément Shell.
  • Current, de type Shell : un alias converti pour Application.Current.MainPage.

La navigation est effectuée en appelant la méthode GoToAsync à partir de la classe Shell.

Itinéraires

La navigation est effectuée dans une application Shell en spécifiant un URI auquel accéder. Les URI de navigation peuvent avoir trois composants :

  • Un itinéraire, qui définit le chemin d’accès au contenu existant dans le cadre de la hiérarchie visuelle Shell.
  • Une page. Les pages qui n’existent pas dans la hiérarchie visuelle Shell peuvent être envoyées (par push) sur la pile de navigation à partir de n’importe où dans une application Shell. Par exemple, une page de détails n’est pas définie dans la hiérarchie visuelle Shell, mais peut être envoyée (push) sur la pile de navigation en fonction des besoins.
  • Un ou plusieurs paramètres de requête. Les paramètres de requête sont des paramètres qui peuvent être transmis à la page de destination lors de la navigation.

Lorsqu’un URI de navigation comprend les trois composants, la structure est : //route/page?queryParameters

Inscrire des itinéraires

Les routes peuvent être définies sur les objets FlyoutItem, TabBar, Tab et ShellContent via leurs propriétés Route :

<Shell ...>
    <FlyoutItem ... 
        Route = "astronomy">
        <ShellContent ...
            Route="moonphase" />
        <ShellContent ...
            Route="sunrise" />
    </FlyoutItem>
    <FlyoutItem>
        <ShellContent ...
            Route="about" />
    </FlyoutItem>
</Shell>

Pour accéder à la route moonphase, l’URI de route absolu est //astronomy/moonphase

Inscrire des routes détaillées

Dans le Shellconstructeur de sous-classe ou tout autre emplacement qui s’exécute avant l’appel d’un itinéraire, vous pouvez inscrire explicitement un itinéraire à l’aide de la méthode Routing.RegisterRoute pour toutes les pages de détails qui ne sont pas représentées dans la hiérarchie visuelle Shell.

Routing.RegisterRoute("astronomicalbodydetails", typeof(AstronomicalBodyPage));

Pour accéder au AstronomicalBodyPage, vous devez ensuite appeler :

await Shell.Current.GoToAsync("astronomicalbodydetails");`

Navigation vers l’arrière

La navigation vers l’arrière peut être effectuée en spécifiant « .. » comme argument de la méthode GoToAsync :

await Shell.Current.GoToAsync("..");

Passage de données

Les données primitives peuvent être passées en tant que paramètres de requête basés sur une chaîne lors de l’exécution d’une navigation par programmation basée sur un URI. Transmettez les données en ajoutant ? après un itinéraire, suivi d’un ID de paramètre de requête, de =et d’une valeur :

string celestialName = "moon";

await Shell.Current.GoToAsync($"astronomicalbodydetails?bodyName={celestialName}");

Dans cet exemple, la route est astronombodydetails, le paramètre est bodyName et la valeur provient de la variable celestialName.

Extraction de données

Des données de navigation peuvent être reçues en décorant la classe de réception avec un QueryPropertyAttribute pour chaque paramètre de requête basé sur une chaîne et chaque paramètre de navigation basé sur un objet :

[QueryProperty(nameof(AstroName), "bodyName")]
public partial class AstronomicalBodyPage : ContentPage
{
    string astroName;
    public string AstroName
    {
        get => astroName;
        set
        {
            astroName = value;
        }
    }

    ...
}

Dans cet exemple, le premier argument de QueryPropertyAttribute spécifie le nom de la propriété qui reçoit les données, avec le deuxième argument spécifiant l’ID de paramètre.

Vérifiez vos connaissances

1.

Comment envoyer des données à une page lors de l’utilisation de la navigation de l’interpréteur de commandes .NET MAUI basée sur la route ?