Si la mise-en-page sous Xamarin.Forms passe par l’application de Layouts
divers et variés, la grid
est sans doute l’un des plus utilisé puisqu’elle permet d’organiser les éléments visuels en lignes et en colonnes.
Malheureusement, la définition des lignes et colonnes, particulièrement verbeuse, a vite tendance à alourdir le code xaml
. Et bien entendu, lorsqu’on imbrique des grids à l’intérieur d’autres grids cela rend très vite notre xaml
assez touffu, pour ne pas dire illisible.
Il était donc temps de mettre la grid
à la diète. Celle-ci a été mise au régime dans la version 4.7 de Xamarin.Forms.
Avant
Initialement, la structure d’une Grid
était définie par deux groupes de balises, Grid.ColumnDefinitions
et Grid.RowDefinitions
, contenant elles-mêmes la liste de chaque colonne et chaque ligne de la grille.
La hauteur et la largeur des lignes et colonnes étaient définies dans chaque balise RowDefinition
et ColumnDefinition
via les attributs Height
et Width
.
C’est aussi lourd à appliquer qu’à expliquer :
<Grid>
<!-- Structure de la grille -->
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="25"/>
<RowDefinition Height="14"/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="300"/>
</Grid.ColumnDefinitions>
<!-- Contenu de la grille -->
</Grid>
Voilà, la grille est déclarée, occupe déjà une place non négligeable dans le fichier xaml
et pourtant elle ne contient encore aucun contenu !
Désormais, c’est possible de faire beaucoup plus rapide et concis. 😊
Après
Grace à la syntaxe simplifiée introduite dans Xamarin.Forms 4.7, l’ensemble des lignes et colonnes sont simplement définies à l’intérieur de la balise Grid
, via des attributs RowDefinitions
et GridDefinitions
, par une liste de valeurs séparées par des virgules.
Tout le code précédent se résume alors à ça :
<Grid RowDefinitions="1*, Auto, 25, 14, 20"
ColumnDefinitions="*, 2*, Auto, 300">
<!-- Contenu de la grille -->
</Grid>
C’est-y pas magnifique ? 😍
Top comments (0)