Twitter Facebook Google + RSS Feed

Usando imágenes en Silverlight

0
Silverlight

Jueves, 12 de marzo de 2009 a las 14:44hs por Gustavo Cantero (The Wolf)

En Silverlight hay tres posibles orígenes desde donde leer imágenes para mostrarlas al usuario: imágenes publicadas en internet, archivos dentro del paquete de la aplicación (en el archivo XAP), y recursos embebidos dentro del ensamblado.
Primero hay que comentar que para que un control, como el Image o el ImageBrush, pueda mostrar una imagen hay que crear un objeto que herede de la clase ImageSource y establecerle la propiedad Source del control.  El objeto que hereda de ImageSource y que comúnmente se utiliza para la carga de imágenes es el BitmapImage, al cual hay que pasarle un Uri con la ubicación de la imagen a utilizar.  Al establecer la propiedad Source de los controles en el XAML el objeto TypeConverter de ésta es el encargado de crear el BitmapImage con la Uri correspondiente.

Imágenes publicadas en Internet

Para mostrar una imagen que está pública en internet en, por ejemplo, un control Image debemos simplemente establecer la URL en la propiedad Source del control:

<Image Source="http://www.scientia.com.ar/images/logo.png" />

Si lo queremos hacer programáticamente debemos crear un BitmapImage y pasarle la URL de la imagen en un objeto Uri.  Un ejemplo sería el siguiente:

Uri uriImage = new Uri(“http://www.scientia.com.ar/images/logo.png”);
BitmapImage objBI = new BitmapImage(uriImage);
Image objImage = new Image();
objImage.Source = objBI;

Utilizar esta manera de lectura de las imágenes tiene el beneficio que, al no estar en el paquete de la aplicación o en su ensamblado, la misma tendrá un tamaño más reducido.  También posee la ventaja de que se pueden reemplazar las imágenes en el servidor web sin modificar el paquete.  Su contra es que se irá a buscar las imágenes a internet cuando deban mostrarse.
Cabe mencionar que Silverlight posee un caché interno de los archivos que baja, por lo tanto si en una aplicación se deben mostrar muchas veces la misma imagen publicada en un servidor web, ésta se bajará solamente una vez.

Imágenes dentro del paquete de la aplicación (archivo XAP)

Para guardar una imagen dentro del paquete de la aplicación para su posterior uso simplemente hay que agregarla al proyecto de Silverlight y establecer la propiedad “Build Action” del archivo como “Content”.  Una vez hecho esto el Visual Studio agregará esta imagen al paquete en cada compilación.
Para utilizar esta imagen en el mismo ejemplo que hicimos en el punto anterior, deberíamos escribir algo como lo siguiente:

<Image Source="/images/logo.png" />

Cabe notar que la URL de la imagen debe estar precedida por una barra “/”.  Para utilizar la imagen programáticamente debemos usar el método GetResourceStream del objeto Application, al cual se le debe pasar como parámetro un Uri del tipo relativo con la dirección de la imagen, y el Stream obtenido lo utilizamos en el método SetSource del BitmapImage:

Uri uriImage = new Uri("images/logo.png", UriKind.Relative);
Stream objImageStream = Application.GetResourceStream(uriImage).Stream;
BitmapImage objBI = new BitmapImage();
objBI.SetSource(objImageStream);
Image objImage = new Image();
objImage.Source = objBI;

Este método permite modificar las imágenes del paquete sin necesidad de volver a compilar el código, solamente hay que descomprimir el archivo XAP (en realidad es un archivo ZIP), reemplazar las imágenes que se necesiten, y volver a comprimir los archivos.  La contra es que, al estar las imágenes dentro del paquete, el tamaño del mismo será mayor al del punto anterior.

Imágenes embebidas en el ensamblado

Por último, para guardar las imágenes como recursos embebidos dentro del ensamblado de la aplicación, hay que agregar los archivos al proyecto y verificar que la propiedad “Build Action” del mismo sea “Resource” (ojo, no “Embedded Resource”), el cual es el valor por defecto que le establece Visual Studio al agregar archivos a un proyecto Silverlight.
Una vez hecho esto podemos utilizar las imágenes desde el código XAML de la misma manera que utilizamos los archivos agregados al paquete, pero sin poner la barra inicial en el Uri del mismo, por ejemplo:

<Image Source="images/logo.png" />

La forma de utilizar esta imagen programáticamente es muy similar a la utilizada en el punto anterior, pero con una sintaxis particular en el Uri, la cual debe tener esta sintaxis: Ensamblado;component/Recurso.  Como ejemplo mostraremos el código del punto anterior, pero utilizando la imagen embebida:

Uri uriImage = new Uri("ImagenesEnSilverlight;component/images/logo.png", UriKind.Relative);
Stream objImageStream = Application.GetResourceStream(uriImage).Stream;
BitmapImage objBI = new BitmapImage();
objBI.SetSource(objImageStream);
Image objImage = new Image();
objImage.Source = objBI;

Proyecto de ejemplo de Uso de imágenes en SilverlightComo siempre, les dejo un proyecto de ejemplo donde se utilizan los tres métodos de lectura de imágenes declarativamente y programáticamente.


0 comentarios »

Deja un comentario

Buscar