¡Hola! 🙋♀️ ¡Estoy muy emocionada de publicar mi primer post sobre Replicas de UI esta vez usando.NET MAU! Lo hice con mucho amor, espero que les guste y les sirva de inspiración y guía para iniciar este camino en MAUI! En este caso, vamos a replicar una interfaz de usuario para un Course Profile obtenida de Dribble. ¡Espero que esto sea útil para ti! 💚
Antes de comenzar: Para aprovechar al máximo la publicación te dejaré algunas notas instructivas para que tengas una mejor experiencia reproduciendo la interfaz de usuario.
Al principio verás una imagen con la interfaz de usuario original donde estará dividida por bloques tal cual y como la estaremos trabajaremos.
Cada bloque presenta la imagen con el diseño explícito con el que estaremos trabajaremos (Se resaltan en un cuadro de color)
En cada uno de los bloques de código podrás ver un comentario que dice: “Here add the code that is being explained in the next block”. Para mantenerte lo más enfocad@ posible, en esta parte se indica que la siguiente explicación del código va justo donde se agrega esta línea en comentarios.
¡Empecemos!
¡Dividiendo el diseño original en bloques!
Para comprender mejor he dividido el diseño original en bloques, los cuales se enumeran en el orden de prioridad con el que vamos a reproducir cada uno:
💥 Comencemos estableciendo el layout principal
¡Como el Layout principal de nuestra pantalla usaremos el Grid! 😎 Si, el Grid ya está disponible en .NET MAUI y tiene la misma estructura, si no sabes cómo utilizarlo puedes acceder al artículo “Trabajando con Grid”.
Pero además, todo estará dentro de un ScrollView, esto permitirá a los usuarios desplazarse por nuestra aplicación, ¡y que también este disponible en una Orientación Horizontal! 💚
💥 Comencemos con los componentes del primer bloque
Para empezar el primer bloque, detallaré cada componente que hace realidad nuestro diseño, ¡Veamos!
Timeline: Esta imagen funcionará como background de la imagen de perfil (la cual veremos en el siguiente paso), dicha imagen tiene los bordes redondeados, para esto la agregaremos dentro de un Frame y nos auxiliaremos de la propiedad CornerRadius!
Imagen de perfil: En este caso, la imagen de perfil tendrá una forma circular, para hacerlo también usaremos un Frame. Además, para lograr el aspecto superpuesto jugaremos con la propiedad Margen del Frame en la que agregaremos un valor negativo para el valor superior.(Margin="0,-90,0,0")
Nombre del perfil y descripción general:
¡El primer bloque está completo! 🤓
En este segundo bloque trabajaremos con lOS de Título y la descripción.
¡El segundo bloque está completo! 🤓
¡Me encanta este bloque final porque complementa el diseño de esta hermosa interfaz de usuario! 😍 Este bloque está formado por varios elementos, por eso, al igual que el primer bloque vamos a detallar cada uno de los componentes acompañado de su explicación!
Título y lista de tareas: Agregaremos el título de la tarea y también usaremos un CollectionView para agregar la lista.
Línea divisora y botones: Para la línea divisora usamos un BoxView! También agregaremos los botones de Obtener detalles y Premium.
¡El tercer bloque está completo! 🤓
Cabe señalar que este mismo código lo puedes usar tanto en MAUI como en Xamarin Forms sin realizar ningún cambio. ¡Esto es increíble! 😍😍
¡Y nuestra interfaz de usuario creando un perfil de usuario para cursos, está lista con .NET MAUI! 
.
Para ver la estructura completa del código, puede ingresar a mi repositorio de Github 
Artículo en inglés: https://askxammy.com/replicating-course-profile-ui-in-net-maui/
