Exploration des options de mise en page dans .NET MAUI

.NET MAUI dispose de quatre classes de mise en page pour vous aider à organiser l’interface utilisateur de votre application. Regardons-les !

Salut!! 🙋‍♀ C’est un plaisir pour moi de vous avoir ici! 💚 Lors du développement d’une interface utilisateur pour une application, nous avons besoin d’un « moule » ou d’un « modèle » pour nous aider à organiser les composants que cette interface utilisateur aura. Pour le faire dans .NET MAUI, nous avons des mises en page, et dans cet article nous allons apprendre les différentes mises en page disponibles et comment les utiliser de manière très simple !

Qu’est-ce qu’une mise en page ?

Les mises en page vous permettent d’organiser/regrouper les contrôles d’une interface utilisateur de manière ordonnée. Il existe différents types de dispositions qui ont établi la manière dont chacune organise les contrôles qui lui sont affectés. Par conséquent, il est important de connaître chacun d’entre eux pour savoir comment choisir correctement. Vous pouvez utiliser une mise en page ou un mélange de mises en page.

Types de mise en page existants dans .NET MAUI

Dans .NET MAUI, nous avons quatre types de classes de mise en page, que vous pouvez voir dans l’image ci-dessous. Ensuite, nous allons regarder de plus près chaque type de mise en page.

StackLayout

Le StackLayout organise les vues enfants dans une pile unidimensionnelle verticalement ou horizontalement. Si la taille d’un champ n’est pas spécifiée, il s’agrandira pour remplir l’espace disponible (largeur ou hauteur) selon l’orientation définie (verticale ou horizontale). Cette disposition est définie par les propriétés suivantes :

Orientation de la mise en page de la pile

Ceci indique l’orientation dans laquelle les champs contenus dans cette disposition seront affichés. Cette orientation peut être verticale ou horizontale, et si vous ne la spécifiez pas, elle prendra l’orientation verticale comme valeur par défaut.

Le résultat de la définition de l’orientation horizontale ou verticale est un exemple comme l’image suivante (vous avez donc une idée) :

Mais nous avons également deux sous-types de StackLayout qui nous aident à concevoir directement l’organisation de nos contrôles. Voyons voir:

HorizontalStackLayout : Il organise les vues enfant dans une pile horizontale unidimensionnelle.

<HorizontalStackLayout >
<Label Text="Give me your name:" />
<Button BackgroundColor="Pink" Text="Enter"/>
</HorizontalStackLayout>

Disposition de la pile verticale : Il organise les vues enfant dans une pile verticale unidimensionnelle.

<VerticalStackLayout>
<Label Text="Give me your name:" />
<Button BackgroundColor="Pink" Text="Enter"/>
</VerticalStackLayout>

⚠ Les performances sont meilleures si vous choisissez l’une de ces deux dernières options (clairement celle qui correspond le mieux à vos besoins) plutôt que de choisir le StackLayout et d’ajouter l’orientation.

Espacement StackLayout

Cela indique la quantité d’espace occupée par chaque vue enfant. Cette propriété reçoit une valeur de type double et a une valeur par défaut de zéro (non obligatoire).

Voyons maintenant son implémentation dans le code :

<StackLayout Orientation="Horizontal" Spacing="6">
	<Label Text="Give me your name:" />
	<Button BackgroundColor="Pink" Text="Enter"/>
</StackLayout>

AbsoluteLayout

Vous pouvez positionner des éléments à l’aide de valeurs explicites ou de valeurs relatives à la taille de la mise en page. La position est spécifiée comme le coin supérieur gauche de l’élément enfant par rapport au coin supérieur gauche de AbsoluteLayout. Cette disposition est idéale à utiliser lorsque vous souhaitez créer un effet de superposition sur vos commandes.

Cette disposition est définie par les propriétés suivantes :

AbsoluteLayout.LayoutBound

Il représente la position et la taille d’un enfant. Il a (0,0,AutoSize,AutoSize) comme valeur par défaut. Les valeurs qu’il reçoit peuvent être les suivantes :

• Proportionnel: Indique une relation entre une disposition et une vue.

<Button AbsoluteLayout.LayoutBounds=".30,.05,.23,.1" AbsoluteLayout.LayoutFlags="All" BackgroundColor="Pink" Text="Button Test" />

• Absolus : Définit les valeurs avec une position fixe. Cela n’obtient que la position, qu’elle tienne ou non sur l’écran.

<Button AbsoluteLayout.LayoutBounds="105,100,150,10" Text="Hello!" BackgroundColor="Pink" />

AbsoluteLayout.LayoutFlagsAbsoluteLayout.LayoutFlags

Cela indique comment les commandes seront interprétées à l’écran. Certaines des valeurs qu’il reçoit sont les suivantes :

• XProportionnel – YProportionnel : Indique que la valeur de x et y, respectivement, sera interprétée comme proportionnelle, et les autres comme absolues.
• Proportionnel à la hauteur – Proportionnel à la largeur : Obtient la hauteur ou la largeur, respectivement, en tant que disposition proportionnelle. Les éléments restants sont des absolus.
• PositionProportionnelle : Obtient X et Y comme mise en page proportionnelle. Les éléments restants sont des absolus.
• Tout: Prenez toutes les valeurs comme proportionnelles.

Enfin, vous pouvez avoir un résultat comme celui-ci :

