Apprendre à utiliser la barre de menus dans .NET MAUI

Aujourd’hui, dans nos explorations .NET MAUI, voyons comment utiliser l’un des principaux outils pour n’importe quelle application : une barre de menus !

Au quotidien, vous utilisez généralement des applications de bureau contenant une barre de menus qui propose un ensemble d’options pour exécuter certaines actions. C’est super utile pour vous en tant qu’utilisateur, et c’est pourquoi aujourd’hui nous allons apprendre à le faire dans .NET MAUI d’une manière très simple et rapide ! Voyons voir! 🤓

C’est un conteneur qui présente un ensemble de menus dans une rangée horizontale, en haut d’une application de bureau.

Avant d’apprendre à le faire dans le code, examinons un exemple général de ce à quoi pourraient ressembler les hiérarchies de barres de menus, que je vous montrerai ensuite comment construire étape par étape.

Dans l’exemple ci-dessus, vous pouvez voir une hiérarchie complète d’une barre de menus. Cependant, il est important de savoir que votre barre de menus ne doit pas nécessairement contenir ces éléments spécifiques – vous pouvez en ajouter autant que vous le souhaitez !

⚠ L’image de la barre de menus sur laquelle nous basons notre projet pour expliquer sa structure a été obtenue à partir du documents officiels.

Décomposons-le en étapes et apprenons à appliquer chacun des niveaux indiqués dans l’image précédente !

Pour démarrer l’implémentation d’une barre de menus, ajoutez les balises MenuBarItems à votre Page. Dans ce cas, nous utiliserons une ContentPage, comme indiqué ci-dessous :

<ContentPage.MenuBarItems>
  
</ContentPage.MenuBarItems>

⚠ Assurez-vous d’ouvrir et de fermer correctement les balises.

Maintenant, travaillons avec le MenuBarItem, qui est un objet qui représente les menus de niveau supérieur ajoutés à la barre de menus. Vous devez ajouter les balises qui le représentent à l’étape précédente. Je vais vous montrer comment le faire ci-dessous, mais commençons par comprendre de plus près sa structure visuelle et je veux souligner quelques points à considérer pour sa mise en œuvre.

➖ Comprendre sa structure visuelle.

Voyons les points à considérer pour sa mise en œuvre :

➖ Tout d’abord, vous devez savoir les propriétés que vous devez utiliser avec le MenuBarItemqui sont les suivantes :

🔹 Texte: Reçoit une valeur de chaîne et est le titre du menu.

🔹 Est autorisé: Reçoit une valeur booléenne et est chargé d’établir si le menu est activé ou non. Il vous suffit d’envoyer ce paramètre si vous souhaitez désactiver un menu. Sinon, ce n’est pas nécessaire car la valeur par défaut est True.

➖ Implémentation en code :

<MenuBarItem Text="File">
    <!-- Add here the explanation of the next step.-->
</MenuBarItem>
<!-- Add here all the MenuBarItem you need.-->

⚠ Attention :

• Ajoutez ces mêmes balises pour chaque menu dont vous avez besoin.
• Toutes ces propriétés sont BindableProperty, ce qui signifie qu’elles peuvent être des cibles de liaisons de données et stylisées.

MenuFlyoutSubItem vous permet d’imbriquer des éléments de menu à un second niveau de la hiérarchie des menus. Celui-ci reçoit un Texte, qui, comme à l’étape précédente, est le Titre du menu.

Pour identifier sa structure, voyons-la dans l’image suivante :

➖ Implémentation en code :

<MenuFlyoutSubItem Text="Change Location">
    <!-- Add here the explanation of the next step.-->
</MenuFlyoutSubItem>
<!-- Add here all the MenuFlyoutSubItem you need.-->

Enfin, nous arrivons au MenuFlyoutItem. Comme nous l’avons vu dans l’image de l’exemple de hiérarchie principale, cela nous permet d’ajouter des éléments à notre barre de menu à un troisième niveau (sous-menu), avant sa mise en œuvre. Regardons sa structure visuelle !

➖ Apprenez quelques-uns les propriétés que vous devez utiliser avec le MenuFlyoutItem:

🔹 Texte: Reçoit une valeur de chaîne et est le titre du menu.

🔹 Commande: Vous pouvez envoyer une commande afin qu’une fois que l’utilisateur clique sur l’action, celle-ci soit exécutée.

🔹 cliqué : Ou vous pouvez également ajouter un événement afin qu’une fois que l’utilisateur clique sur l’action, celle-ci soit exécutée.

➖ Implémentation en code :

<MenuFlyoutItem Text="Redmond, USA"
			    Command="{Binding YourCommand}"
			    CommandParameter="Redmond" />

<!-- Add here all the MenuFlyoutItem you need.-->

⚠ Chaque MenuFlyoutItem définit un élément de menu qui exécute une ICommand lorsqu’il est sélectionné.

Tous ensemble

Et.. Voila!! 🎊 Désormais, vous pouvez créer votre propre barre de menus !! 😍

Enfin, l’ensemble des étapes expliquées ci-dessus, résumées, devrait ressembler au bloc de code suivant :

<ContentPage ...>
  <ContentPage.MenuBarItems>
    <MenuBarItem Text="File">
    	    <MenuFlyoutSubItem Text="Change Location">    
		    <MenuFlyoutItem Text="Redmond, USA"		    
		    Command="{Binding YourCommand}"		    
		    CommandParameter="Redmond" />		    
		    <!-- Add here all the MenuFlyoutItem you need.-->	    
	    </MenuFlyoutSubItem>	    
	    <!-- Add here all the MenuFlyoutSubItem you need.-->    
    </MenuBarItem>
    <!-- Add here all the MenuBarItem you need.-->
  </ContentPage.MenuBarItems>
</ContentPage>

Avant de conclure

Découvrons certaines limitations de Mac Catalyst :

Les applications .NET MAUI Mac Catalyst sont limitées à 50 éléments de menu, donc si vous essayez d’en ajouter plus, votre application lèvera une exception.

La bonne nouvelle est qu’en implémentant le bloc de code que je vais vous donner ci-dessous, vous pouvez ajouter des éléments de menu supplémentaires aux 50 premiers autorisés. Pour cela, il vous suffit de coller le code suivant dans votre AppDelegate :

[Export("MenuItem50: ")]
internal void MenuItem50(UICommand uICommand)
{
    uICommand.SendClicked();
}

Et c’est tout! 😎

Conclusion

Nous sommes arrivés à la fin de cet article, j’espère qu’il vous a été très utile et qu’il vous a plu ! 💚💕

À plus tard! 🙋‍♀️

Références: https://docs.microsoft.com/en-us/dotnet/maui/user-interface/menubar