¡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!
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
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.
➖ Tall: Mediante la propiedad TallModeConfiguration los paneles se organizan verticalmente en la pantalla.
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/
