Aprendiendo sobre Embedded Images en Xamarin Forms

Leomaris Reyes
Jan 9 · 3 min read

¡Hola! ¡Espero que todos hayan tenido excelentes fiestas navideñas y bonito año nuevo, pero lo más importante es que la hayan pasado junto a sus seres queridos! 💚💕¡Y ahora es el momento de seguir aprendiendo!😎 En este artículo aprenderás sobre imágenes incrustadas. (Embedded Images)

💭 Me imagino que en algún momento de tu vida como desarollad@r Xamarin, cuando agregas imágenes a tu proyecto, te preguntas algo como ¿No hay una forma más rápida de agregar las imágenes a mi proyecto sin tener que agregarlas en cada plataforma? 🤔 ¡La respuesta es Sí/Yess/Ouii!!! ¡Y eso es lo que aprenderemos hoy! ¡Veamos!


Primero, aclaremos los siguientes puntos

✔ ¿Qué son exactamente las imágenes incrustadas (Embedded Images)?

Al igual que las imágenes locales, las imágenes incrustadas se envían con una aplicación, pero estas tienen la peculiaridad de que no están contenidas en la estructura de archivos de cada aplicación, sino que el archivo está incrustado en el ensamblaje del proyecto como un recurso.

Eliminando el tiempo que normalmente tomamos convirtiendo nuestras imágenes a los formatos requeridos por cada plataforma y luego agregándolas, ahorraremos tiempo de desarrollo y haremos que nuestro proyecto sea más ligero.

Es importante saber que este tipo de distribución de imágenes es útil solo si las imágenes que se usan son idénticas en cada plataforma.


¡Empecemos! 😍

Lo primero que tienes que hacer es agregar las imágenes necesarias a tu proyecto de Xamarin Forms:

1⃣. Agrega una carpeta preferiblemente llamada imágenes (No es obligatorio pero es buena práctica y hace que tu proyecto sea más entendible y organizado)

2⃣. Una vez agregada la imagen, hazle clic derecho y sigue los siguientes pasos:

➖ Ve a Propiedades

➖ En la propiedad Build Action, agrega EmbeddedResources como valor de la propiedad.

Una vez agregada la imagen, creemos una clase, en este caso será llamada ImageResourceExtension.cs. Esta es una clase de Extensión de marcado (XAML Markup Extension), ayuda a extender el poder y la flexibilidad de XAML al permitir que los atributos del elemento se establezcan desde fuentes que no sean cadenas de texto literales. Si deseas leer más información sobre este tema puedes hacer clic aquí.


¡Ahora, a implementarlo en nuestro XAML!

Como la imagen se agregó en el proyecto raíz de Xamarin, agreguemos un espacio de nombres (namespace) para hacer referencia a los recursos locales:

Luego, simplemente agrega la etiqueta de imagen con la siguiente estructura:

¡Veámoslo en código!


Leomaris Reyes

Written by

I'm Leomaris Reyes, Microsoft MVP from the Dominican Republic, with more than 6 years of experience in Software Development. ❤

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