DockLayout

DockLayout is een lay-out waarbij weergaven aan de randen van de lay-outcontainer kunnen worden vastgezet.

In de onderstaande afbeelding ziet u hoe een DockLayout conceptueel gestructureerd is. Onderliggende vensters worden gedockt op een van de 4 mogelijke dockposities: Boven, Onder, Links of Rechts (overeenkomend met DockPosition.Top, DockPosition.Bottom, DockPosition.Left, en DockPosition.Right). Weergaven die niet expliciet zijn gedockt (of met DockPosition.None) worden in het midden weergegeven (of tussen de posities Boven / Onder en Links / Rechts).

Een DockLayout maken

In de volgende secties wordt beschreven hoe u een DockLayout in zowel C# als XAML gebruikt.

XAML

Inclusief de XAML-naamruimte

Als u de toolkit in XAML wilt gebruiken, moet de volgende xmlns worden toegevoegd aan uw pagina of weergave:

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

Daarom volgt het volgende:

<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>

Zou als volgt worden gewijzigd om de xmlns op te nemen:

<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>

DockLayout gebruiken

Een basis DockLayout kan worden gemaakt in XAML, zoals hier wordt weergegeven:

<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>

Voor links / rechts-docking moet een WidthRequest worden opgegeven. Voor docking aan de bovenkant / onderkant definieert HeightRequest de grootte van de onderliggende weergave in de dockingrichting. De orthogonale richtingen worden altijd impliciet berekend door de DockLayout manager.

C#

Een DockLayout kan gemakkelijk worden samengesteld in C# zoals hier wordt weergegeven:

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" } },
    }
};

Opmerking: DockPosition.None is de standaardinstelling en kan worden weggelaten.

De dockpositie instellen

Als u de dockingpositie vanuit C# wilt instellen, gebruikt u DockLayout.SetDockPosition(IView, DockPosition) om de attached-eigenschap DockPosition toe te passen.

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

Een DockLayout aanpassen

Een DockLayout container ondersteunt willekeurige Padding en verschillende DockLayout- specifieke eigenschappen voor aanpassing. Hier ziet u een voorbeeld in XAML met alle beschikbare opties:

<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>

Eigenschappen

Aanvullende notities

Als DockLayout wordt gebruikt op een plek met beperkte ruimte (vooral wanneer een grootte is opgegeven via HeightRequest of WidthRequest op de container), wordt de prioriteit bepaald door de volgorde waarin de onderliggende weergaven aan de DockLayout-container worden toegevoegd. Als gevolg daarvan worden, wanneer er onvoldoende ruimte is om alle onderliggende weergaven weer te geven, de onderliggende weergaven met de laagste prioriteit (die als laatste zijn toegevoegd) tijdens het renderen verwijderd. Daarom moet u altijd controleren of de container minstens groot genoeg is voor de minimale grootte van alle onderliggende views.

Examples

U vindt een voorbeeld van de functie DockLayout in actie in de .NET MAUI Community Toolkit Sample Application.

API

U vindt de broncode voor DockLayout in de opslagplaats .NET MAUI Community Toolkit GitHub in DockLayout en DockLayoutManager.