El día de hoy veremos como trabajar con los controles ListView e Imagelist de WindowsForms para poder leer y mostrar una serie de imágenes. Antes de ello debo decir que pueden existir otras formas de mostrar imagenes que solo requieren un control por ejemplo con un Gridview pero eso será en otro post, ahora nos centraremos en la forma de realizarlo con los controles antes mencionados.
Lo primero que haremos será crear un nuevo proyecto de windows forms, en mi caso utilizando C#, luego agregaremos un Control ImageList. Este control será el que utilicemos para almacenar todas las imágenes una vez que las hemos leído. Si revisamos el control, veremos que tenemos la opción de agregar la imágenes mediante el diseñador, es decir podemos seleccionarlas manualmente o bien agregarlas mediante código que será lo que haremos.
Lo segundo será agregar un control ListView al Formulario, este será el encargado de mostrar las imagenes, eso sí, por ahora será solo mostrarlas no tendrá otras funcionalidades.
Ahora, vamos al codeBehind y en el Evento Load del form empezaremos a codificar:
Lo primero será, crear una nueva variable derivando DirectoryInfo, a la cual le indicaremos la ruta de nuestra carpeta de imágenes. En nuestro ejemplo utilizamos Application.StartUpPath para indicarle que vamos a buscar en nuestro mismo proyecto (en carpeta debug por el momento).
DirectoryInfo dir = new DirectoryInfo(Application.StartupPath + @"\images");
Una vez que hemos creado la referencia a la ruta, utilizaremos un for para obtener todas la imágenes que se encuentren dentro del Folder que indicamos, para luego agregarlas al imagelist y empezar a crear nuestra nueva colección.
foreach (FileInfo file in dir.GetFiles())
{
try
{
this.imageList1.Images.Add(Image.FromFile(file.FullName));
}
catch
{
Console.WriteLine("No es un archivo de imagen");
}
}
Una vez, que hemos llenado nuestro ImageList, entonces asignaremos al ListView sus propiedades, para definir la forma en que las imágenes se mostrarán. Un aspecto a tomar en cuenta acá será la propiedad ImageSize ya que está será la que definirá el tamaño que tendrán las imágenes en el ListView cuando sean mostradas.
this.listView1.View = View.LargeIcon;
this.imageList1.ImageSize = new Size(120, 100);
this.listView1.LargeImageList = this.imageList1;
Por último y con ayuda de otro for vamos a recorrer cada uno de los elementos que ahora posee nuestro ImageList y lo agregaremos al ListView para mostrarlo
for (int j = 0; j < this.imageList1.Images.Count; j++)
{
ListViewItem item = new ListViewItem();
item.ImageIndex = j;
this.listView1.Items.Add(item);
}
Como vemos, a pesar de que utilizamos dos controles distintos es realmente sencillo mostrar la imagenes en el ListView al final el control ImageList, solo funciona como un “puente” que nos permite leer la imagenes para luego mostrarlas en otro control.
Para terminar, los proyectos de ejemplo:
C#
VB
