DockLayout

DockLayout é um layout em que as exibições podem ser encaixadas nas laterais do contêiner de layout.

A imagem abaixo mostra como um DockLayout é estruturado conceitualmente. As exibições filho são encaixadas em uma das 4 posições de encaixe possíveis: Superior, Inferior, Esquerda ou Direita (equivalente a DockPosition.Top, DockPosition.Bottom, DockPosition.Lefte DockPosition.Right). As visualizações que não estão explicitamente acopladas (ou com DockPosition.None) são exibidas no centro (ou entre Superior / Inferior e Esquerda / Direita).

Criando um DockLayout

As seções a seguir abordam como usar um DockLayout em C# e XAML.

XAML

Incluindo o namespace XAML

Para usar o kit de ferramentas no XAML, o xmlns a seguir precisa ser adicionado à sua página ou exibição:

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

Portanto, 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 maneira:

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

Como usar o DockLayout

Um básico DockLayout 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 / à direita, um WidthRequest deve ser especificado. Para acoplamento superior / inferior, HeightRequest define o tamanho da vista filha na direção do acoplamento. As direções ortogonais são sempre calculadas implicitamente pelo DockLayout gerente.

C#

Um DockLayout pode ser construído convenientemente em C# conforme 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" } },
    }
};

Observação: DockPosition.None é o padrão e pode ser omitido.

Definindo a posição do dock

Para definir a posição de encaixe no 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 DockLayout

Um DockLayout contêiner dá suporte a Padding propriedades arbitrárias, bem como várias DockLayoutpropriedades específicas para personalização. Um exemplo em XAML com todas as opções disponíveis é dado 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 usado em um local com espaço limitado (especialmente com um tamanho especificado por meio de HeightRequest ou WidthRequest no contêiner), a precedência é determinada pela ordem em que as views filhas são adicionadas ao contêiner DockLayout. Consequentemente, sempre que não houver espaço suficiente para que todas as exibições filho sejam renderizadas, as crianças de menor prioridade (que foram adicionadas por último) serão removidas após a renderização. Por esse motivo, você sempre deve verificar se o tamanho do contêiner cobre pelo menos o tamanho mínimo de todas as suas exibições filho.

Exemplos

Você pode encontrar um exemplo do recurso DockLayout em ação no aplicativo de exemplo .NET MAUI Community Toolkit.

API

Você pode encontrar o código-fonte para DockLayout no repositório GitHub do .NET MAUI Community Toolkit no DockLayout e DockLayoutManager.