¡En ocasiones tenemos que adaptar nuestro diseño para dispositivos plegables y darle la mejor experiencia al usuario ¡Y hoy aprenderemos cómo hacerlo en .NET MAUI usando el TwoPaneView!
Este artículo tendrá la siguiente estructura:
¿Qué es TwoPaneView?
Soporte de dispositivo plegable
Configuración inicial
Adición de TwoPaneView
Limitaciones
¡Empecemos!
¿Qué es TwoPaneView?
La clase TwoPaneView representa un contenedor con dos vistas que pueden estar una al lado o debajo de la otra, estas vistas se ajustan al tamaño y posición del contenido en el espacio disponible en el dispositivo.
Compatibilidad con dispositivos plegables
Los dispositivos plegables incluyen Microsoft Surface Duo y dispositivos Android de otros fabricantes. Esto facilita la adaptación del diseño a diferentes tipos de dispositivos móviles o informáticos mientras se ajusta el tamaño de la pantalla y las orientaciones en el mismo dispositivo, incluida la adaptación a una bisagra o pliegue en la pantalla.
Configuración inicial
Para implementarlo en nuestra App, debes de aplicar algunos pasos los cuales te explico a continuación:
Desde NuGet Package agrega el plugin: Microsoft.Maui.Controls.Foldable
¡Ahora, agreguemos los paneles a la pantalla!
Una vez que tenemos la configuración anterior aplicada, ¡comencemos con la implementación en código del TwoPaneView! 
¡Lo primero que necesitas es agregar el espacio de nombres al XAML!
| xmlns:foldable="clr-namespace:Microsoft.Maui.Controls.Foldable;assembly=Microsoft.Maui.Controls.Foldable" |
by Entendiendo la estructura del código
<foldable:TwoPaneView>: Es responsable de inicializar TwoPaneView.
<foldable:TwoPaneView.PaneX>:Indica cada uno de los paneles, dentro debes agregar todos los elementos visuales que necesites. Donde dice “PaneX” puedes sustituirlo tanto por Pane1 como por Pane2.
PaneX: Aquí puedes agregar el Panel en el que estás trabajando, que puede ser “Panel1” o “Panel2”. Es necesario repetir las mismas etiquetas del paso anterior para cada Panel.
Implementación de código
| <foldable:TwoPaneView x:Name="twoPaneView"> | |
| <foldable:TwoPaneView.Pane1> | |
| <Label Text="Hello, .NET MAUI!" HorizontalOptions="Center" /> | |
| </foldable:TwoPaneView.Pane1> | |
| <foldable:TwoPaneView.Pane2> | |
| <VerticalStackLayout BackgroundColor="Pink"> | |
| <Label Text="This is the Pane2"/> | |
| </VerticalStackLayout> | |
| </foldable:TwoPaneView.Pane2> | |
| </foldable:TwoPaneView> |
TwoPaneView: Modos
Tenemos algunas propiedades que nos ayudan a organizar las posiciones de cada panel en nuestra pantalla, veamos cada una de ellas:
Wide: Mediante la propiedad WideModeConfiguration los paneles se organizan horizontalmente en la pantalla.
Los valores admitidos que permiten organizar los paneles son los siguientes:
LeftRight: Organiza los paneles de izquierda a derecha.
RightLeft: Organiza los paneles de derecha a izquierda.
SinglePane: Solo se ve un panel.
| <foldable:TwoPaneView x:Name="twoPaneView" WideModeConfiguration="LeftRight | RightLeft | SinglePane"> | |
| <!-- Add you Panels here --> | |
| </foldable:TwoPaneView> |
Tall: Mediante la propiedad TallModeConfiguration los paneles se organizan verticalmente en la pantalla.
| <foldable:TwoPaneView x:Name="twoPaneView" TallModeConfiguration="BottomTop | TopBottom | SinglePane"> | |
| <!-- Add you Panels here --> | |
| </foldable:TwoPaneView> |
Los valores admitidos que permiten organizar los paneles son los siguientes:
BottomTop: Organiza los panales de abajo hacia arriba.
TopBottom: Organiza los panales de arriba hacia abajo.
SinglePane: Solo se ve un panel.
Ten en cuenta que solo uno de estos modos puede estar activo.
Controle TwoPaneView cuando solo está en una pantalla
- MinTallModeHeight es responsable de establecer la altura mínima que debe tener el control para ingresar al modo Alto.
- MinWideModeWidth es responsable de establecer el ancho mínimo que debe tener el control para entrar en modo Wide.
- Pane1Length / Pane2Length establece el ancho de Pane1 y Pane2 respectivamente. La altura de ambos paneles en el modo alto no tiene efecto en el modo SinglePane.
- Propiedades que se aplican en una o dos pantallas
- TallModeConfiguration establece dos opciones, la primera es cuando el diseño Superior/Inferior está en modo Alto, la segunda si solo desea que un único panel sea visible según lo definido por TwoPaneViewPriority.
- WideModeConfiguration establece dos opciones, la primera es cuando está en modo ancho, la disposición izquierda/derecha, la segunda si solo desea que un solo panel sea visible según lo definido por TwoPaneViewPriority.
- PanePriority determina el Panel a mostrar (Pane1 o Pane2) cuando está en modo SinglePane.
Limitaciones
Si TwoPaneView se extiende a través de una bisagra o se pliega, las propiedades cuando solo está en una pantalla no tienen ningún efecto.
Solo se adapta a los dispositivos plegables de Android que introdujeron la API Jetpack Window Manager proporcionada por Google (como Microsoft Surface Duo).
En todas las demás plataformas y dispositivos, actúa como una vista dividida configurable y receptiva que puede mostrar dinámicamente uno o dos paneles, de tamaño proporcional en la pantalla.
¡Gracias por leer mi artículo! 
¡Hasta la próxima! 
Artículo en inglés: https://askxammy.com/getting-started-with-twopaneview-layout-in-net-maui/
