Il est toujours là, cet incontournable de la mise en page, mais il se cache dans le Community Toolkit... Regardons ce que peut nous offrir le DockLayout de MAUI !
Introduction
Le positionnement à l'écran de type 'Dock' est un concept bien connu des développeurs ayant utilisé d'anciens environnements tels que Delphi, VB ou les Windows Forms. Cette méthode de disposition permet de fixer des éléments d'interface utilisateur (UI) sur les bords d'une fenêtre, facilitant ainsi la création de mises en page structurées et cohérentes pouvant s'adapter à des tailles écran différentes sans perte de cohérence du placement des objets visuels. Le principal avantage du DockLayout de MAUI réside dans sa capacité à organiser les éléments de manière fluide, en optimisant l'espace disponible tout en garantissant une disposition harmonieuse.
Présentation du contrôle DockLayout du toolkit
Le DockLayout est un des nombreux outils fournis par le .NET MAUI Community Toolkit pour simplifier le développement d'applications. Ce layout permet de "docker" des éléments enfants aux bords de son conteneur parent, que ce soit à gauche, à droite, en haut, en bas ou au centre. Ce qui distingue le DockLayout des autres layouts est sa flexibilité : en permettant de positionner des éléments de manière relative les uns par rapport aux autres, il devient possible de créer des interfaces complexes avec un code minimal. Il permet aussi d'adapter facilement et automatiquement un visuel à différentes résolutions. Chaque "emplacement" peut contenir un contrôle, mais, bien entendu, ce dernier peut lui aussi, et c'est le cas le plus souvent, être un autre type de conteneur (Grid, StackLayout ...). On se servira du DockLayout pour charpenter une mise en page qui sera ensuite plus finement gérer au sein de chaque emplacement.
Chaque élément enfant peut être ancré à un bord spécifique via la propriété `DockLayout.DockPosition`, ce qui rend le contrôle intuitif et puissant. De plus, grâce à la propriété `ShouldExpandLastChild`, il est possible de spécifier si le dernier élément enfant doit remplir l'espace restant du conteneur.
Propriétés du contrôle DockLayout
Le contrôle DockLayout expose plusieurs propriétés essentielles qui permettent de personnaliser son comportement et celui de ses enfants. Ce conteneur possède deux avantages, être facile à comprendre et à visualiser mentalement et d'offrir un jeu de propriétés limité et facile à mettre en oeuvre. Les principales propriétés sont :
`DockPosition` (Enum)
Cette propriété permet de spécifier la position d'amarrage d'un élément enfant par rapport au conteneur DockLayout. Les valeurs possibles sont `Top`, `Bottom`, `Left`, `Right`, et `None`. Par défaut, si cette propriété n'est pas définie, l'élément est placé au centre du conteneur.
`ShouldExpandLastChild` : `bool`
Cette propriété, lorsqu'elle est définie à `true`, permet de remplir l'espace restant du conteneur avec le dernier enfant. Si elle est définie à `false`, tous les enfants du DockLayout sont positionnés en fonction de leurs valeurs de `DockPosition` et leurs tailles sans que le dernier enfant ne remplisse l'espace restant. Par défaut, cette propriété est définie à `true`.
`Padding` : `Thickness`
Spécifie la marge intérieure entre les bords du DockLayout et ses enfants. Cette propriété permet de créer de l'espace entre les éléments enfants et les bords du layout, assurant ainsi une meilleure lisibilité et organisation visuelle.
`HorizontalSpacing` et `VerticalSpacing` : `double`
Définit l'espacement horizontal ou vertical entre les éléments enfants du DockLayout. Ces propriétés sont utiles pour s'assurer que les éléments ne sont pas trop rapprochés les uns des autres, ce qui améliore l'esthétique générale de l'interface.
Rappel sur la façon d'installer et d'activer le Community Toolkit
Pour pouvoir utiliser le DockLayout, vous devez d'abord installer le .NET MAUI Community Toolkit. Voici les étapes à suivre pour ajouter le package à votre projet MAUI :
1. Installation du package NuGet : Dans votre projet MAUI, ajoutez le package `CommunityToolkit.Maui` via NuGet.
2. Initialisation du toolkit : Dans votre fichier `MauiProgram.cs`, n'oubliez pas d'importer le toolkit avec l'instruction `using CommunityToolkit.Maui;` et d'initialiser celui-ci en appelant la méthode `UseMauiCommunityToolkit()` sur le builder. Voici à quoi cela pourrait ressembler :
using CommunityToolkit.Maui;
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.UseMauiCommunityToolkit(); // Initialisation du Community Toolkit
return builder.Build();
}
}
Comment mettre en œuvre le contrôle
Exemple en XAML
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
x:Class="YourNamespace.MainPage">
<toolkit:DockLayout LastChildFill="True">
<Label Text="Header"
BackgroundColor="LightGray"
toolkit:DockLayout.DockPosition="Top" />
<Label Text="Footer"
BackgroundColor="LightGray"
toolkit:DockLayout.DockPosition="Bottom" />
<Label Text="Sidebar"
BackgroundColor="LightGray"
toolkit:DockLayout.DockPosition="Left" />
<Label Text="Main Content"
BackgroundColor="White" />
</toolkit:DockLayout>
</ContentPage>
Exemple en C#
using CommunityToolkit.Maui.Layouts;
using Microsoft.Maui.Controls;
public class MainPage : ContentPage
{
public MainPage()
{
var dockLayout = new DockLayout
{
LastChildFill = true
};
var header = new Label
{
Text = "Header",
BackgroundColor = Colors.LightGray
};
DockLayout.SetDockPosition(header, DockPosition.Top);
var footer = new Label
{
Text = "Footer",
BackgroundColor = Colors.LightGray
};
DockLayout.SetDockPosition(footer, DockPosition.Bottom);
var sidebar = new Label
{
Text = "Sidebar",
BackgroundColor = Colors.LightGray
};
DockLayout.SetDockPosition(sidebar, DockPosition.Left);
var content = new Label
{
Text = "Main Content",
BackgroundColor = Colors.White
};
dockLayout.Children.Add(header);
dockLayout.Children.Add(footer);
dockLayout.Children.Add(sidebar);
dockLayout.Children.Add(content);
Content = dockLayout;
}
}
Conclusion
Le DockLayout du .NET MAUI Community Toolkit est un outil puissant et flexible pour organiser l'interface utilisateur de vos applications. Il permet de structurer l'UI de manière intuitive et adaptative, tout en réduisant la complexité du code. Ce type de mise en page est très ancien et a largement prouvé son efficacité. En le rendant disponible dans MAUI le toolkit redonne vie à cet incontournable dans les Apps LOB. Pour plus de détails et d'exemples, n'hésitez pas à consulter la documentation officielle.
Stay Tuned !