Si on retrouve ici les Layouts principaux des Xamarin.Forms il ne faudrait pas se faire tromper par cette apparente similitude. Les Layouts MAUI sont construits de façon un peu différente…
Les Layouts
Les classes de disposition .NET Multi-platform App UI (.NET MAUI) vous permettent d'organiser et de regrouper les contrôles de l'interface utilisateur dans votre application. Le choix d'une classe de mise en page nécessite de savoir comment la mise en page positionne et dimensionne ses éléments enfants. De plus, il peut être nécessaire d'imbriquer des mises en page pour créer une mise en page souhaitée, ce qui est possible bien entendu. Les classes disponibles sont plus nombreuses que les 4 plus connues (en illustration)…
Le StackLayout
Un StackLayout organise les éléments dans une pile unidimensionnelle, horizontalement ou verticalement. La propriété Orientation spécifie la direction des éléments et l'orientation par défaut est Vertical. StackLayout est généralement utilisé pour organiser une sous-section de l'interface utilisateur sur une page.
Le XAML suivant montre comment créer un StackLayout vertical contenant trois objets Label :
<StackLayout Margin="20,35,20,25">
<Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." />
<Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." />
<Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." />
</StackLayout>
Dans un StackLayout , si la taille d'un élément n'est pas explicitement définie, il s'agrandit pour remplir la largeur ou la hauteur disponible si la propriété Orientation est définie sur Horizontal.
Un StackLayout est souvent utilisé comme mise en page parent, qui contient d'autres mises en page enfants. Cependant, un StackLayout ne doit pas être utilisé pour reproduire une mise en page Grid en utilisant une combinaison d' objets StackLayout, c’est une mauvaise pratique. C'est surtout du gaspillage car des calculs de mise en page inutiles sont effectués. Au lieu de cela, la mise en page souhaitée peut être mieux obtenue en utilisant une Grid.
HorizontalStackLayout
Un HorizontalStackLayout organise les vues enfants dans une pile horizontale unidimensionnelle et constitue une alternative plus performante à un StackLayout . HorizontalStackLayout est généralement utilisé pour organiser une sous-section de l'interface utilisateur sur une page.
Le code XAML suivant montre comment créer un HorizontalStackLayout contenant différentes vues enfant :
<HorizontalStackLayout Margin="20">
<Rectangle Fill="Red"
HeightRequest="30"
WidthRequest="30" />
<Label Text="Red"
FontSize="18" />
</HorizontalStackLayout>
VerticalStackLayout
Un VerticalStackLayout organise les vues enfants dans une pile verticale unidimensionnelle et constitue une alternative plus performante à un StackLayout . VerticalStackLayout est généralement utilisé pour organiser une sous-section de l'interface utilisateur sur une page.
Le code XAML suivant montre comment créer un VerticalStackLayout contenant trois objets Label :
<VerticalStackLayout Margin="20,35,20,25">
<Label Text="The VericalStackLayout has its Margin property set, to control the rendering position of the VerticalStackLayout." />
<Label Text="The Padding property can be set to specify the distance between the VerticalStackLayout and its children." />
<Label Text="The Spacing property can be set to specify the distance between views in the VerticalStackLayout." />
</VerticalStackLayout>
Grille
Une grille est utilisée pour afficher des éléments en lignes et en colonnes, qui peuvent avoir des tailles proportionnelles ou absolues. Les lignes et les colonnes d'une grille sont spécifiées avec les propriétés RowDefinitions et ColumnDefinitions.
Pour positionner des éléments dans des cellules spécifiques de la grille , utilisez les propriétés jointes Grid.Column et Grid.Row. Pour que les éléments s'étendent sur plusieurs lignes et colonnes, utilisez les propriétés jointes Grid.RowSpan et Grid.ColumnSpan.
Le code XAML suivant montre comment créer une grille avec deux lignes et deux colonnes :
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Label Text="Column 0, Row 0"
WidthRequest="200" />
<Label Grid.Column="1"
Text="Column 1, Row 0" />
<Label Grid.Row="1"
Text="Column 0, Row 1" />
<Label Grid.Column="1"
Grid.Row="1"
Text="Column 1, Row 1" />
</Grid>
Dans cet exemple, le dimensionnement fonctionne comme suit :
Chaque ligne a une hauteur explicite de 50 unités indépendantes de l'appareil.
La largeur de la première colonne est définie sur Auto, et est donc aussi large que nécessaire pour ses enfants. Dans ce cas, il s'agit d'une largeur de 200 unités indépendantes de l'appareil pour s'adapter à la largeur du premier Label .
L'espace peut être distribué dans une colonne ou une ligne à l'aide du dimensionnement automatique, qui permet aux colonnes et aux lignes de s'adapter à leur contenu. Ceci est réalisé en définissant la hauteur de RowDefinition, ou la largeur de ColumnDefinition, sur Auto. Le dimensionnement proportionnel peut également être utilisé pour répartir l'espace disponible entre les lignes et les colonnes de la grille selon des proportions pondérées. Ceci est réalisé en définissant la hauteur de RowDefinition, ou la largeur de ColumnDefinition, sur une valeur qui utilise l'opérateur étoile *.
FlexLayout
Un FlexLayout est similaire à un StackLayout en ce sens qu'il affiche les éléments enfants horizontalement ou verticalement dans une pile. Cependant, un FlexLayout peut également envelopper (wrapping) ses enfants s'il y en a trop pour tenir dans une seule ligne ou colonne, et permet également un contrôle plus granulaire de la taille, de l'orientation et de l'alignement de ses éléments enfants.
Le code XAML suivant montre comment créer un FlexLayout qui affiche ses vues dans une seule colonne :
<FlexLayout Direction="Column"
AlignItems="Center"
JustifyContent="SpaceEvenly">
<Label Text="FlexLayout in Action" />
<Button Text="Button" />
<Label Text="Another Label" />
</FlexLayout>
Dans cet exemple, la mise en page fonctionne comme suit :
La propriété Direction est définie sur Column, ce qui entraîne la disposition des enfants du FlexLayout dans une seule colonne d'éléments.
La propriété AlignItems est définie sur Center, ce qui entraîne le centrage horizontal de chaque élément.
La propriété JustifyContent est définie sur SpaceEvenly, ce qui alloue équitablement tout l'espace vertical restant entre tous les éléments, au-dessus du premier élément et au-dessous du dernier élément.
AbsoluteLayout
Un AbsoluteLayout est utilisé pour positionner et dimensionner 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 par le coin supérieur gauche de l'enfant par rapport au coin supérieur gauche de AbsoluteLayout .
Un AbsoluteLayout doit être considéré comme une mise en page spéciale à utiliser uniquement lorsque vous pouvez imposer une taille aux enfants ou lorsque la taille de l'élément n'affecte pas le positionnement des autres enfants. Une utilisation standard de cette mise en page consiste à créer une superposition, qui couvre la page avec d'autres contrôles, peut-être pour empêcher l'utilisateur d'interagir avec les contrôles normaux de la page.
Dans un AbsoluteLayout , la propriété AbsoluteLayout.LayoutBounds jointe est utilisée pour spécifier la position horizontale, la position verticale, la largeur et la hauteur d'un élément. De plus, la propriété AbsoluteLayout.LayoutFlags jointe spécifie comment les limites de mise en page seront interprétées.
Le XAML suivant montre comment organiser les éléments dans un AbsoluteLayout :
<AbsoluteLayout Margin="40">
<BoxView Color="Red"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100"
Rotation="30" />
<BoxView Color="Green"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100"
Rotation="60" />
<BoxView Color="Blue"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100" />
</AbsoluteLayout>
Dans cet exemple, la mise en page fonctionne comme suit :
Chaque BoxView reçoit une taille explicite de 100x100 et est affiché dans la même position, centré horizontalement.
Le BoxView rouge est pivoté de 30 degrés et le BoxView vert est pivoté de 60 degrés.
Sur chaque BoxView , la propriété jointe AbsoluteLayout.LayoutFlags est définie sur PositionProportional, indiquant que la position est proportionnelle à l'espace restant après la prise en compte de la largeur et de la hauteur.
BindableLayout
Un BindableLayout permet à toute classe de mise en page qui dérive de la classe Layout de générer son contenu en se liant à une collection d'éléments, avec la possibilité de définir l'apparence de chaque élément avec un DataTemplate.
Une mise en page pouvant être liée est remplie de données en définissant sa propriété ItemsSource sur toute collection qui implémente IEnumerable et en l'attachant à une classe dérivée de la mise en page. L'apparence de chaque élément dans la mise en page pouvant être liée peut être définie en définissant la propriété jointe BindableLayout.ItemTemplate sur un DataTemplate.
Le XAML suivant montre comment lier un StackLayout à une collection d'éléments et définir leur apparence avec un DataTemplate:
<StackLayout BindableLayout.ItemsSource="{Binding User.TopFollowers}"
Orientation="Horizontal">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Image Source="{Binding}"
Aspect="AspectFill"
WidthRequest="44"
HeightRequest="44" />
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>Les mises en page pouvant être liées ne doivent être utilisées que lorsque la collection d'éléments à afficher est petite et que le défilement et la sélection ne sont pas nécessaires.
Conclusion
Comme on peut le constater les classes de Layout disponibles sont un peu plus nombreuses que celles qu’on connait et qu’on cite habituellement. Bien connaître ces variations, les versions spécifiques du StackLayout par exemple pour un code plus efficace, ou l’astuce des BindableLayout, tout cela est la base même de la connaissance MAUI indispensable pour créer des Apps.
Alors certes ce n’est pas la partie la plus « fun » à apprendre, ni pour moi à écrire, car de toute façon en la matière je ne peux rien inventer et tout vient de la documentation Microsoft, par force.
L’intérêt est bien entendu de diffuser cette information et de toucher des lecteurs qui n’auraient pas eu le temps, l’idée ou le courage de se faire la doc originale en anglais. Car bien comprendre les Layouts c’est déjà beaucoup mais surtout c’est le minimum pour savoir comment débuter l’écriture d’une page, donc d’une App !
Stay Tuned !