DockLayout

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 angedockt: Oben, Unten, Links oder Rechts (entspricht DockPosition.Top, DockPosition.Bottom, DockPosition.Left und DockPosition.Right). Ansichten, die nicht explizit angedockt sind (oder mit DockPosition.None versehen), werden in der Mitte angezeigt (oder zwischen den Positionen Oben / Unten sowie Links / Rechts).

Ein Dock-Layout erstellen

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"

Daher das Folgende:

<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 geändert werden, um das xmlns wie folgt 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>

Verwendung von 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. Beim Andocken oben / unten wird die Größe der untergeordneten Ansicht entlang der Andockrichtung durch HeightRequest definiert. Die orthogonalen Richtungen werden immer implizit vom DockLayout Manager 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

Um die Andockposition in C# festzulegen, verwenden Sie DockLayout.SetDockPosition(IView, DockPosition), um die Attached-Eigenschaft DockPosition 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

Weitere Hinweise

Wenn DockLayout in einem räumlich begrenzten Bereich verwendet wird (insbesondere wenn für den Container über HeightRequest oder WidthRequest eine Größe angegeben ist), richtet sich die Priorität nach der Reihenfolge, in der die untergeordneten Ansichten dem Container DockLayout hinzugefügt werden. Folglich werden, wenn nicht genügend Platz vorhanden ist, um alle untergeordneten Ansichten zu rendern, die untergeordneten Ansichten mit 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 das Feature DockLayout in Aktion in der .NET MAUI Community Toolkit-Beispielanwendung.

API

Sie finden den Quellcode für DockLayout im .NET MAUI Community Toolkit GitHub Repository in DockLayout und DockLayoutManager.