StackLayout y Frame para tarjetas en MAUI

Si estás dando tus primeros pasos con .NET MAUI, entender los layouts te cambia el juego. Son la base para organizar controles y vistas en tu aplicación, y aquí vas a aprender cómo usar StackLayout, sus variantes optimizadas y cómo combinarlos con Frame para construir interfaces reales.

¿Qué es un StackLayout en .NET MAUI y cómo funciona?

El StackLayout organiza vistas secundarias de manera unidimensional, ya sea vertical u horizontalmente. Por defecto trabaja en orientación vertical, pero puedes cambiarlo con la propiedad orientation [01:00].

Este control se heredó de Xamarin.Forms, pero en .NET MAUI llegaron mejoras pensadas en el rendimiento. Y ahí es donde entran dos protagonistas nuevos.

¿Cuál es la diferencia entre StackLayout y VerticalStackLayout? El StackLayout necesita la propiedad orientation para definir su dirección. El VerticalStackLayout y el HorizontalStackLayout ya vienen orientados de fábrica y ofrecen mejor performance en tu app.

¿Cuándo conviene usar VerticalStackLayout o HorizontalStackLayout?

Usa estas variantes siempre que sepas de antemano la orientación que necesitas. El StackLayout clásico no está obsoleto, pero el rendimiento importa, sobre todo cuando tu UI crece.

• VerticalStackLayout: organiza controles de arriba hacia abajo de forma automática.
• HorizontalStackLayout: alinea controles de izquierda a derecha sin configuración adicional.
• StackLayout con orientation: útil si necesitas alternar dinámicamente la dirección.

¿Cómo crear un StackLayout paso a paso en Visual Studio?

En la demostración se arma un ejemplo sencillo dentro de un content page. Como layout padre se usa un VerticalStackLayout y dentro se anida un StackLayout con tres botones de colores distintos para visualizar el comportamiento [03:30].

Al agregar orientation="Horizontal" los botones se alinean en fila. Si reemplazas la etiqueta por HorizontalStackLayout, obtienes el mismo resultado visual pero con mejor manejo de recursos. Lo mismo aplica al cambiar a VerticalStackLayout.

¿Cómo aplicar layouts en una UI real con Frame e imágenes redondeadas?

El reto consiste en replicar una tarjeta de perfil que incluye imagen con bordes redondeados, dos labels para nombre y género, una descripción con emoji y todo contenido en un Frame con sombras [05:30].

¿Qué es un Frame en .NET MAUI? Es un contenedor que aporta bordes redondeados y sombras a su contenido. Se identifica visualmente por esa sensación de tarjeta elevada con esquinas suaves.

¿Qué propiedades necesita un Frame para verse bien?

El Frame exterior se configura con tres propiedades clave que definen su forma y posición en pantalla.

• CornerRadius="20": redondea los bordes de la tarjeta.
• Margin="20": separa el frame del borde de la página por igual en los cuatro lados.
• HeightRequest="320": define la altura estimada del contenedor.

El Margin acepta cuatro valores cuando los lados son distintos, pero si todos coinciden basta con un único número. Y como el Frame solo permite un hijo directo cuando hay varios elementos, dentro se coloca un VerticalStackLayout que organiza el contenido [08:30].

¿Cómo redondear una imagen dentro de un Frame?

Las imágenes en .NET MAUI no traen bordes redondeados por defecto. La técnica es envolver la imagen en otro Frame con propiedades específicas [10:00].

• IsClippingToBounds="True": obliga al contenido a respetar los bordes del frame.
• Padding="0": elimina cualquier distancia interna para que la imagen se adhiera completa.
• CornerRadius="10": define cuánto se curvan las esquinas de la imagen.

Dentro se agrega la etiqueta Image con la propiedad Source apuntando al recurso, en este caso Mary, junto con Aspect para controlar el ajuste visual.

¿Por qué mi imagen no aparece en .NET MAUI? Revisa la carpeta Resources/Images, da clic derecho sobre la imagen y verifica que el Build Action esté configurado como MauiImage. Sin esto, el recurso no se carga.

Si Hot Reload tarda en reflejar cambios, detén la aplicación y vuelve a ejecutarla. Es un comportamiento común y no representa un error de tu código.

¿Cómo organizar labels y alinear contenido en la tarjeta?

Después de la imagen vienen los labels con nombre, género y descripción [12:30]. Cada uno usa propiedades que afinan la tipografía y el color.

• FontAttributes="Bold": aplica negrita al texto, ideal para el nombre.
• FontSize: ajusta el tamaño de cada texto según jerarquía visual.
• TextColor: cambia el color del label del género para diferenciarlo.
• Padding: controla el espacio interno alrededor del texto.

Los emojis, como la manita despidiéndose, se agregan directamente en el texto sin configuración extra. Para que la imagen quede pegada al lado izquierdo se usa HorizontalOptions="Start", y para centrar toda la tarjeta en pantalla se aplica VerticalOptions="Center" al contenedor principal.

Reducir el Padding final ayuda a que la descripción no se desborde de la tarjeta y mantenga el diseño limpio. Con esto replicas el reto completo de la UI.

¿Ya probaste armar tu propia tarjeta de perfil? Sube un screenshot de tu código en los comentarios y comparte cómo te fue.