DockLayout

DockLayout es un diseño en el que las vistas se pueden acoplar a los lados del contenedor de diseño.

En la imagen siguiente se muestra cómo se estructura conceptualmente un DockLayout . Las vistas secundarias se acoplan en una de las 4 posibles posiciones de acoplamiento: Superior, Inferior, Izquierda o Derecha (equivalente a DockPosition.Top, DockPosition.Bottom, DockPosition.Left y DockPosition.Right). Las vistas que no están acopladas explícitamente (o con DockPosition.None) se muestran en el centro (o entre las posiciones Superior / Inferior e Izquierda / Derecha).

Creación de un DockLayout

En las secciones siguientes se explica cómo usar DockLayout en C# y XAML.

XAML

Incluir el espacio de nombres XAML

Para usar el kit de herramientas en XAML, es necesario agregar el siguiente xmlns a la página o vista:

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

Por lo tanto, el siguiente:

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

Se modificaría para incluir el xmlns de la siguiente manera:

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

Uso de DockLayout

Se puede crear un elemento básico DockLayout en XAML, como se muestra aquí:

<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 acoplamiento de Izquierda / Derecha se debe especificar un WidthRequest. Para acoplamiento Superior / Inferior, HeightRequest define el tamaño de la vista secundaria a lo largo de la dirección de acoplamiento. El administrador DockLayout siempre calcula implícitamente las direcciones ortogonales.

C#

DockLayout se puede construir cómodamente en C# como se muestra aquí:

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 es el valor predeterminado y se puede omitir.

Establecimiento de la posición de acoplamiento

Para establecer la posición de acoplamiento desde C#, use DockLayout.SetDockPosition(IView, DockPosition) para aplicar la propiedad adjunta DockPosition.

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

Personalización de un DockLayout

Un contenedor DockLayout admite propiedades arbitrarias Padding, así como varias propiedades específicas deDockLayout para la personalización. Aquí se proporciona un ejemplo en XAML con todas las opciones disponibles:

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

Propiedades

Notas adicionales

Si DockLayout se usa en un lugar limitado espacialmente (especialmente con un tamaño especificado mediante HeightRequest o WidthRequest en el contenedor), tiene precedencia el orden en el que se agregan las vistas secundarias al contenedor DockLayout. Por lo tanto, siempre que no haya suficiente espacio para que se representen todas las vistas secundarias, se quitarán los elementos secundarios de prioridad más baja (que se agregaron en último lugar) tras la representación. Por ese motivo, siempre debe comprobar que el tamaño del contenedor cubre al menos el tamaño mínimo de todas sus vistas secundarias.

Ejemplos

Puede encontrar un ejemplo de esta característica DockLayout en acción en la Aplicación de muestra del kit de herramientas de la comunidad de .NET MAUI.

API

Puede encontrar el código fuente de DockLayout en el repositorio de GitHub del Kit de herramientas de la comunidad de .NET MAUI en DockLayout y DockLayoutManager.