DockLayout

Artigo
03/19/2024

O 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 quatro posições de encaixe possíveis: Superior, Inferior, Esquerda ou Direita (equivalente a DockPosition.Top, DockPosition.Bottom, DockPosition.Left e DockPosition.Right). Os modos de exibição que não estão explicitamente encaixados (ou com DockPosition.None) são exibidos no centro (ou entre as posições Superior / Inferior e Esquerda / Direita).

DockLayout concept

Criando um DockLayout

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

XAML

Incluir 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 conforme 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"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">

</ContentPage>

Usando o DockLayout

Um DockLayout básico pode ser criado no 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 encaixe deEsquerda / Direita, um WidthRequest deve ser especificado. Para Superior / Inferior, um HeightRequest define o tamanho do modo de exibição filho ao longo da direção de encaixe. As direções ortogonais são sempre calculadas implicitamente pelo gerente de DockLayout.

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.

Definição da posição de encaixe

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

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

Personalização de um DockLayout

Um contêiner de DockLayout dá suporte a Padding arbitrárias, bem como a várias propriedades DockLayout 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

Propriedade	Type	Descrição
`Padding`	`Thickness`	Obtém ou define o preenchimento ao redor do contêiner de layout (herdado de `Layout`).
`HorizontalSpacing`	`double`	Obtém ou define o espaçamento horizontal entre exibições encaixadas.
`VerticalSpacing`	`double`	Obtém ou define o espaçamento vertical entre as exibições encaixadas.
		`HorizontalSpacing` e `VerticalSpacing` são aplicados entre exibições vizinhas no `DockLayout`. Por exemplo, `HorizontalSpacing` é adicionado entre modos de exibição Esquerdo, Nenhum e Direitp, mas também entre exibições vizinhas no mesmo `DockPosition`, como várias exibições encaixadas à Esquerda. `VerticalSpacing` é renderizado entre exibições empilhadas verticalmente nas posições Superior, Nenhume Inferior.
`ShouldExpandLastChild`	`bool`	Se verdadeiro, o último filho será expandido para preencher o espaço restante (padrão: `true`).

Observações adicionais

Se DockLayout for usado em um local restrita espacialmente (especialmente com um tamanho especificado por meio de HeightRequest ou WidthRequest no contêiner), a precedência será fornecida pela ordem em que os modos de exibição filho são adicionados ao contêiner de DockLayout. Consequentemente, sempre que não houver espaço suficiente para que todas as exibições filho sejam renderizadas, os filhos de menor prioridade (que foram adicionados por último) serão removidos 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

Encontre um exemplo do recurso DockLayout em ação na Amostra de aplicativo do Kit de Ferramentas da Comunidade do .NET MAUI.

API

O código-fonte do DockLayout pode ser encontrado no repositório GitHub do .NET MAUI Community Toolkit em DockLayout e DockLayoutManager.

Compartilhar via