Mostrando datos en tiempo de diseño con XAML Previewer

Leomaris Reyes
Oct 6 · 3 min read

De desarrollad@r a desarrollad@r, me gustaría comenzar este artículo haciendote algunas preguntas:

1⃣ ¿Alguna vez haz experimentado que deseas mostrar el progreso del diseño de una pantalla, por lo que necesitas agregar datos de pruebas al XAML para que el usuario pueda ver los resultados, cierto?

2⃣ Entonces, después de convencer al usuario, ¿Tienes que eliminar todos esos datos para aplicar los reales?

3⃣ ¿Has pensado en cuánto tiempo conlleva este proceso?

Es muy probable que tus respuestas hayan sido positivas. ¡Pero tranquil@, es normal! 🧐 ¡Pero lo bueno es que siempre podemos mejorar! Es por esta razón que en este artículo aprenderemos cómo agregar los datos de prueba solo en tiempo de diseño con la vista previa de XAML. ( Design Time Data )


Pero primero, aclaremos los siguientes puntos

✔ ¿Qué hace exactamente el Design Time Data ?

El Design Time Data a través de la ventana de previsualización de Visual Studio nos ayuda a agregar datos de prueba a nuestro XAML sin que se muestren cuando la aplicación se esté ejecutando. Por ejemplo, podemos tener una etiqueta con la propiedad de prueba Text asignada con “Buenos dias” como valor de prueba, pero también podemos tener la misma propiedad con el valor “Hola gente!” para mostrar cuando la aplicación sea ejecutada, lo que facilita y agiliza nuestro tiempo de desarrollo para la construcción de la interfaz de usuario.

Requiere una versión mínima de Xamarin.Forms 3.6.

¿Cómo puedo activar mi ventana de vista previa?

➖ Localiza tu XAML

➖ En la barra de abajo, verás una división que dice “Slip” o “Dividir”, haz click en ella. ¡Muy fácil no?! 🤓


¡¡¡Empecemos!!!

Lo primero que tenemos que hacer es agregar los siguientes espacios de nombres (namespace) a nuestro XAML:

⚠ Actualmente al crear tu XAML, estas líneas se agregan a la página automáticamente.

Como viste, la última línea que agregamos fue ignorable = “d”. El prefijo “d” tiene el mismo acceso a propiedades, eventos y otros elementos del control.

¡También podemos definir controles de prueba como botones, etiquetas, imágenes, prácticamente cualquier control que necesite!

¡Listo! ¡Nuestros datos de prueba ya están agregados en nuestro XAML! 😎


Ventajas

🔷 Tiene una “estructura de datos” destinada únicamente a pruebas, por lo que tienes un código más limpio.

🔷 Agregar estos datos de prueba no afectará los datos que verás cuando ejecutes la aplicación.

🔷 Puedes identificar fácilmente con el prefijo “d” las informaciones y controles que fueron agregados con los fines de prueba.

¡¡¡Gracias por leer mi artículo!!! 💚


Leomaris Reyes

Written by

I'm Leomaris Reyes from the Dominican Republic, with more than 6 years of experience in Software Development. I really love learning new things!!! ❤

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade