Diseño de .NET MAUI TwoPaneView

Artículo
02/13/2024

La clase TwoPaneView representa un contenedor con dos vistas que ajustan el tamaño y la posición del contenido en el espacio disponible, ya sea en paralelo o de arriba a abajo. TwoPaneView hereda de Grid, por lo que la manera más sencilla de pensar en estas propiedades es como si se aplicaran a una cuadrícula.

Surface Duo dual-screen emulator showing a basic TwoPaneView test app

El paquete NuGet Microsoft.Maui.Controls.Foldable proporciona el control de diseño.

Introducción a la compatibilidad con dispositivos plegables

Los dispositivos plegables incluyen los dispositivos Microsoft Surface Duo y Android de otros fabricantes. Acortan la brecha entre teléfonos y pantallas más grandes, como tabletas y escritorios, ya que es posible que las aplicaciones necesiten ajustarse a una variedad de tamaños de pantalla y orientaciones en el mismo dispositivo, incluida la adaptación a una bisagra o un plegado en la pantalla.

Visita los documentos para desarrolladores de doble pantalla para obtener más información sobre la creación de aplicaciones destinadas a dispositivos plegables, incluidos los patrones de diseño y las experiencias de usuario. También hay un emulador de Surface Duo que puedes descargar para Windows, Mac y Linux.

Importante

El control TwoPaneView solo se adapta a los dispositivos plegables Android que admiten la API Jetpack Window Manager proporcionada por Google (como Microsoft Surface Duo).

En todas las demás plataformas y dispositivos (es decir, otros dispositivos Android, iOS, macOS, Windows) actúa como una vista dividida configurable y dinámica que puede mostrar dinámicamente uno o dos paneles, de tamaño proporcional en la pantalla.

Adición y configuración de la compatibilidad plegable con NuGet

Abra el cuadro de diálogo Administrador de paquetes de NuGet para su solución.
En la pestaña Examinar, busca Microsoft.Maui.Controls.Foldable.
Instale el paquete de Microsoft.Maui.Controls.Foldable en la solución.
Agrega la llamada al método de inicialización UseFoldable() (y espacio de nombres) a la clase MauiApp del proyecto en el método CreateMauiApp:
```
using Microsoft.Maui.Foldable; // ADD THIS NAMESPACE
...
public static MauiApp CreateMauiApp()
{
    var builder = MauiApp.CreateBuilder();
    ...
    builder.UseFoldable(); // ADD THIS LINE TO THE TEMPLATE
    return builder.Build();
}
```
La inicialización UseFoldable() es necesaria para que la aplicación pueda detectar cambios en el estado de la aplicación, como el hecho de abarcar un espacio en todo el pliegue.
Actualiza el atributo [Activity(...)] en la clase MainActivity en Platforms/Android, de modo que incluya todas estas opciones de ConfigurationChanges:
```
ConfigurationChanges = ConfigChanges.Orientation | ConfigChanges.ScreenSize
    | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize | ConfigChanges.UiMode
```
Estos valores son necesarios para que los cambios de configuración y el espacio abarcado se puedan notificar para una compatibilidad con doble pantalla fiable.

Configuración de TwoPaneView

Para agregar el diseño TwoPaneView a la página:

Agrega un alias de espacio de nombres foldable para el NuGet plegable:

xmlns:foldable="clr-namespace:Microsoft.Maui.Controls.Foldable;assembly=Microsoft.Maui.Controls.Foldable"

Agrega TwoPaneView como elemento raíz en la página y agrega controles a Pane1 y Pane2:

<foldable:TwoPaneView x:Name="twoPaneView">
    <foldable:TwoPaneView.Pane1
        BackgroundColor="#dddddd">
        <Label
            Text="Hello, .NET MAUI!"
            SemanticProperties.HeadingLevel="Level1"
            FontSize="32"
            HorizontalOptions="Center" />
    </foldable:TwoPaneView.Pane1>
    <foldable:TwoPaneView.Pane2>
        <StackLayout BackgroundColor="{AppThemeBinding Light={StaticResource Secondary}, Dark={StaticResource Primary}}">
            <Label Text="Pane2 StackLayout"/>
        </StackLayout>
    </foldable:TwoPaneView.Pane2>
</foldable:TwoPaneView>

Descripción de los modos de TwoPaneView

Solo puede estar activo uno de estos modos:

SinglePane actualmente solo hay un panel visible.
Wide los dos paneles se disponen en horizontal. Un panel se sitúa a la izquierda y el otro a la derecha. Cuando se muestra en dos pantallas, en este modo el dispositivo está en vertical.
Tall los dos paneles se disponen en vertical. Un panel está en la parte superior y el otro en la parte inferior. Cuando se muestra en dos pantallas, en este modo el dispositivo está en horizontal.

Control de TwoPaneView cuando solo está en una pantalla

Las siguientes propiedades se aplican cuando TwoPaneView ocupa una sola pantalla:

MinTallModeHeight indica el alto mínimo que debe tener el control para entrar en modo Tall.
MinWideModeWidth indica el ancho mínimo que debe tener el control para entrar en modo Wide.
Pane1Length establece el ancho de Pane1 en el modo Wide, el alto de Pane1 en modo Tall y no tiene ningún efecto en el modo SinglePane.
Pane2Length establece el ancho de Pane2 en el modo Wide, el alto de Pane2 en modo Tall y no tiene ningún efecto en el modo SinglePane.

Importante

Si TwoPaneView se distribuye en una bisagra o pliegue, estas propiedades no tienen ningún efecto.

Propiedades que se aplican cuando se está en una pantalla o en dos

Las siguientes propiedades se aplican cuando TwoPaneView ocupa una sola pantalla o dos pantallas:

Cuando TallModeConfiguration está en modo Tall, indica la disposición de arriba a abajo, o bien, si solo quieres un panel visible según lo que se haya definido mediante TwoPaneViewPriority.
Cuando WideModeConfiguration está en modo Wide, indica la disposición de izquierda a derecha, o bien si solo quieres un panel visible según lo que se haya definido mediante TwoPaneViewPriority.
PanePriority determina si se va a mostrar Pane1 o Pane2 si está en modo SinglePane.

Solución de problemas

Si el diseño TwoPaneView no funciona del modo esperado, revisa otra vez las instrucciones de configuración de esta página. La omisión o la incorrecta configuración del método UseFoldable() o de los valores de atributo de ConfigurationChanges son causas comunes de error.