DockLayout

DockLayout est une disposition où les vues peuvent être ancrées sur les côtés du conteneur de disposition.

L’image ci-dessous montre comment un DockLayout est conceptuellement structuré. Les vues enfants sont ancrées à l’une des 4 positions d’ancrage possibles : Haut, Bas, Gauche ou Droite (soit l’équivalent de DockPosition.Top, DockPosition.Bottom, DockPosition.Left et DockPosition.Right). Les vues qui ne sont pas explicitement ancrées (ou avec DockPosition.None) sont affichées au centre (ou entre les positions Haut / Bas et Gauche / Droite).

Création d’un DockLayout

Les sections suivantes expliquent comment utiliser un DockLayout dans C# et XAML.

XAML

Y compris l’espace de noms XAML

Pour utiliser le kit de ressources dans XAML, le xmlns suivant doit être ajouté à votre page ou à votre affichage :

xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

Il en résulte ce qui suit :

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

</ContentPage>

Serait modifié pour inclure le xmlns de la manière suivante :

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    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">

</ContentPage>

Utilisation du DockLayout

Un DockLayout de base peut être créée en XAML, comme illustré ici :

<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="MyProject.MyContentPage">

    <toolkit:DockLayout>
        <Button toolkit:DockLayout.DockPosition="Top" Text="Top" HeightRequest="50" />
        <Button toolkit:DockLayout.DockPosition="Bottom" Text="Bottom" HeightRequest="70" />
        <Button toolkit:DockLayout.DockPosition="Left" Text="Left" WidthRequest="80" />
        <Button toolkit:DockLayout.DockPosition="Right" Text="Right" WidthRequest="90" />
        <Button Text="Center" />
    </toolkit:DockLayout>
    
</ContentPage>

Pour un ancrage Gauche / Droite, une WidthRequest doit être spécifiée. Pour un ancrage Haut / Bas, une HeightRequest définit la taille de la vue enfant le long de la direction d’ancrage. Les directions orthogonales sont toujours calculées implicitement par le gestionnaire DockLayout.

C#

Un DockLayout peut être facilement créé en C#, comme illustré ici :

using CommunityToolkit.Maui.Layouts;

var page = new ContentPage
{
    Content = new DockLayout
    {
        { new Button { Text = "Top", HeightRequest = 50 }, DockPosition.Top },
        { new Button { Text = "Bottom", HeightRequest = 70 }, DockPosition.Bottom },
        { new Button { Text = "Left", WidthRequest = 80 }, DockPosition.Left },
        { new Button { Text = "Right", WidthRequest = 90 }, DockPosition.Right },
        { new Button { Text = "Center" } },
    }
};

Remarque : DockPosition.None est la valeur par défaut et peut être omise.

Définition de la position d’ancrage

Pour définir la position d’ancrage à partir de C#, utilisez DockLayout.SetDockPosition(IView, DockPosition) pour appliquer la propriété DockPosition jointe.

var button = new Button { Text = "Top", HeightRequest = 50 };
DockLayout.SetDockPosition(button, DockPosition.Top);

Personnalisation d’un DockLayout

Un conteneur DockLayout prend en charge un Padding arbitraire ainsi que plusieurs propriétés spécifiques au DockLayout pour la personnalisation. Voici un exemple en XAML avec toutes les options disponibles :

<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="MyProject.MyContentPage">

    <toolkit:DockLayout HeightRequest="400"
                    WidthRequest="600"
                    Padding="10,20,30,40"
                    VerticalSpacing="10"
                    HorizontalSpacing="15"
                    ShouldExpandLastChild="False">
        ...
    </toolkit:DockLayout>
    
</ContentPage>

Propriétés

Propriété	Type	Description
Padding	Thickness	Obtient ou définit le remplissage autour du conteneur de disposition (hérité du Layout).
HorizontalSpacing	double	Obtient ou définit l’espacement horizontal entre les vues ancrées.
VerticalSpacing	double	Obtient ou définit l’espacement vertical entre les vues ancrées.
		Les espacements HorizontalSpacing et VerticalSpacing sont appliqués entre les vues voisines dans le DockLayout. Par exemple, HorizontalSpacing est ajouté entre les vues Gauche, Aucune et Droite, mais également entre les vues voisines dans la même DockPosition, telles que plusieurs vues ancrées à Gauche. VerticalSpacing est rendu entre les vues empilées verticalement dans les positions Haut, Aucune et Bas.
ShouldExpandLastChild	bool	Si la valeur est true, le dernier enfant est développé pour remplir l’espace restant (valeur par défaut : true).

Remarques supplémentaires

Si DockLayout est utilisé dans un endroit à l’espace limité (en particulier avec une taille spécifiée via HeightRequest ou WidthRequest sur le conteneur), la priorité est donnée par l’ordre dans lequel les vues enfants sont ajoutées au conteneur DockLayout. Par conséquent, chaque fois que l’espace est insuffisant pour le rendu de toutes les vues enfants, les enfants avec la priorité la plus basse (qui ont été ajoutés en dernier) sont supprimés lors du rendu. Pour cette raison, vous devez toujours vérifier que la taille du conteneur couvre au moins la taille minimale de toutes ses vues enfants.

Exemples

Vous trouverez un exemple de la fonctionnalité DockLayout en action dans l’exemple d’application du kit d’outils de la communauté .NET MAUI.

API

Vous trouverez le code source de DockLayout sur le référentiel GitHub du kit d’outils de la communauté .NET MAUI, dans DockLayout et DockLayoutManager.