Perfil de empleo en .NET MAUI con XAML

Diseñar interfaces multiplataforma con .NET MAUI te permite escribir una sola vez y ejecutar el mismo código tanto en Android como en iOS. Aquí aprenderás a construir paso a paso una pantalla de perfil profesional usando XAML, grids, frames y propiedades visuales que dan acabado a tu layout.

¿Cómo preparar los recursos antes de escribir XAML?

Antes de tocar una sola línea de código, necesitas tener tus archivos en el lugar correcto. Esto evita errores de carga y mantiene tu proyecto organizado.

• Carpeta Resources/Images con la imagen principal (jose) y el ícono de la flecha (arrow).
• Build action configurado como MAUI Image en cada recurso.
• Carpeta Views/JobProfileUI con el archivo JobProfilePage.xaml recién creado.

Un detalle que ahorra tiempo: cuando trabajas con archivos .png, no necesitas escribir la extensión al referenciarlos desde la propiedad Source.

¿Qué es el build action MAUI Image? Es la marca que le indica al compilador que ese archivo debe procesarse como recurso de imagen multiplataforma, generando versiones optimizadas para cada sistema operativo.

¿Cómo estructurar el layout principal con Grid?

El primer paso es crear un grid que agrupe los tres bloques de la pantalla: la imagen del perfil, el bloque de información y el bloque de acción.

Cuando tu grid tiene una sola columna, no hace falta declararla. Solo defines las filas. En este caso son tres: dos en Auto (para la imagen y el primer frame) y una proporcional (*) para el segundo frame.

La imagen principal va en la fila cero con Aspect="AspectFill", alineada horizontalmente al centro y con un tamaño de 360. La propiedad Source apunta al nombre del archivo (jose) sin la extensión.

¿Cómo construir el primer Frame con la información del perfil?

Este frame contiene el nombre, la descripción y la tabla de seguidores. Para que se vea limpio sobre el fondo crema de la pantalla, necesitas configurar varias propiedades.

• CornerRadius="20" para esquinas redondeadas.
• BackgroundColor blanco para diferenciarlo del fondo.
• BorderColor="Transparent" para eliminar el borde negro por defecto.
• HasShadow="False" porque el valor por defecto es True y agrega una sombra que no queremos.

Dentro del frame va otro grid con cuatro filas en Auto y tres columnas proporcionales. Le agregas RowSpacing="10" para dar respiro entre filas y un Padding="20" para separar el contenido del borde.

¿Cómo lograr saltos de línea dentro de un Label?

Para que el nombre se muestre en dos líneas (primero James, luego Martini Jr.), insertas un salto de línea dentro del propio texto del Label. Así el contenido se divide visualmente sin necesidad de crear dos controles distintos.

Este primer Label lleva FontAttributes="Bold", FontSize="23" y, como abarca las tres columnas, le añades Grid.ColumnSpan="3".

¿Cómo añadir emojis y colores en los Labels secundarios?

Los emojis son simplemente caracteres, así que puedes pegarlos directo en el texto sin propiedades adicionales. Al Label descriptivo le aplicas TextColor="Silver" para un gris suave y lo alineas al inicio.

Un error común aquí: olvidar que la primera columna es la cero, no la uno. Si tu texto aparece desplazado, revisa el valor de Grid.Column.

¿Cómo construir la tabla de Applied, Reviewed y Contacts?

En la fila dos del grid interno colocas tres Labels con los títulos, cada uno en su columna correspondiente (0, 1 y 2). Todos comparten estas propiedades:

• FontAttributes="Bold".
• Padding con cuatro valores (izquierda, arriba, derecha, abajo) para controlar el espacio en cada lado.
• HorizontalOptions="Center" en los que necesitan estar centrados.

¿Cómo funciona el Padding con cuatro valores? El primer valor mueve el contenido desde la izquierda, el segundo desde arriba, el tercero desde la derecha y el cuarto desde abajo. Te da control total sobre el espacio interno.

En la fila siguiente repites la estructura pero con los números, aumentando el FontSize para que destaquen sobre los títulos.

¿Cómo crear el segundo Frame con efecto overlapping?

Este bloque tiene un detalle visual interesante: se monta ligeramente sobre el frame anterior. Para lograrlo usas un Margin con valor negativo en la parte superior.

• HeightRequest="120" para limitar la altura.
• Margin negativo arriba y abajo para el efecto overlapping.
• Padding="15" para separar el contenido interno del borde.
• VerticalOptions y HorizontalOptions centrados.

Dentro va un grid con dos filas en Auto y dos columnas: la primera proporcional (toma el espacio restante) y la segunda en Auto (solo el espacio que necesite el botón).

¿Cómo hacer que un botón abarque varias filas?

El botón con la flecha vive en la columna uno y debe ocupar las dos filas del grid. La propiedad clave es Grid.RowSpan="2".

Además le aplicas:

• BackgroundColor="White".
• ImageSource="arrow".
• WidthRequest y HeightRequest en 45 para mantenerlo cuadrado.
• Margin="10" para separarlo de los Labels.
• VerticalOptions="Start" para anclarlo arriba.

¿Por qué este código funciona igual en Android e iOS?

La promesa de .NET MAUI es exactamente esa: un solo XAML que se renderiza nativamente en cada plataforma. Para cambiar el dispositivo de prueba, solo seleccionas el emulador desde la barra superior, por ejemplo iPhone 11 Pro Max, y ejecutas con el ícono de play.

Los toques finales incluyen quitar la orientación forzada de la imagen principal para que se despliegue completa, ajustar RowSpacing a 15 o 20 para dar más aire entre bloques, y verificar que cada control tenga sus coordenadas Grid.Row y Grid.Column declaradas.

Practica cambiando colores, tamaños y propiedades. Comparte tu versión con la comunidad y comenta qué ajustes le harías a este Job Profile UI.