UniformItemsLayout de la boîte à outils de la communauté .NET MAUI

La boîte à outils de la communauté .NET MAUI propose certaines présentations d’interface utilisateur. Découvrons UniformItemsLayout et comment l’implémenter.

Les mises en page sont des classes qui facilitent la disposition et le regroupement des composants de l’interface utilisateur à l’écran. Les mises en page natives .NET MAUI incluent StackLayout, AbsoluteLayout, Grid et FlexLayout. La boîte à outils communautaire .NET MAUI propose des mises en page supplémentaires pour une plus grande variété de conception dans nos applications.

Dans cet article, nous explorerons certaines de ces mises en page, en nous concentrant sur UniformItemsLayout et en démontrant sa mise en œuvre facile. Voyons!

🧠 La boîte à outils communautaire .NET MAUI est une collection organisée de composants réutilisables soigneusement développés par la communauté. Il englobe une gamme d’éléments tels que des animations, des convertisseurs et des comportements, tous conçus pour accélérer le développement d’applications. De plus, il garantit une compatibilité transparente entre iOS, Android, macOS et WinUI, tout cela grâce à la puissance de MAUI.

J’en ai écrit davantage ci-dessous.

La configuration initiale

Pour mettre en œuvre correctement le UniformItemsLayout, assurez-vous que le kit d’outils communautaires .NET MAUI est correctement configuré dans votre application. Sa configuration est simple, comme indiqué dans les étapes ci-dessous :

1. Installation: Tout d’abord, assurez-vous d’installer la boîte à outils en ajoutant le package Community.Toolkit.Maui NuGet.

2. Configuration dans MauiProgram.cs : Après avoir ajouté le package NuGet, accédez à MauiProgram.cs. Juste en dessous UseMauiApp<App>()ajouter :

.UseMauiCommunityToolkit()

3. Ajout d’espace de noms : Incluez l’espace de noms du kit d’outils dans votre page :

xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

Qu’est-ce que la disposition UniformItemsLayout ?

UniformItemsLayout est une mise en page de la boîte à outils communautaire .NET MAUI. Il maintient la taille cohérente pour tous les composants de chaque ligne et colonne.

Explorer la structure de mise en page

Comprenons l’image : Pour ajouter la mise en page, vous devez garder à l’esprit les éléments suivants :

➖ Étape 1: Vous devez ouvrir/fermer le <toolkit:UniformItemsLayout> </toolkit:UniformItemsLayout> balises respectivement, où « boîte à outils » est la définition de l’espace de noms.

➖ Étape 2: Enfin, au sein de ces balises, ajoutez tous les éléments visuels dont vous avez besoin. Par exemple, un Button.

Comment ça marche?

Cette disposition vous permet de spécifier le nombre maximum de lignes et de colonnes dans lesquelles les éléments peuvent être disposés. Cela se fait en utilisant les propriétés suivantes :

• Colonne maximale : Cette propriété accepte une valeur entière et définit le nombre maximum de colonnes pour votre mise en page.
• Lignes maximales : Cette propriété accepte également une valeur entière et définit le nombre maximum de lignes pour votre mise en page.

Voyons un exemple de code :

<toolkit:UniformItemsLayout MaxRows="2" MaxColumns="2" Padding="30,0" VerticalOptions="Center">
	<Button BackgroundColor="DeepPink" HeightRequest="70"/>
	<Button BackgroundColor="HotPink" HeightRequest="70"/>
	<Button BackgroundColor="LightPink" HeightRequest="70"/>
	<Button BackgroundColor="Pink" HeightRequest="70"/>
</toolkit:UniformItemsLayout>

Vous devriez vous attendre à un résultat similaire à celui présenté ci-dessous :

Que se passe-t-il si je ne spécifie pas les propriétés MaxColumn et MaxRows ?

Bien que l’ajout de ces propriétés ne soit pas obligatoire, ne pas les spécifier entraîne la division automatique du contenu au sein de la mise en page. Cette division est basée sur le nombre nécessaire de lignes et de colonnes en fonction des éléments de la mise en page.

💡 Si on utilise le même code que dans l’exemple précédent, mais sans préciser le nombre maximum de lignes et de colonnes, le résultat serait le suivant :

🚫 Limites

• Lorsque vous définissez le nombre maximum de lignes ou de colonnes, soyez attentif. S’il y a plus d’éléments que le maximum attribué, les éléments en excès ne seront pas affichés à l’écran.

Conclusion

Et.. Voila! De cette manière simple et rapide, vous pouvez commencer à utiliser UniformItemsLayout de .NET MAUI Community Toolkit dans votre utilisation quotidienne et continuer à en explorer d’autres ! 💚💕

À la prochaine! 💁‍♀️

Les références

Cet article était basé sur la documentation officielle :