.net Maui Shell Navigation Example

4 min read Jun 04, 2024
.net Maui Shell Navigation Example

Navigation Shell dans .NET MAUI : Un exemple simple

L'architecture Shell dans .NET MAUI offre un moyen efficace et flexible de gérer la navigation dans votre application mobile. Elle permet de définir une structure de base pour votre application et de gérer facilement les transitions entre différentes pages.

Introduction à la navigation Shell

Le modèle Shell dans .NET MAUI repose sur le concept de "Flyout", qui est un menu latéral qui peut être utilisé pour accéder aux différentes sections de votre application. La navigation Shell est idéale pour les applications avec une structure complexe et plusieurs niveaux de navigation.

Exemple de Navigation Shell

Prenons un exemple simple d'une application avec deux pages principales : Accueil et Paramètres.

1. Créer le fichier Shell.xaml:



    
        

    
        
            
        

        
            
        
    


Dans cet exemple, nous définissons deux FlyoutItem qui correspondent à nos deux pages. Chaque FlyoutItem possède un titre, une icône et une route qui permet de l'identifier. Le ShellContent définit la page à afficher pour chaque item.

2. Créer les pages AccueilView et ParamètresView:

// AccueilView.xaml.cs
public partial class AccueilView : ContentPage
{
    public AccueilView()
    {
        InitializeComponent();
    }
}

// ParamètresView.xaml.cs
public partial class ParamètresView : ContentPage
{
    public ParamètresView()
    {
        InitializeComponent();
    }
}

Ces deux pages représentent les contenus qui seront affichés lorsque l'utilisateur sélectionne les items "Accueil" ou "Paramètres".

3. Configurer l'application:

Dans votre fichier App.xaml.cs, vous devez définir la page principale de votre application comme étant le Shell que vous venez de créer:

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

        MainPage = new AppShell(); // Définir la page principale comme étant Shell
    }
}

Conclusion

Ce simple exemple illustre la facilité d'utilisation de la navigation Shell dans .NET MAUI. Vous pouvez personnaliser davantage votre navigation Shell en ajoutant des tab-bar, des sous-menus, et en utilisant des commandes pour gérer des actions spécifiques.

N'hésitez pas à expérimenter et à explorer les différentes options offertes par la navigation Shell pour créer des applications mobiles riches et intuitives.

Related Post