Pequeños Tips: Lo que deberías hacer con ImageResourceExtension

Contenido

Cuando se habla de recursos o imágenes incrustadas para utilizar en nuestro XAML por lo general utilizamos una extension comúnmente llamada ImageResourceExtension. Creo que la mayoría ha utilizado esta extension, por no decir todos. Pero hay un problema, que quiero comentarte en esta nueva serie.

Así es, este es el primer articulo de la nueva serie o sección Pequeños Tips. Esta serie se centrará en pequeños consejos enfocados en la productividad del día a dia.

Ya te voy avanzando que en muchas ocasiones son cosas muy simples, tan simples que hasta pena me da de compartirlo. Y es que claro, todo el que sabe algo y tiene un tiempo en esa area supone que todos los demás también lo saben pero si haces consultorías y entrenamientos te das cuenta que las cosas no son como pensabas.

De ahi nace esta serie, porque muchas veces me da flojera tener que hablar de lo mismo. Y si podemos tener un diccionario con todos estos pequeños tips, mejor que mejor, ¿no?.

No me lio mas, empecemos con nuestro primer tip para ImageResourceExtension. ¡Vamos a ello!

Embedded images en XAML con ImageResourceExtension

Cuando queremos utilizar imágenes incrustadas en XAML dentro de Xamarin Forms debemos hacer una extension XAML personalizada para cargas estas imágenes ya que de forma nativa no podemos cargarlas.

ℹ Nota: Para conocer mas sobre las imágenes incrustadas puedes hacer click aquí.

Todo perfecto hasta aquí. Veamos un ejemplo:

...
[ContentProperty (nameof(Source))]
public class ImageResourceExtension : IMarkupExtension
{
 public string Source { get; set; }

 public object ProvideValue (IServiceProvider serviceProvider)
 {
   if (Source == null)
   {
     return null;
   }

   // Do your translation lookup here, using whatever method you require
   var imageSource = ImageSource.FromResource(Source, typeof(ImageResourceExtension).GetTypeInfo().Assembly);

   return imageSource;
 }
}
...

Teniendo la extension dada, o utilizada toda la vida, podemos utilizarla de la siguiente manera:

<?xml version="1.0" encoding="UTF-8" ?>
<ContentPage
   ...
   xmlns:local="clr-namespace:ProjectName.Extensions;assembly=ProjectName">

   <!-- use a custom Markup Extension -->
   <Image Source="{local:ImageResource ProjectName.FolderName.imageName.jpg}" />

</ContentPage>

Hasta aquí imagino que todo esta claro, ¿Cierto?. La cosa es que no se si soy el único que le da pereza tener que escribir el namespace cada vez que va a utilizar una imagen.

Y claro, si trabajas en proyectos un poco mas estructurados o reutilizas recursos entre proyectos cada vez que muevas o reutilices algo tendrás que cambiar el namespace en cada imagen. En algunos casos, seria muy fácil esto, en otros es solo pereza.

Bueno, para aquellos que quieren ahorrar un poco de tiempo en esto y/o ser un poquito mas productivos les tengo la solución. ¡Atentos!

ImageResourceExtension Tips

La verdad es que hay muchas maneras de adaptar la extension dependiendo las necesidades. En mi caso particular, les voy a compartir la creo que se adapta para la mayoría de casos.

Veamos un ejemplo:

...
[ContentProperty (nameof(Source))]
public class ImageResourceExtension : IMarkupExtension
{
 public string Source { get; set; }

 public object ProvideValue (IServiceProvider serviceProvider)
 {
   if (Source == null)
   {
     return null;
   }

   string imagesFolderName = "Images";
   string imagePath = $"{App.Current.GetType().Namespace}.{imagesFolderName}.{Source}";

   // Do your translation lookup here, using whatever method you require
   var imageSource = ImageSource.FromResource(imagePath, typeof(ImageResourceExtension).GetTypeInfo().Assembly);

   return imageSource;
 }
}
...

Al final es lo mismo, lo único que estamos haciendo es definir el folder donde se encuentran nuestras imágenes para no tener que definirlo en cada imagen que definamos en nuestro XAML. Y si manejas diferentes folders lo puedes especificar en tu XAML.

Veamos un ejemplo:

...
xmlns:local="clr-namespace:ProjectName.Extensions;assembly=ProjectName"
...
...

   <!-- Normal version -->
   <Image Source="{local:ImageResource ProjectName.FolderName.imageName.jpg}" />

   <!-- Tip version -->
   <Image Source="{local:ImageResource imageName.jpg}" />

   <!-- Structured version inside the images folder -->
   <Image Source="{local:ImageResource CustomFolderName.imageName.jpg}" />

...

¿Y ahora que tal? Simple pero poderoso, ¿no? Claro, esto lo puedes adaptar y personalizar a tus necesidades o gustos.

Conclusión

Ahora eres 2% mas productivo en el diseño de interfaces. ¿A que no? La verdad es que me hubiese gustado que esto estuviera por defecto en Xamarin Forms, esperemos que en #DotNetMaui nos dejen trabajar con las imágenes de manera nativa, o similar.

Espero que este tip les sea de utilidad, y si quieren compartir alguno déjenme saber en los comentarios y yo encantado lo publico y les dejo los créditos, al final esto es para ayudar a la comunidad.

Sin nada mas que agregar, ¡Nos vemos en la próxima!

¿Qué opinas de este contenido?
 
Luis Matos

Luis Matos

I help professionals and companies to create value solutions. I am a Systems Engineer, blockchain executive, and international mobile application speaker. Founder of the Malla Consulting Agency and several international technology communities.
Suscribirte
Notificar de
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x

Buscar en el sitio