Dominar el uso del grid en .NET MAUI es una de las habilidades más valiosas para construir interfaces profesionales. Aprender a identificar filas y columnas antes de escribir código marca la diferencia entre un desarrollo eficiente y horas de frustración. A continuación se desglosa cómo analizar un diseño, traducirlo a código XAML y resolver los problemas más comunes al trabajar con grids anidados.
¿Cómo identificar filas y columnas antes de escribir código?
Antes de abrir Visual Studio, lo más importante es analizar el diseño visual y determinar la estructura del grid [0:22]. Todo el contenido del perfil está contenido dentro de un grid principal. Para identificar las columnas, hay que observar los elementos que marcan divisiones verticales: en este caso, una columna contiene la foto de perfil y un botón, mientras que la otra columna agrupa los datos del usuario como nombre, descripción y estadísticas.
Esto da como resultado dos columnas para declarar. En cuanto a las filas, cada bloque horizontal de contenido representa una fila distinta: el nombre ocupa la primera, el rol del perfil la segunda, y así sucesivamente [1:10].
¿Qué estructura XAML necesita el grid del perfil?
El proyecto se organiza dentro de la carpeta GridSample, donde se crea un archivo XAML adicional llamado GridLayoutChallenge [1:35]. La construcción comienza con un VerticalStackLayout que contiene un Frame con las siguientes propiedades:
- Margin de veinte y treinta para espaciado lateral y vertical.
- CornerRadius para lograr bordes redondeados.
- BackgroundColor blanco para diferenciar el frame del fondo.
Dentro del frame se declara el grid con sus definiciones de columnas y filas [2:25]. La primera columna usa el valor auto, que se adapta al tamaño de los componentes que contiene, mientras la segunda toma el espacio proporcional restante. Las tres filas también se configuran con valor auto.
¿Cómo agregar la imagen de perfil con bordes redondeados?
Para lograr una imagen circular o redondeada se utiliza un frame interno con la propiedad IsClipToBound en true y padding en cero [3:08]. La imagen se agrega con Image Source y un Aspect de tipo Fit. Un detalle crítico: en Android, el nombre del archivo de imagen debe estar en minúscula para evitar errores de compilación [3:30].
La imagen se registra en la carpeta de recursos bajo Images, y su Build Action debe estar configurado como Maui.Image para que se refleje en la interfaz [3:45].
¿Qué es el rowSpan y cómo evita el solapamiento de elementos?
Un problema común al posicionar elementos es que varios controles queden superpuestos en la misma fila. La propiedad Grid.RowSpan resuelve esto indicando cuántas filas debe abarcar un elemento [4:50]. En este ejemplo, la imagen abarca tres filas con Grid.RowSpan="3", lo que permite que el nombre, el rol y el board de seguidores se alineen correctamente a su lado.
Para evitar que la imagen quede pegada al texto, se agrega un margin en el lado derecho. Además, el BorderColor del frame de la imagen se establece como transparente para eliminar bordes no deseados [5:35].
¿Cómo anidar un grid dentro de otro para el board de seguidores?
El board de estadísticas (artículos, seguidores y seguidos) es un grid anidado dentro del grid principal [6:05]. Este grid hijo se posiciona en la fila dos, columna uno del grid padre, y tiene su propia declaración de dos filas y tres columnas.
- La primera fila contiene los títulos: Articles, Followers, Following.
- La segunda fila muestra los valores numéricos en negrita con un font size mayor.
Para centrar el texto se usa HorizontalTextAlignment con valor Center, y para separar las columnas se aplica la propiedad ColumnSpacing con un valor de cinco [9:50].
¿Cómo posicionar los botones del perfil correctamente?
Los botones se agregan dentro del frame padre, no del grid anidado [8:00]. El primer botón tiene fondo blanco con BorderColor visible y BorderWidth para resaltarlo. El segundo botón (Follow) usa un fondo azul con texto blanco.
Cada botón se posiciona con Grid.Row="3" en columnas distintas. Los valores del margin se ajustan individualmente para que cada botón se adhiera correctamente al diseño esperado [8:45]. El BorderColor transparente en el botón Follow elimina bordes sobrantes.
Estas propiedades repetidas en múltiples controles se pueden optimizar en clases posteriores, por lo que vale la pena tenerlo presente como área de mejora.
Si lograste replicar este perfil, comparte tu código y tu experiencia en los comentarios. También queda un reto extra: analizar un nuevo UI, definir filas y columnas antes de codificar, practicar grids anidados y explicar tu solución a la comunidad.
