DockLayout

DockLayout è un layout in cui le visualizzazioni possono essere ancorate ai lati del contenitore di layout.

L'immagine seguente mostra come un oggetto DockLayout è strutturato concettualmente. Le visualizzazioni figlio sono ancorate a una delle 4 possibili posizioni di ancoraggio: Top, Bottom, Left o Right (equivalente a DockPosition.Top, DockPosition.BottomDockPosition.Left, e DockPosition.Right). Le visualizzazioni che non sono ancorate in modo esplicito (o con DockPosition.None) vengono visualizzate al centro (o tra le posizioni superiore / inferiore e sinistra / destra ).

Creare un DockLayout

Le sezioni seguenti illustrano come usare un DockLayout in C# e XAML.

XAML

Inclusione del namespace XAML

Per usare il toolkit in XAML, è necessario aggiungere le informazioni seguenti xmlns nella pagina o nella visualizzazione:

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

Di conseguenza:

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

Verrà modificato in modo da includere il xmlns come indicato di seguito:

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

Utilizzo di DockLayout

Un elemento di base DockLayout può essere creato in XAML, come illustrato di seguito:

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

Per l'ancoraggio a sinistra / /destra, WidthRequest deve essere specificato. Per l'aggancio Top / Bottom, HeightRequest definisce la dimensione della vista figlia nella direzione di aggancio. Le direzioni ortogonali vengono sempre calcolate in modo implicito dal DockLayout responsabile.

C#

Un DockLayout oggetto può essere costruito comodamente in C# come illustrato di seguito:

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

Nota: DockPosition.None è il valore predefinito e può essere omesso.

Impostazione della posizione di ancoraggio

Per impostare la posizione di ancoraggio da C#, usare DockLayout.SetDockPosition(IView, DockPosition) per applicare la proprietà associata DockPosition .

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

Personalizzazione di un DockLayout

Un DockLayout contenitore supporta proprietà arbitrarie Padding e diverse DockLayoutproprietà specifiche per la personalizzazione. Di seguito è riportato un esempio in XAML con tutte le opzioni disponibili:

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

Proprietà

Note aggiuntive

Se DockLayout viene usato in una posizione con vincoli spaziali (in particolare con una dimensione specificata tramite HeightRequest o WidthRequest nel contenitore), la precedenza viene assegnata dall'ordine in cui le visualizzazioni figlio vengono aggiunte al DockLayout contenitore. Di conseguenza, ogni volta che non è disponibile spazio sufficiente per il rendering di tutte le viste figlio, i figli con priorità più bassa (aggiunti per ultimo) verranno rimossi al rendering. Per questo motivo, è sempre necessario verificare che le dimensioni del contenitore coprono almeno le dimensioni minime di tutte le viste figlio.

Esempi

È possibile trovare un esempio della funzionalità DockLayout in azione nell'applicazione di esempio .NET MAUI Community Toolkit.

API

È possibile trovare il codice sorgente per DockLayout nel repository GitHub di .NET MAUI Community Toolkit, in DockLayout e DockLayoutManager.