DockLayout

Článek
11/11/2023

DockLayout je rozložení, kde lze zobrazení ukotvit na strany kontejneru rozložení.

Následující obrázek ukazuje, jak DockLayout je koncepčně strukturovaná. Podřízená zobrazení jsou ukotvena na jedné ze 4 možných dokovacích pozic: horní, dolní, levý nebo pravý (ekvivalent DockPosition.Top, , DockPosition.Bottom, DockPosition.Lefta DockPosition.Right). Zobrazení, která nejsou explicitně ukotvená (nebo sDockPosition.None) se zobrazují uprostřed (nebo mezi pozicemi horního / dolního a levého / pravého).

DockLayout concept

Sestavení DockLayoutu

V následujících částech se dozvíte, jak používat DockLayout jazyk C# i XAML.

XAML

Zahrnutí oboru názvů XAML

Pokud chcete použít sadu nástrojů v XAML, musíte do stránky nebo zobrazení přidat následující xmlns položky:

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

Proto platí následující:

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

Bylo by změněno tak, aby zahrnovalo xmlns následující:

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

Použití DockLayoutu

Základní DockLayout kód je možné vytvořit v XAML, jak je znázorněno tady:

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

Pro ukotvení WidthRequest zprava doleva / by se měla zadat hodnota. U ukotvení HeightRequest horního / dolního okraje definuje velikost podřízeného zobrazení podél směru ukotvení. Orthogonální směry jsou vždy vypočítány implicitně manažerem DockLayout .

C#

V jazyce C# lze pohodlně vytvořit A DockLayout , jak je znázorněno zde:

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

Poznámka: DockPosition.None je výchozí hodnota a je možné ji vynechat.

Nastavení umístění doku

Chcete-li nastavit umístění ukotvení z jazyka C#, použijte DockLayout.SetDockPosition(IView, DockPosition) připojenou DockPosition vlastnost.

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

Přizpůsobení DockLayoutu

Kontejner DockLayout podporuje libovolné Padding i několik DockLayoutvlastností specifických pro přizpůsobení. Tady je příklad v JAZYCE XAML se všemi dostupnými možnostmi:

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

Vlastnosti

Vlastnost	Type	Popis
`Padding`	`Thickness`	Získá nebo nastaví odsazení kolem kontejneru rozložení (zděděno z `Layout`).
`HorizontalSpacing`	`double`	Získá nebo nastaví vodorovné mezery mezi ukotvenými zobrazeními.
`VerticalSpacing`	`double`	Získá nebo nastaví svislé mezery mezi ukotvenými zobrazeními.
		`HorizontalSpacing` a `VerticalSpacing` používá se mezi sousedními zobrazeními v sadě `DockLayout`. Například `HorizontalSpacing` se přidá mezi zobrazení Vlevo, Žádný a Pravý , ale také mezi sousedními zobrazeními ve stejném `DockPosition` , jako je více zobrazení ukotvených k levé straně. `VerticalSpacing` se vykreslí mezi svisle skládanými zobrazeními v umístění Nahoře, Žádné a Dole .
`ShouldExpandLastChild`	`bool`	Pokud je hodnota true, poslední podřízená položka se rozbalí a vyplní zbývající mezeru (výchozí hodnota: `true`).

Další poznámky

Pokud DockLayout se používá v prostorovém omezeném místě (zejména s velikostí určenou prostřednictvím HeightRequest kontejneru nebo WidthRequest v kontejneru), má přednost pořadí, ve kterém jsou podřízená zobrazení přidána do kontejneru DockLayout . Pokud tedy není dostatek místa pro vykreslení všech podřízených zobrazení, při vykreslování se odeberou podřízené podřízené položky s nejnižší prioritou (které byly přidány jako poslední). Z tohoto důvodu byste měli vždy zkontrolovat, jestli velikost kontejneru pokrývá alespoň minimální velikost všech podřízených zobrazení.

Příklady

Příklad DockLayout funkce v akci najdete v ukázkové aplikaci .NET MAUI Community Toolkit.

rozhraní API

Zdrojový kód pro DockLayout over najdete v úložišti .NET MAUI Community Toolkit na GitHubu v DockLayout a DockLayoutManager.

Sdílet prostřednictvím