<AbsoluteLayout>
  <BoxView Color="Pink" AbsoluteLayout.LayoutBounds="0.5,0,100,25" AbsoluteLayout.LayoutFlags="PositionProportional" />
  <BoxView Color="Green" AbsoluteLayout.LayoutBounds="0,0.5,25,100" AbsoluteLayout.LayoutFlags="PositionProportional" />
  <BoxView Color="Red" AbsoluteLayout.LayoutBounds="1,0.5,25,100" AbsoluteLayout.LayoutFlags="PositionProportional" />
  <BoxView Color="Blue" AbsoluteLayout.LayoutBounds="0.5,1,100,25" AbsoluteLayout.LayoutFlags="PositionProportional" />
  <Label Text="Centered text" AbsoluteLayout.LayoutBounds="0.5,0.5,110,25" AbsoluteLayout.LayoutFlags="PositionProportional" />
</AbsoluteLayout>

⚠ Exemple tiré du documents officiels.

Grille

La grille nous aide à organiser les éléments en lignes et en colonnes, qui doivent être définies en fonction des besoins de l’interface utilisateur. Celles-ci peuvent être de taille proportionnelle ou absolue.

Explorons maintenant la structure d’implémentation de Grid.

Lignes et colonnes

Colonnes: Dans la propriété ColumnDefinitions, vous pouvez ajouter autant de colonnes que nécessaire. Il vous suffit de les séparer par des virgules et d’attribuer la taille correspondante, comme dans l’exemple suivant.

<Grid ColumnDefinitions="10,*,auto">

<!-- your code here-->

</Grid>

Lignes: Dans la propriété RowDefinitions, vous pouvez ajouter autant de lignes que nécessaire. Il vous suffit de les séparer par des virgules et d’affecter la taille correspondante comme dans l’exemple suivant.

<Grid RowDefinitions="auto,*">

<!-- your code here-->

</Grid>

Et enfin vous obtiendrez les résultats suivants :

<Grid ColumnDefinitions="10,*,auto" RowDefinitions="auto,*">

<!-- your code here-->

</Grid>

Pour affecter un contrôle à une ligne et une colonne spécifique, il vous suffit de faire ce que je montre dans l’image suivante :

Exemple de code :

<Grid ColumnDefinitions="10,*,auto" RowDefinitions="auto,*">

<Button Grid.Row="0" Grid.Column="0" Text="Hello how are you!?" />

</Grid>

Taille des lignes et des colonnes

Il est important de savoir comment nous allons définir la taille des lignes et des colonnes. Nous avons trois options, que je décris ci-dessous :

• Absolu: Indique avec une taille spécifique que prendront les lignes et/ou les colonnes. Exemple: <RowDefinition Height="10" />
• Proportionnel : <RowDefinition Height="*" />
• Indique la taille qu’aura une ligne et/ou une colonne au moyen de l’espace restant du dispositif entre d’autres valeurs proportionnelles du même type (ligne ou colonne). Exemple: Auto: <RowDefinition Height="Auto" />

Ajuste la taille de ses lignes ou colonnes en fonction de la taille de ses enfants. Exemple: Vous pouvez voir plus d’informations sur Gridici

.

Plusieurs cases de même taille, disposées en trois colonnes et six rangées ; il manque une case en bas à droite

FlexLayout est similaire à StackLayout : il affiche les enfants horizontalement ou verticalement dans une pile. Mais il peut également envelopper ses enfants s’il y a trop d’enfants pour tenir dans une seule ligne ou colonne, et il permet également un contrôle plus granulaire de la mise en page, y compris la taille, l’orientation et l’alignement de ses éléments enfants.

Cette disposition fournit un dimensionnement proportionnel pour les contrôles qu’ils contiennent en organisant les éléments dans un rapport basé sur les dimensions de l’écran et entre les éléments sur l’écran.

Cette disposition est définie par les propriétés suivantes :

Direction

• Il est chargé d’indiquer la direction que vont prendre les éléments contenus dans la mise en page. Parmi les valeurs prises en charge figurent les suivantes : Colonne:
• Il est chargé d’organiser les enfants du layout de haut en bas en les empilant verticalement. ColonneInverse :
• Il est chargé d’organiser les enfants du layout de bas en haut en les empilant verticalement. Ligne:
• Il est chargé d’organiser les enfants du layout de gauche à droite en les empilant horizontalement. (Ceci est la valeur par défault.) Inverser la ligne :

Il est chargé d’organiser les enfants du layout de droite à gauche en les empilant horizontalement.

Envelopper

• Ceci est responsable de la localisation des contrôles de conception sur une seule ligne ou plus. Parmi les valeurs prises en charge figurent les suivantes : Envelopper:
• Indique que les champs peuvent être affichés sur plusieurs lignes si nécessaire (flexibilité à la demande) Pas d’emballage :
• Place les éléments sur une seule ligne (valeur par défaut) Inverse:

Indique que les champs peuvent être affichés sur plusieurs lignes si nécessaire dans l’ordre inverse

JustifierContenu

• Ceci spécifie comment l’espace entre et autour des enfants sera distribué le long de l’axe principal. Parmi les valeurs prises en charge figurent les suivantes : Début, Centre, Fin :
• Indiquez respectivement le début, le centre et la fin L’espace entre:
• Distribue un espacement égal entre les contrôles contenus dans la mise en page Espace Autour :
• Les enfants doivent être répartis uniformément, le premier et le dernier enfant ayant un espace demi-taille SpaceEvenly :

Répartissez tous les enfants en ayant un espace égal autour d’eux

<FlexLayout Direction="Column" AlignItems="Center" JustifyContent="SpaceEvenly">
  <Label Text="Give me your name:" />
  <Button BackgroundColor="Pink" Text="Enter"/>
</FlexLayout>

Finalement, nous aurions un code comme celui-ci :

Emballer

C’est tout! J’espère que cela vous a plu et à partir de maintenant, si ce n’est pas déjà fait, commencez à utiliser les différentes mises en page disponibles dans .NET MAUI ! 💚💕