DockLayout

DockLayout est un agencement dans lequel les vues peuvent être ancrées sur les bords du conteneur d’agencement.

L’image ci-dessous montre comment une DockLayout est structurée sur le plan conceptuel. Les vues enfant sont ancrées à l’une des 4 positions d’ancrage possibles : Haut, Bas, Gauche ou Droite (équivalent à 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 les langages 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"

Par conséquent, 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 de DockLayout

Une base DockLayout 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 l’ancrage à gauche / à droite, un WidthRequest doit être spécifié. Pour l’ancrage en haut / en bas, une HeightRequest définit la taille de la vue enfant dans la direction d’ancrage. Les directions orthogonales sont toujours calculées implicitement par le DockLayout responsable.

C#

Un DockLayout peut être construit facilement 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é jointe DockPosition .

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

Personnalisation d’un DockLayout

Un conteneur DockLayout prend en charge des Padding arbitraires ainsi que plusieurs propriétés spécifiques à 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

Remarques supplémentaires

Si DockLayout est utilisée dans un espace restreint (en particulier avec une taille spécifiée via HeightRequest ou WidthRequest sur le conteneur), la priorité dépend de l’ordre dans lequel les vues enfants sont ajoutées au conteneur DockLayout. Par conséquent, chaque fois qu’il n’y a pas suffisamment d’espace pour que toutes les vues enfants soient affichées, les enfants de priorité la plus basse (qui ont été ajoutés en dernier) seront supprimés lors du rendu. Pour cette raison, vous devez toujours vérifier que la taille du conteneur est au moins égale à la taille minimale de toutes ses vues enfants.

Exemples

Vous trouverez un exemple de la fonctionnalité DockLayout en action dans l’exemple d’application .NET MAUI Community Toolkit.

API

Vous trouverez le code source de DockLayout sur le référentiel .NET MAUI Community Toolkit GitHub dans DockLayout et DockLayoutManager.