DockLayout

DockLayout é um layout onde as vistas podem ser acopladas aos lados do contentor de layout.

A imagem abaixo mostra como a DockLayout está estruturada conceptualmente. As vistas filhos são acopladas numa das 4 posições possíveis de acoplagem: Cima, Inferior, Esquerda ou Direita (equivalente a DockPosition.Top, DockPosition.Bottom, DockPosition.Left, e DockPosition.Right). As vistas que não estão explicitamente acopladas (ou com DockPosition.None) são apresentadas no centro (ou entre as posições Superior / Inferior e Esquerda / Direita).

Construção de um DockLayout

As secções seguintes explicam como usar a DockLayout tanto em C# como em XAML.

XAML

Incluindo o namespace XAML

Para usar o kit de ferramentas em XAML, a seguinte xmlns precisa ser adicionada à sua página ou vista.

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

Por conseguinte, o seguinte:

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

Seria modificado para incluir o xmlns da seguinte forma:

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

Utilização do DockLayout

Um DockLayout básico pode ser criado em XAML, conforme mostrado aqui:

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

Para ancoragem à Esquerda / ou à Direita, um WidthRequest deve ser especificado. Para a ancoragem Top / Bottom, um HeightRequest define o tamanho da vista filha na direção de ancoragem. As direções ortogonais são sempre calculadas implicitamente pelo DockLayout gestor.

C#

A DockLayout pode ser construído convenientemente em C#, como mostrado aqui:

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 é o padrão e pode ser omitido.

Definição da posição do cais

Para definir a posição de acoplamento a partir de C#, use DockLayout.SetDockPosition(IView, DockPosition) para aplicar a propriedade anexada DockPosition .

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

Personalização de um DockLayout

Um DockLayout contentor suporta propriedades arbitrárias Padding e várias DockLayoutespecíficas para personalização. Um exemplo em XAML com todas as opções disponíveis é apresentado aqui:

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

Propriedades

Notas adicionais

Se DockLayout for utilizado num espaço com restrições de espaço (especialmente com um tamanho especificado através de HeightRequest ou WidthRequest no contentor), a precedência é determinada pela ordem pela qual as vistas filhas são adicionadas ao contentor DockLayout. Consequentemente, sempre que não houver espaço suficiente para todas as visualizações filhas serem renderizadas, as filhas de menor prioridade (que foram adicionadas por último) serão removidas na renderização. Por esse motivo, deve sempre verificar se o tamanho do recipiente cobre pelo menos o tamanho mínimo de todas as suas vistas filhas.

Exemplos

Pode encontrar um exemplo da funcionalidade DockLayout em ação no .NET MAUI Community Toolkit Sample Application.

API

Pode encontrar o código-fonte de DockLayout no repositório GitHub Community Toolkit .NET MAUI em DockLayout e DockLayoutManager.