Replicando Billing Dashboard UI en .NET MAUI

¡Hola! 🙋‍♀️ Recuerda que la práctica es la clave del éxito en todo lo que hagas, en este caso en tus habilidades en XAML. ¡Esta vez replicaremos la interfaz de usuario de un Billing Dashboard en .NET MAUI! Este diseño fue creado por Liev Liakh y fue obtenido de Dribbble. ¡Y hoy lo convertiremos a código XAML! ¡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.

No estaré utilizando estilos para que se puedan ver y comprender más rápido las propiedades agregadas a los diferentes componentes en el proceso de explicación.

¡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:

En este caso, usaremos un Grid para estructurar la pantalla, como puedes ver en el siguiente bloque de código:

Comencemos con el bloque “Main Frame”, dividiremos esta explicación por cada componente que tiene dicho bloque para una mejor comprensión:

➖ Imagen de Fondo: Empecemos agregando la imagen de fondo, el punto clave para lograr esto es indicar a la imagen que cubra todas las filas del Grid principal, y así cubriremos la pantalla completa con la imagen, esto lo realizamos con el Grid.RowSpan.

➖ Label de Pago: Este Label tiene una característica que quiero destacar, es un texto único compuesto por diferentes estilos. Por ejemplo, la palabra “Pago” tiene un color más opaco que el código que le sigue y no está en negrita mientras que el código si.

Probablemente la primera solución que se te ocurre sea agregar dos Labels… y sí… puedes hacerlo, pero hay una forma más rápida y eficiente de lograrlo, para ello usaremos el FormattedText, veamos como:

.

➖Frame: Este Frame contendrá toda la información restante de esta UI la cual se encuentra alojada en los dos bloques restantes, para lograrlo debemos tener listo el Frame integrando un layout (en este caso un Grid) que le permita organizar estos elementos.