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 ? 😍