Replicando Calendar UI en Xamarin Forms

4 min readJun 24, 2020

Hola !!! 💁‍♀ En este caso vamos a replicar un IU de un Calendario/Horario obtenida de Dribble. ¡Puedes consultar el diseño aquí!

⚠ 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 difernetes 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:

¡Empecemos! En esta sección trabajaremos con el bloque “Welcome Wall” y para replicarlo necesitamos agregar las siguientes partes:

➖ Calendario de tiempo
➖ Descripción de la fecha
➖ Imagen

Definición de la estructura principal: Para comenzar a desarrollar la estructura de diseño completa que contendrá nuestra pantalla, usaré un Grid.

⭐ ¡En este caso implementaré la nueva simplificación de Grid! 😍 Este ya está disponible a partir de Xamarin.Forms 4.7-pre1! Realmente amo la forma en que esto me ayuda a ahorrarme lineas de código! 😍

En el encabezado de tu ContentPage, agrega la siguiente línea:

Una vez creada la estructura principal, vamos a construir el primer bloque:

Continuemos con nuestro próximo bloque llamado Schedule timeline. Aquí usaremos un CollectionView. Es importante que el proyecto se adhiera al patrón de diseño MVVM. Es por eso que utilicé las propiedades de texto Binded

En un artículo anterior antes de construir la interfaz de usuario de mi aplicación, hice un post explicando cómo hice la estructura de MVVM, si eres principiante, ¡Este material podría ser muy útil para ti! ¡Te dejo el enlace en caso de que quieras echar un vistazo aquí!

Como es una interfaz simple, el contenido dentro de la lista también se dividirá en bloques, ¡Por esta razón comenzaremos con la línea de tiempo!

Continuemos con el bloque “Card”. Para construirlo solo necesitamos usar un Frame para obtener la forma principal y agregar dos etiquetas dentro para colocar la información requerida.