.net Maui Navigation Page Example

5 min read Jun 04, 2024

Naviguer entre les pages dans votre application .NET MAUI

.NET MAUI offre une variété de façons de naviguer entre les pages de votre application. L'une des méthodes les plus courantes est d'utiliser la classe Shell, qui vous permet de définir une structure de navigation hiérarchique.

Création d'une application Shell simple

Tout d'abord, créez un nouveau projet .NET MAUI. Vous pouvez utiliser Visual Studio ou Visual Studio Code pour cela. Une fois votre projet créé, vous pouvez ajouter une nouvelle page appelée HomePage.xaml et une autre page appelée AboutPage.xaml.

Configuration de la navigation avec Shell

Définition du fichier AppShell.xaml: Créez un nouveau fichier XAML nommé AppShell.xaml dans votre dossier App. Ce fichier servira à configurer la navigation de votre application.
Définition de la structure de navigation:
```
    
        

        
    
```
Ce code définit une structure de navigation avec deux pages : Home et About.
Configuration de l'application pour utiliser AppShell: Dans votre fichier App.xaml.cs, modifiez la propriété MainPage pour utiliser AppShell:
```
public App()
{
    InitializeComponent();

    MainPage = new AppShell();
}
```

Navigation entre les pages

Maintenant que vous avez défini votre structure de navigation, vous pouvez facilement naviguer entre les pages en utilisant le routeur.

Navigation vers la page About: Dans votre page HomePage.xaml.cs, vous pouvez ajouter un bouton qui redirige l'utilisateur vers la page About.
```
private void OnAboutButtonClicked(object sender, EventArgs e)
{
    Shell.Current.GoToAsync("//about");
}
```
Navigation vers la page Home: De même, vous pouvez ajouter un bouton sur la page About pour revenir à la page d'accueil.
```
private void OnHomeButtonClicked(object sender, EventArgs e)
{
    Shell.Current.GoToAsync("//home");
}
```

Astuces importantes

Vous pouvez utiliser le Shell.Current.GoToAsync() pour naviguer vers une page spécifique en utilisant son route.
La méthode GoToAsync permet d'effectuer des transitions animées entre les pages.
Vous pouvez ajouter des paramètres à la méthode GoToAsync pour passer des données entre les pages.
Vous pouvez également utiliser des Flyouts et des TabBars dans votre application Shell pour une meilleure expérience utilisateur.

Exemple complet

using YourProjectName;
using YourProjectName.ViewModels;

namespace YourProjectName
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            MainPage = new AppShell();
        }
    }
}

namespace YourProjectName
{
    public partial class AppShell : Shell
    {
        public AppShell()
        {
            InitializeComponent();
            Routing.RegisterRoute("home", typeof(HomePage));
            Routing.RegisterRoute("about", typeof(AboutPage));
        }
    }
}

Conclusion

Utiliser Shell pour gérer la navigation dans vos applications .NET MAUI vous permet de créer une expérience utilisateur fluide et cohérente. La simplicité de l'utilisation des routes et des ShellContent permet de simplifier la gestion de la navigation et de vous concentrer sur le développement de votre application.