DockLayout

DockLayout to układ, w którym widoki można zadokować po bokach kontenera układu.

Na poniższej ilustracji przedstawiono sposób, w jaki struktura DockLayout koncepcyjnie jest ustrukturyzowana. Widoki podrzędne są zadokowane w jednej z 4 możliwych pozycji dokowania: Górna, Dolna, Lewa lub Prawa (odpowiednik DockPosition.Top, DockPosition.Bottom, DockPosition.Lefti DockPosition.Right). Widoki, które nie są jawnie zadokowane (lub z DockPosition.None) są wyświetlane w środku (lub między położeniem u / góry dolnej i lewej). /

Tworzenie elementu DockLayout

W poniższych sekcjach opisano sposób używania elementu DockLayout w językach C# i XAML.

XAML

Dołączanie przestrzeni nazw XAML

Aby można było używać zestawu narzędzi w języku XAML, należy dodać następujące xmlns elementy do strony lub widoku:

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

W związku z tym następujące elementy:

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

Zostanie zmodyfikowana tak, aby zawierała następujące xmlns elementy:

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

Korzystanie z elementu DockLayout

Podstawowe DockLayout informacje można utworzyć w języku XAML, jak pokazano poniżej:

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

W przypadku dokowania po lewej / stronie należy określić wartość .WidthRequest W przypadku dokowania HeightRequest górnego / dolnego elementu definiuje rozmiar widoku podrzędnego wzdłuż kierunku dokowania. Kierunki ortogonalne są zawsze obliczane niejawnie przez DockLayout menedżera.

C#

Obiekt DockLayout można utworzyć wygodnie w języku C#, jak pokazano poniżej:

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

Uwaga: DockPosition.None jest wartością domyślną i można jej pominąć.

Ustawianie położenia docka

Aby ustawić położenie dokowania z języka C#, użyj polecenia DockLayout.SetDockPosition(IView, DockPosition) , aby zastosować dołączoną DockPosition właściwość.

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

Dostosowywanie elementu DockLayout

Kontener DockLayout obsługuje dowolne Padding , a także kilka DockLayoutwłaściwości specyficznych dla dostosowywania. Przykład w języku XAML ze wszystkimi dostępnymi opcjami podano tutaj:

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

Właściwości

Właściwości	Type	Opis
Padding	Thickness	Pobiera lub ustawia dopełnienie wokół kontenera układu (dziedziczone z Layoutelementu ).
HorizontalSpacing	double	Pobiera lub ustawia odstępy poziome między zadokowanych widoków.
VerticalSpacing	double	Pobiera lub ustawia odstępy w pionie między zadokowanych widoków.
		HorizontalSpacing element i VerticalSpacing jest stosowany między sąsiednimi widokami w elemencie DockLayout. Na przykład HorizontalSpacing jest dodawany między widokami Lewa, Brak i Prawa, ale także między sąsiednimi widokami w taki sam sposóbDockPosition, jak wiele widoków zadokowanych do lewej. VerticalSpacing program jest renderowany między pionowo skumulowanymi widokami w pozycjach Góra, Brak i Dolna .
ShouldExpandLastChild	bool	Jeśli wartość true, ostatnie dziecko zostanie rozwinięte, aby wypełnić pozostałe miejsce (ustawienie domyślne: true).

Dodatkowe uwagi

Jeśli DockLayout jest używany w miejscu ograniczonym przestrzennie (szczególnie w przypadku rozmiaru określonego za pośrednictwem HeightRequest lub WidthRequest w kontenerze), pierwszeństwo jest podane przez kolejność, w której widoki podrzędne są dodawane do kontenera DockLayout . W związku z tym za każdym razem, gdy nie ma wystarczającej ilości miejsca na renderowanie wszystkich widoków podrzędnych, podrzędne o najniższym priorytecie (które zostały dodane ostatnio) zostaną usunięte po renderowaniu. Z tego powodu należy zawsze sprawdzić, czy rozmiar kontenera obejmuje co najmniej minimalny rozmiar wszystkich widoków podrzędnych.

Przykłady

Przykład funkcji można znaleźć DockLayout w aplikacji przykładowej zestawu narzędzi .NET MAUI Community Toolkit.

interfejs API

Kod źródłowy można DockLayoutznaleźć w repozytorium GitHub zestawu narzędzi .NET MAUI Community Toolkit w obszarze DockLayout i DockLayoutManager.