Construir interfaces que funcionen de forma idéntica en Android e iOS es una de las grandes promesas de .NET MAUI, y en esta práctica se demuestra paso a paso cómo lograrlo. Desde la configuración de imágenes hasta el uso de Grid, Frame y propiedades como RowSpan y ColumnSpan, cada detalle se implementa en tiempo real con resultados visibles en ambos emuladores.
¿Cómo preparar los recursos e imágenes en .NET MAUI?
Antes de escribir cualquier línea de interfaz, es fundamental ubicar la carpeta Resource > Images [0:29]. Allí se agregan las imágenes necesarias, en este caso la imagen principal y un ícono de flecha. Un punto clave es que el Build Action de cada imagen debe estar establecido como Maui Image para que el framework las reconozca correctamente.
Además, se crea una nueva carpeta llamada views que contiene el archivo XAML JobProfilePage [0:50]. Este archivo será la base de toda la interfaz que se construye desde cero.
Cuando trabajas con imágenes PNG, no necesitas especificar la extensión .png en la propiedad source; basta con indicar el nombre del archivo [2:26].
¿Cómo estructurar un layout con Grid, filas y columnas?
El layout principal utiliza un Grid sin columnas declaradas, ya que solo se necesita una columna [1:27]. Cuando un grid tiene una sola columna, no es necesario declararla explícitamente.
- Se definen tres filas: dos con valor auto y una proporcional [1:37].
- La primera fila contiene la imagen principal.
- La segunda y tercera filas contienen los frames con la información del perfil.
Cada control dentro del grid debe posicionarse con las propiedades Grid.Row y Grid.Column [1:55]. Olvidar esta asignación es un error frecuente que hace desaparecer elementos de la vista.
¿Qué es ColumnSpan y RowSpan y cómo se aplican?
El ColumnSpan permite que un elemento abarque múltiples columnas [4:26]. Por ejemplo, el label del nombre se extiende con Grid.ColumnSpan="3" para ocupar las tres columnas del grid interno.
De forma similar, el RowSpan se usa en el botón del segundo frame [9:40] para que este abarque dos filas, logrando que quede visualmente centrado junto a los labels de texto.
¿Cómo funciona el salto de línea dentro de un label?
Para mostrar texto en varias líneas dentro de un mismo label, se utiliza la secuencia 
 [4:04]. Esto genera un salto de línea sin necesidad de crear labels adicionales, ideal para combinar nombre y apellido en un solo control.
¿Cómo personalizar frames y aplicar efectos visuales?
Los Frame agrupan contenido con esquinas redondeadas mediante CornerRadius [3:08]. Algunas propiedades esenciales:
- HasShadow se establece en false para eliminar la sombra por defecto [6:42].
- BorderColor transparente elimina el borde visible [3:37].
- Un BackgroundColor diferenciado crea contraste entre secciones [3:18].
¿Qué es el margin negativo y cómo genera overlapping?
Para lograr un efecto de superposición (overlapping) entre el segundo frame y el primero, se aplica un margin con valor negativo [8:22]. Este valor negativo desplaza el elemento hacia arriba, rompiendo el flujo normal del diseño y generando la sensación de que un frame se monta sobre el otro.
¿Cómo controlar el espaciado con Padding y RowSpacing?
El Padding define el espacio interno entre el contenedor y sus elementos hijos [5:33]. Sus cuatro valores representan: izquierda, arriba, derecha y abajo.
El RowSpacing controla la distancia entre filas del grid [4:57], generando mayor desahogo visual. Valores de diez o veinte píxeles son comunes para interfaces limpias.
Para los labels de la tabla de seguidores, se usa un padding con valores específicos como 0,15,0,0 [5:47] para separar solo la parte superior respecto a los elementos anteriores.
¿Cómo agregar un botón con imagen y estilo personalizado?
El botón del frame inferior recibe un BackgroundColor blanco y un ImageSource con el ícono de flecha [9:24]. Se le asignan dimensiones cuadradas de cuarenta y cinco para ancho y alto, y un margin horizontal de diez para separarlo de los labels adyacentes [10:02].
La propiedad VerticalOptions con valor Start reposiciona el botón hacia la parte superior de su celda [10:45].
Todo el código funciona de manera idéntica al cambiar entre el emulador de Android y el simulador de iOS [1:09], seleccionando el dispositivo desde la barra superior del entorno de desarrollo. Los recursos, imágenes y colores hexadecimales están disponibles en el repositorio de GitHub para que puedas replicar y experimentar cambiando propiedades y estilos por tu cuenta.
