DockLayout

DockLayout är en layout där vyer kan dockas till sidorna av layoutcontainern.

Bilden nedan visar hur en DockLayout är konceptuellt strukturerad. Undervyer dockas i någon av de fyra möjliga dockningspositionerna: Överkant, Nederkant, Vänster eller Höger (motsvarande DockPosition.Top, DockPosition.Bottom, DockPosition.Left och DockPosition.Right). Vyer som inte är explicit dockade (eller som har DockPosition.None) visas i mitten (eller mellan Överst / Nederst och Vänster / Höger).

DockLayout-koncept

Skapa en DockLayout

Följande avsnitt beskriver hur du använder en DockLayout i både C# och XAML.

XAML

Inklusive XAML-namnområdet

För att kunna använda verktygslådan i XAML måste följande xmlns läggas till på sidan eller vyn:

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

Därför följande:

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

Skulle ändras för att inkludera xmlns på följande sätt:

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

Använda DockLayout

En grundläggande DockLayout kan skapas i XAML som du ser här:

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

För dockning till vänster / höger ska en WidthRequest anges. För dockning överst / i nederkant definierar en HeightRequest storleken på den underordnade vyn längs dockningsriktningen. Ortogonala riktningar beräknas alltid implicit av DockLayout chefen.

C#

En DockLayout kan konstrueras bekvämt i C# som du ser här:

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

DockPosition.None Obs! är standard och kan utelämnas.

Ställa in dockningspositionen

Om du vill ange dockningspositionen från C#använder du DockLayout.SetDockPosition(IView, DockPosition) för att tillämpa den anslutna DockPosition egenskapen.

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

Anpassa en DockLayout

En DockLayout container stöder godtyckliga Padding och flera DockLayoutspecifika egenskaper för anpassning. Ett exempel i XAML med alla tillgängliga alternativ finns här:

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

Egenskaper

Fastighet Type Description
Padding Thickness Hämtar eller anger utfyllnad runt layoutcontainern (ärvd från Layout).
HorizontalSpacing double Hämtar eller anger det horisontella avståndet mellan dockade vyer.
VerticalSpacing double Hämtar eller anger det lodräta avståndet mellan dockade vyer.
HorizontalSpacing och VerticalSpacing tillämpas mellan närliggande vyer i DockLayout. Till exempel infogas HorizontalSpacing mellan vyerna Vänster, Ingen och Höger, men också mellan angränsande vyer i samma DockPosition, till exempel flera vyer som är dockade till Vänster. VerticalSpacing återges mellan vertikalt staplade vyer i positionerna Överst, Ingen och Nederst.
ShouldExpandLastChild bool Om värdet är sant expanderas det sista underordnade elementet för att fylla det återstående utrymmet (standard: true).

Ytterligare anteckningar

Om DockLayout används i ett utrymme med begränsade mått (särskilt när en storlek anges via HeightRequest eller WidthRequest på containern) avgörs prioriteten av den ordning i vilken de underordnade vyerna läggs till i DockLayout-containern. När det därför inte finns tillräckligt med utrymme för att rendera alla underordnade vyer tas de underordnade vyer med lägst prioritet (som lades till sist) bort vid rendering. Därför bör du alltid kontrollera att containerns storlek är minst lika stor som minimistorleken för alla dess undervyer.

Exempel

Du hittar ett exempel på funktionen DockLayout i praktiken i exempelprogrammet .NET MAUI Community Toolkit.

API

Källkoden för DockLayout finns på .NET MAUI Community Toolkit GitHub-lagringsplatsen i DockLayout och DockLayoutManager.

  • Last updated on