.net Maui Flyout Page Example

4 min read Jun 04, 2024

Découvrez les pages Flyout dans .NET MAUI : Un exemple pratique

.NET MAUI offre une variété de composants d'interface utilisateur pour créer des applications mobiles attrayantes et fonctionnelles. Parmi ces composants, les pages Flyout sont un moyen élégant d'afficher des menus et des options supplémentaires, souvent utilisés pour la navigation et les paramètres de l'application.

Qu'est-ce qu'une page Flyout ?

Une page Flyout est un menu qui apparaît généralement en glissant depuis le bord de l'écran. Elle est souvent utilisée pour fournir une navigation supplémentaire ou des options de configuration à l'utilisateur. Dans .NET MAUI, les pages Flyout sont gérées par le composant FlyoutPage.

Un exemple simple de page Flyout

Voici un exemple de code pour créer une page Flyout simple avec deux pages : une page principale et une page de paramètres.

using Microsoft.Maui.Controls;
using System;

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

            // Créer une nouvelle page Flyout
            var flyoutPage = new FlyoutPage();

            // Définir la page principale
            flyoutPage.Detail = new MainPage();

            // Définir la page Flyout
            flyoutPage.Flyout = new MenuPage();

            // Afficher la page Flyout
            MainPage = flyoutPage;
        }
    }

    // Page principale
    public class MainPage : ContentPage
    {
        public MainPage()
        {
            Content = new Label { Text = "Page principale" };
        }
    }

    // Page Flyout
    public class MenuPage : ContentPage
    {
        public MenuPage()
        {
            Content = new Label { Text = "Page de paramètres" };
        }
    }
}

Explication du code

Nous créons une nouvelle instance de FlyoutPage et définissons ses propriétés.
Detail représente la page principale de l'application, dans notre exemple, c'est MainPage.
Flyout représente la page qui sera affichée lorsque l'utilisateur ouvre le menu Flyout, dans notre exemple, c'est MenuPage.
Nous définissons ensuite MainPage de l'application pour être la page Flyout créée.

Conclusion

L'utilisation des pages Flyout dans .NET MAUI permet de créer des interfaces utilisateur plus conviviales et flexibles. L'exemple ci-dessus montre comment créer une page Flyout simple, mais vous pouvez l'adapter et l'étendre pour répondre aux besoins spécifiques de votre application.

N'oubliez pas d'expérimenter et d'explorer les options disponibles pour les pages Flyout dans la documentation officielle de .NET MAUI. Vous pouvez également consulter d'autres exemples en ligne pour trouver des solutions plus avancées.

Mots-clés : .NET MAUI, page Flyout, exemple, interface utilisateur, navigation