DockLayout

Artikel
03/15/2024

DockLayout ist ein Layout, in dem Ansichten an den Seiten des Layoutcontainers verankert werden können.

Die folgende Abbildung zeigt, wie eine DockLayout konzeptionell strukturiert ist. Untergeordnete Ansichten sind an einer von vier möglichen Andockpositionen verankert: oben, unten , links oder rechts (entspricht DockPosition.Top, , DockPosition.Bottom, DockPosition.Leftund DockPosition.Right). Ansichten, die nicht explizit angedockt sind (oder mit DockPosition.None) werden in der Mitte (oder zwischen den Positionen oben / unten und links / rechts ) angezeigt.

DockLayout concept

Erstellen eines DockLayout

In den folgenden Abschnitten wird beschrieben, wie Sie eine DockLayout in C# und XAML verwenden.

XAML

Einbinden des XAML-Namespace

Um das Toolkit in XAML verwenden zu können, muss der folgende xmlns-Abschnitt zu Ihrer Seite oder Ansicht hinzugefügt werden:

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

Der folgende Abschnitt:

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

Würde dann geändert werden, um xmlns einzubinden:

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

Verwenden des DockLayout

Eine grundlegende DockLayout Datei kann in XAML erstellt werden, wie hier gezeigt:

<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 das Andocken von links / rechts sollte ein WidthRequest Wert angegeben werden. Für das Andocken von oben / unten definiert eine HeightRequest Eigenschaft die Größe der untergeordneten Ansicht entlang der Andockrichtung. Die orthogonalen Wegbeschreibungen werden vom Vorgesetzten immer implizit DockLayout berechnet.

C#

Eine DockLayout kann bequem in C# erstellt werden, wie hier gezeigt:

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

Hinweis: DockPosition.None ist der Standardwert und kann weggelassen werden.

Festlegen der Dockposition

Verwenden Sie DockLayout.SetDockPosition(IView, DockPosition) zum Festlegen der Andockposition von C#, um die angefügte DockPosition Eigenschaft anzuwenden.

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

Anpassen eines DockLayouts

Ein DockLayout Container unterstützt beliebige Padding und mehrere DockLayoutspezifische Eigenschaften für die Anpassung. Hier finden Sie ein Beispiel in XAML mit allen verfügbaren Optionen:

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

Eigenschaften

Eigenschaft	Typ	Beschreibung
`Padding`	`Thickness`	Dient zum Abrufen oder Festlegen des Abstands um den Layoutcontainer (geerbt von `Layout`).
`HorizontalSpacing`	`double`	Dient zum Abrufen oder Festlegen des horizontalen Abstands zwischen angedockten Ansichten.
`VerticalSpacing`	`double`	Dient zum Abrufen oder Festlegen des vertikalen Abstands zwischen angedockten Ansichten.
		`HorizontalSpacing` und `VerticalSpacing` wird zwischen benachbarten Ansichten in der `DockLayout`. Beispielsweise wird zwischen den Ansichten "Links", `HorizontalSpacing` "Keine" und "Rechts" hinzugefügt, aber auch zwischen benachbarten Ansichten in demselben `DockPosition`wie mehrere Ansichten, die links angedockt sind. `VerticalSpacing` wird zwischen vertikalen gestapelten Ansichten in den Positionen "Oben", "Keine" und "Unten " gerendert.
`ShouldExpandLastChild`	`bool`	Wenn true, wird das letzte untergeordnete Element erweitert, um den verbleibenden Platz auszufüllen (Standard: `true`).

Weitere Hinweise

Wenn DockLayout an einem raumgeschränkten Ort verwendet wird (insbesondere mit einer über oder WidthRequest auf dem Container angegebenen HeightRequest Größe), erhält die Rangfolge die Reihenfolge, in der die untergeordneten Ansichten dem DockLayout Container hinzugefügt werden. Wenn nicht genügend Platz vorhanden ist, damit alle untergeordneten Ansichten gerendert werden können, werden die untergeordneten Elemente der niedrigsten Priorität (die zuletzt hinzugefügt wurden) beim Rendern entfernt. Aus diesem Grund sollten Sie immer überprüfen, ob die Größe des Containers mindestens die Mindestgröße aller untergeordneten Ansichten abdeckt.

Beispiele

Sie finden ein Beispiel für dieses Feature in Aktion in der DockLayout-Beispielanwendung für das .NET MAUI Community Toolkit.

API

Den Quellcode DockLayout finden Sie im GitHub-Repository .NET MAUI Community Toolkit in DockLayout und DockLayoutManager.

Freigeben über