Un exemple de menu déroulant dans .NET MAUI
Le menu déroulant, aussi appelé menu flyout, est un élément d'interface utilisateur commun dans les applications mobiles qui permet aux utilisateurs d'accéder à différentes options ou fonctionnalités. Dans .NET MAUI, vous pouvez facilement implémenter un menu déroulant en utilisant le contrôle Flyout.
Création d'un menu déroulant basique
using Microsoft.Maui;
using Microsoft.Maui.Controls;
namespace FlyoutMenuExample
{
public partial class App : Application
{
public App()
{
InitializeComponent();
// Créer un menu déroulant avec des options de base
var flyout = new FlyoutPage
{
Flyout = new ContentPage
{
Title = "Menu",
Content = new ListView
{
ItemsSource = new List { "Accueil", "Paramètres", "A propos" },
ItemTemplate = new DataTemplate(() => new Label { Text = "{Binding .}" })
}
},
Detail = new NavigationPage(new HomePage())
};
MainPage = flyout;
}
}
}
Ce code crée un menu déroulant basique avec trois options : "Accueil", "Paramètres" et "A propos". Chaque option est représentée par une étiquette (Label) dans une liste de vue (ListView).
Navigation avec le menu déroulant
Vous pouvez utiliser le menu déroulant pour naviguer entre différentes pages dans votre application. Pour cela, il vous suffit de définir le contenu de la page de détail (Detail) du FlyoutPage.
// Dans le code du menu déroulant (Flyout)
// Afficher la page "HomePage" par défaut
Detail = new NavigationPage(new HomePage());
// Dans la page "HomePage"
// Créer un bouton pour naviguer vers la page "SettingsPage"
Button settingsButton = new Button
{
Text = "Paramètres"
};
settingsButton.Clicked += (sender, args) =>
{
// Naviguer vers la page "SettingsPage"
Shell.Current.GoToAsync(nameof(SettingsPage));
};
// Ajouter le bouton à la page "HomePage"
Content = settingsButton;
Personnalisation du menu déroulant
Vous pouvez personnaliser l'apparence du menu déroulant en utilisant les propriétés suivantes:
- FlyoutBackground : Définit la couleur d'arrière-plan du menu.
- FlyoutDisplayMode: Définit le mode d'affichage du menu. Les options incluent "Push" (par défaut) et "Reveal".
- FlyoutHeader : Définit l'en-tête du menu.
// Personnaliser l'apparence du menu
Flyout = new ContentPage
{
Title = "Menu",
BackgroundColor = Colors.Blue,
FlyoutDisplayMode = FlyoutDisplayMode.Push
};
Conclusion
Le menu déroulant est un élément essentiel dans les applications mobiles. Avec .NET MAUI, vous pouvez facilement implémenter un menu déroulant et le personnaliser selon vos besoins. N'hésitez pas à expérimenter différentes options pour créer l'expérience utilisateur optimale pour votre application.