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.Lefty DockPosition.Right). Las vistas que no estén acopladas explícitamente (o con la opción DockPosition.None) se muestran en el centro (o entre las posiciones Superior / Inferior y Izquierda / Derecha).

Creación de un diseño DockLayout

En las secciones siguientes se explica cómo usar un DockLayout tanto en C# como en 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, lo 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 el acoplamiento a la izquierda / a la derecha, se debe especificar un WidthRequest. Para el acoplamiento superior / inferior, un valor de tamaño HeightRequest define el tamaño de la vista hija en la dirección de acoplamiento. Las direcciones ortogonales siempre las calcula implícitamente el gestor DockLayout.

C#

Un DockLayout se puede construir fácilmente 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#, usa 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 DockLayout contenedor admite propiedades arbitrarias Padding , así como varias DockLayoutpropiedades específicas 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 espacio limitado (especialmente con un tamaño especificado mediante HeightRequest o WidthRequest en el contenedor), la prioridad viene determinada por el orden en que se añaden las vistas hijas al contenedor DockLayout. Por lo tanto, siempre que no haya suficiente espacio para mostrar todas las vistas secundarias, las vistas secundarias con menor prioridad (las que se añadieron en último lugar) se eliminarán al mostrarse. 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 la funcionalidad DockLayout en acción en la aplicación de ejemplo de .NET MAUI Community Toolkit.

API

Puede encontrar el código fuente de DockLayout en el repositorio de GitHub de .NET MAUI Community Toolkit, en DockLayout y DockLayoutManager.