Exploration de la nouvelle structure de grille dans Xamarin Forms

En savoir plus sur l'utilisation de la nouvelle structure de grille simplifiée dans Xamarin Forms.

Salut !!! ?‍♀ C’est un plaisir de vous avoir ici toujours en train d’apprendre de nouvelles choses! J'espère que vous êtes toujours en sécurité chez vous en cette période de pandémie. ?

Dans ce post, je vais vous donner des nouvelles incroyables sur le Grid! Personnellement, c'est l'une de mes mises en page préférées. ? Cela m'aide à créer de superbes designs sur mes applications d'interface utilisateur. N'oubliez pas qu'une grille est une disposition qui nous permet de localiser les contrôles dans notre conception à travers des lignes et des colonnes.

Nous allons maintenant découvrir la nouvelle structure de grille dans Xamarin Forms disponible à partir du Xamarin.Forms 4.7-pre1 version.

Si vous lisez cet article, vous vous êtes probablement retrouvé dans l'un des scénarios suivants:

• Vous commencez tout juste à apprendre et vous ne savez pas comment utiliser la grille. Si vous êtes dans ce groupe, bienvenue dans la nouvelle structure! ? Si vous voulez en savoir plus sur la structure générale du Grid, vous pouvez lire cet article .

• Ou… Vous savez comment utiliser le Grid mais parfois vous pouvez penser à quelque chose comme " La grille est incroyable mais pourquoi ne peut-elle pas être implémentée avec moins de lignes? " ?

Alors, commençons! ?

Tout d’abord, voyons la structure Grid unique avant cette mise à jour:

Dans l’image ci-dessous, nous créons deux colonnes et deux lignes. Pour créer chacun d'eux, nous devons ajouter quelque chose comme ou (selon ce dont vous avez besoin). Et à l'intérieur de cela, vous devez ajouter ligne par ligne toutes les lignes ou colonnes que vous allez utiliser. Dans cet exemple, j'ai 10 lignes uniquement pour la construction de la structure Grid.

Mais vous savez quoi? À partir de Xamarin.Forms 4.7-pre1, nous avons la même structure précédemment illustrée mais simplifiée. ? Cette simplification ne concernera que la structure. La fonctionnalité n'aura aucun changement!

Alors, simplifions maintenant les 10 lignes utilisées ci-dessus!

Exemple de code

 
 Écrivez votre code here 
 

? Comme vous pouvez le voir, avec seulement deux lignes, vous pouvez créer la même structure Grid, vous aidant à économiser des lignes et du temps!

Comment ai-je fait?

Allons-y étape par étape. La première chose à faire est d'ajouter la balise <Grid mais avant de la fermer, ajoutez des lignes et des colonnes:

• En commençant par la ligne, il vous suffit d'ajouter RowDefinitions et l'intérieur il ajoute autant de lignes que nécessaire avec leur hauteur respective, mais cette fois, vous n'avez pas à ajouter la propriété Height.

• En continuant avec les colonnes, ajoutez ColumnDefinitions avec la même description que précédemment expliquée pour les lignes, mais cette fois n'ajoutez pas la propriété Width et fermez la ligne d'étiquette.

⚠ Vous pouvez ajouter la ligne ou la colonne dans l'ordre que vous voulez – elle n'a pas besoin d'un ordre spécifique.

Ensuite écrivez tout le code dont vous avez besoin dans la mise en page, et, enfin, terminez en fermant la balise .

Et c'est fait. Notre grille est complètement simplifiée! J'espère que cet article vous sera très utile! ?

? Restez en sécurité et à la prochaine fois!

Références: https://docs.microsoft.com/en-us/xamarin/essentials/text-to-speech