lunes, 30 de enero de 2012

Agregar controles a formularios de forma dinámica (por código o en tiempo de ejecución) en .net con C#

El editor de Visual Studio nos permite tener un gran control granular de la interfaz que tendrá nuestra aplicación winforms en cuanto al manejo de controles se refiere, sin embargo es muy conveniente saber cómo podemos agregar nuestros propios controles al formulario en tiempo de ejecución (en forma dinámica o mediante código).

Probablemente no lo consideren necesario, pero es algo realmente útil por ejemplo si quieres crear una lista de imágenes en miniatura que genera las miniaturas a partir de las imágenes que contenga un folder, en cuyo caso es muy dificil controlar la cantidad de PictureBox que tendrá tu formulario a menos que se generen dinámicamente en tiempo de ejecución.

Nuestro ejemplo será precisamente ese, un formulario que genere las miniaturas de las imágenes que se encuentran en un folder determinado.

Primeramente creamos nuestro proyecto de tipo "Windows Forms Application".



El siguiente paso es personalizar nuestro formulario. En este ejemplo se agregó:
Controles iniciales.
TextBox: para conocer el folder del cual se extraerán las imágenes, se le llamo txtBxFolder
Button: para crear el cuadro de diálogo que nos permite seleccionar un folder, se le llamo txtFolder
Button: para ejecutar la acción de obtener las imágenes, se le llamó btnObtenerImg.

Para poder desplegar las imágenes necesitamos controles de tipo PictureBox y los colocaremos sobre un control del tipo FlowLayoutPanel. La razón es para evitarnos el problema de ir colocando los controles uno tras otro y que su posicionamiento cambie de acuerdo al tamaño de nuestra ventana. Se debe aclarar que generalemte los controles que agregamos dinámicamente deben de tener las propiedades del lugar donde se colocaran dichos controles.

Agregamos el control del tipo FlowLayoutPanel y lo llamaremos PanelImgs, el formulario resultante queda así:


A continuación crearemos el cuadro de diálogo que nos permitirá elegir un folder dentro de nuestro sistema de archivos, para eso debemos controlar el evento clic de nuestro botón btnSelectFolder y agregamos el siguiente código:



Como parte final agregamos este código al evento clic del botón btnObtenerImg

Clic en la imagen para ver tamaño original.

La idea principal es recorrer la carpeta seleccionada es  busca de archivos que contengan la extensión .bmp, .jgp o .png y por cada archivo encontrado crear un objeto de tipo Picturebox al cual le asignaremos la imagen correspondiente, cambiamos el tamaño del pictureBox y lo agregamos a nuestro FlowLayoutPanel.

Obtenemos este resultado, podemos ver que si cambiamos el tamaño de nuestra ventana, nuestro FlowLayoutPanel automáticamente reajusta la posicion de cada elemento.
tamaño del formulario inicial
Formulario con tamaño modificado. 
Como nota final diremos que podemos agregar cualquier tipo de control a nuestro FlowLayoutPanel, no necesariamente PictureBox, lo que nos da mas versatilidad y flexibilidad.