Dot.Blog

Alors que les layouts de MAUI offrent des fonctionnalités extrêmement utiles pour le développement d'interfaces graphiques, il est toujours bon d'avoir des options supplémentaires pour organiser les éléments à l'écran. Dans cet article, nous allons explorer le DockLayout, un layout fourni par le MAUI Community Toolkit.

Installation du MAUI Community Toolkit

Pour rappel, le MAUI Community Toolkit est une collection d'éléments réutilisables tels que des animations, des comportements, des convertisseurs, etc., pour le développement d'applications pour iOS, Android, macOS et WinUI en utilisant MAUI. Ajouter cette librairie à votre projet pour bénéficier de tout ce qu'elle peut vous offrir.

Qu'est-ce qu'un DockLayout ?

Le DockLayout est un layout qui permet d'ancrer des vues en haut, à gauche, à droite ou en bas du layout. C'est une façon de disposer les éléments très ancienne qu'on trouvait déjà dans Windows Forms ou dans Delphi, pas du neuf donc, mais de l'utile éprouvé par le temps ! Il offre une structure conceptuelle qui facilite l'organisation de vos éléments dans différentes positions prédéfinies.

Structure du DockLayout

Pour ajouter un DockLayout, vous devez ouvrir les balises <toolkit:DockLayout> </toolkit:DockLayout>, où "toolkit" est la définition de l'espace de noms. À l'intérieur de ces balises, ajoutez tous les éléments dont vous avez besoin, par exemple un bouton (ou d'autres conteneurs, c'est là que les choses deviennent plus intéressantes). Vous devez spécifier la position de ce bouton (ou autre objet visuel) dans le DockLayout en utilisant la propriété DockPosition, qui peut prendre les valeurs Up, Bottom, Left, Right ou None.

<Button toolkit:DockLayout.DockPosition="Top" Text="Top"/>

Propriétés du DockLayout

Le DockLayout a son propre ensemble de propriétés :

• HorizontalSpacing / VerticalSpacing : Permet d'ajuster l'espacement horizontal ou vertical respectivement entre les vues ancrées.

• ShouldExpandLastChild : Définir cette valeur sur true permet au dernier enfant de remplir tout l'espace restant et de s'étendre si nécessaire.

• Padding : Hérité de Layout, cette propriété donne accès au padding autour du conteneur de layout.

<toolkit:DockLayout HeightRequest="580" WidthRequest="620" Padding="20,25,10,15" VerticalSpacing="25" HorizontalSpacing="10" ShouldExpandLastChild="False">
  <!-- Votre code ici -->
</toolkit:DockLayout>

Conclusion

Le DockLayout est un outil puissant pour créer des interfaces utilisateur flexibles et organisées dans vos applications MAUI. Il offre une variété de propriétés qui vous permettent de personnaliser l'espacement, le padding et d'autres aspects de vos vues. Avec cette connaissance, vous êtes maintenant prêt à utiliser DockLayout dans vos applications MAUI.

Stay Tuned !