Naviguer vers une nouvelle page en .NET MAUI

Hé, mais te revoilà ! On en a maintenant fini avec le MVVM et crois-moi, tu viens de faire un grand pas en avant !

Aujourd’hui ce sera bien plus simple, on attaque la création de la page principale de l’application. Mais qui dit nouvelle page dit aussi: permettre à l’utilisateur de s’y rendre ! Voyons donc comment implémenter la navigation d’une page à une autre.

Naviguer vers une nouvelle page

Commençons déjà par ajouter notre nouvelle page. Pour cela, fais un clic droit sur le dossier Views pour ajouter un nouveau fichier, puis choisis le template “.NET MAUI ContentPage (C#)” comme ci-dessous. On va nommer ce fichier : MusicPlayerView.cs.

Comme tu l’auras remarqué, le template utilisé pour créer la page nous fournit un contenu par défaut. Il n’y a donc plus qu’à naviguer vers cette nouvelle page !

Pour cela, rends-toi dans le fichier HomeViewModel.cs et modifie la méthode Enter() de la façon suivante :

Nom du fichier :HomeViewModel.cs

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

using NightClub.Views; // Rappel: sans cette ligne, ça ne compilerait pas !

...

[RelayCommand]
async Task Enter()
{
    await Application.Current.MainPage.Navigation.PushAsync(
        new MusicPlayerView());
}

Tout ce qu’on fait ici, c’est accéder au service de navigation fourni par l’application pour afficher une nouvelle page de type MusicPlayerView.

En fait, lorsqu’on fait appel à la méthode PushAsync(), on ajoute la page MusicPlayerView tout en haut de la pile de pages déjà existantes, exactement comme sur le schéma ci-dessous:

On y est presque ! En effet pour que la navigation fonctionne, on a besoin que la première page affichée au démarrage soit englobée dans une NavigationPage.

Si tu retournes dans le fichier App.cs, il y a justement une méthode OnStart() qui est automatiquement exécutée à chaque fois que l’app est initialisée. Modifie donc cette méthode de sorte à définir HomeView comme la page racine de l’application, dans une NavigationPage:

Nom du fichier :App.cs

1
2
3
4
5
6
7
8

protected override void OnStart()
{
    base.OnStart();

    Console.WriteLine("[NightClub] App - OnStart");

    MainPage = new NavigationPage(new HomeView());
}

Voilà c’est bon, relance l’application et clique sur le bouton Enter !

Supprimer l’en-tête de navigation

Comme tu l’auras sûrement compris, notre page d’accueil est désormais contenue dans une page spécialement configurée pour la navigation. Elle contient donc par défaut une en-tête de navigation :

D’un point de vue design, ce n’est pas nécessairement ce que l’on souhaite. Voyons donc rapidement comment supprimer cette en-tête pour la page d’accueil. Rends-toi dans le fichier HomeView.cs et invoque la méthode SetHasNavigationBar() dans le constructeur de la page, comme ceci:

Nom du fichier :HomeView.cs

1
2
3
4
5
6
7
8
9

public HomeView()
{
	...
	BindingContext = new HomeViewModel();
	
	NavigationPage.SetHasNavigationBar(this, false);
	BackgroundColor = Colors.Black;
	...
}

Et maintenant, si tu relances l’app, c’est quand même plus joli !

L’application commence à prendre forme tout doucement, et d’autant plus avec le prochain chapitre ! On se revoit très bientôt pour l’élaboration de notre page principale.

Plus d’articles dans la même série:

Ma toute première app en .NET MAUI
Installation du projet .NET MAUI
Première exécution de l’app .NET MAUI
Le MVVM, pour une application réussie
Naviguer vers une nouvelle page en .NET MAUI
Agencer les éléments d'une page .NET MAUI
Affichage du lecteur MP3 - Durée d'écoute
Affichage du lecteur MP3 - Contrôles de lecture
Affichage du lecteur MP3 - Volume
Écouter de la musique en .NET MAUI avec MediaElement
Contrôler la tête de lecture avec MediaElement
Contrôler le volume avec MediaElement
Télécharger un fichier audio en .NET MAUI
Écouter une playlist avec MediaElement
Créer des animations avec .NET MAUI pour une ambiance disco