Organizando Controles en un Formulario

En esta publicación aprenderemos como organizar los controles agregados al formulario para diseñar una mejor interface. Primero aprenderemos como modificar el formato de los controles usando el menú de Visual Studio .NET, luego veremos como configurar el orden de tabulación y finalmente, enseñaré como ajustar el tamaño de los controles automáticamente ante cambios en el tamaño del formulario. 


1. Modificando el Formato de los Controles
 
Para realizar un mejor diseño es necesario usar el menú de Formato del Visual Studio .NET, el cual puede realizar las siguientes tareas con los controles:

• Alinear: A cualquier posición de la derecha, izquierda, centro, arriba, mitad o abajo.
• Hacer del mismo tamaño: Alto, ancho o ambos.
• Espaciado horizontal y vertical: HacerIo igual, aumentar, disminuir o eliminar.
• Centrar en el formulario: Horizontal o verticalmente.
• Ordenar: Traer al frente o enviar atrás.
• Bloquear controles: Para que no puedan desplazarse accidentalmente al momento de diseñar sobre el formulario.

Para poder usar todas estas opciones de formato debemos realizar los siguientes pasos:

a). Dependiendo de la tarea a realizar, seleccionar uno o más controles del formulario.

Sugerencia: Para seleccionar un grupo de controles que se encuentran continuos en una región arrastrar sostenidamente el mouse y soltar sobre el final de la región. Para seleccionar todos los controles del formulario, del menú "Editar" elegir "Seleccionar todo" o pulsar Ctrl + A.

b). Seleccionar del menú "Formato" la tarea a realizar (anteriormente descritas) y elegir uno de los valores u opciones de formato. 

Observación: Cada vez que se da formato a varios controles se toma el último cóntrol como referencia, por ejemplo, si deseamos dar el mismo ancho que uno de los controles tendríamos que seleccionar este de de último.

2. Configurando el Orden de Tabulación de los Controles

Cuando se tiene una ventana de ingreso de datos es común pasar de un campo a otro pulsando la tecla Tab sobre el control, e inmediatamente el foco pasa a otro control.

En Visual Basic .NET podemos aprovechar esta característica de habilitar la tecla Tab y especificar la secuencia u orden de tabulación de los controles de ingreso de datos o interacción con el usuario. Para esto debemos realizar los siguientes pasos:

a). Configurar la propiedad TabStop en True para que el control pueda recibir el foco y usar la tecla Tab para salir.

Nota: El valor por defecto de los controles que tienen la propiedad TabStop es True, así es que, generalmente no es necesario realizar su configuración.

b). Configurar la propiedad Tablndex en un número empezando en cero y en forma consecutiva para indicar el orden o secuencia en que pasará el foco sobre los controles al pulsar la tecla Tab.

Sugerencia: Anteriormente, esto solo se podía realizar configurando la propiedad Tablndex en la ventana de propiedades, pero ahora disponemos de una herramienta de selección del orden, eligiendo del menú "Ver" la opción ,"Orden de tabulación" y dando clic sobre los controles, al final nuevamente ir al menú "Ver" y elegir "Orden de tabulación" para que desaparezca el selector.

Por ejemplo, si deseamos configurar el orden de la tabulación en el formulario de inicio del Ejemplo08, el formulario se verá como sigue en tiempo de diseño: 

 Formulario en tiempo de diseño configurando el orden de tabulación

 
3. Ajustando el Tamaño de los Controles al Formulario

Uno de las preocupaciones en el desarrollo de aplicaciones Windows era controlar la apariencia de los controles al momento que se modifica el tamaño del formulario.

En versiones anteriores de Visual Basic, cada vez que el usuario cambiaba el tamaño de la ventana (evento Resize) había que estar programando la nueva posición y tamaño de los controles sobre el formulario. En Visual Basic .NET disponemos de 2 propiedades que configuran automáticamente el tamaño de los controles ajustándolos a un cierto borde del formulario.

La primera propiedad se llama Anchor y permite modificar el tamaño del control ajustándolo a cualquiera de los cuatro lados extremos, la segunda propiedad se llama Dock y permite acoplar el control a uno de los cuatro bordes o esquinas o también hace que el control sea del mismo tamaño que el formulario (opción FilI) . 


Ejenplo11

Esta demostración tiene por objetivo aprender a organizar los controles sobre el formulario.

El ejemplo trabaja con un simple formulario que muestra información del Libro, éste tiene 4 controles que se ajustan autornáticamente al cambiar de tamaño el formulario, tanto en tiempo de diseño como en ejecución. Para lo cual debemos realizar los siguientes pasos:

1. Crear una Aplicación Windows en Visual Basic .NET llamada Ejemplo11. El IDE que utilizaré es Microsoft Visual Studio 2012.

2. En la ventana del explorador de soluciones seleccionar el archivo Form1 y en la ventana de propiedades cambiar la propiedad FileName a frm Acerca.

3. En el disefiador de formularios Windows, arrastrar un control Label, un PictureBox y 2 Button de la Caja de Herramientas hacia el formulario y configurar las propiedades, tal como se muestra en la siguiente tabla:  
 

Objeto	Propiedad	Valor
Form1	Name	frmAcerca
	Text	Acerca del Libro
	StartPosition	CenterScreen
	Size	Width=300, Height=300
Label1	Name	IblTitulo
	Text	ingenieriasystems
	TextAlign	MiddleCenter
	HorderStyle	Fixed3D
	Dock	Top
	AutoSize	False
	Font	Size=12
	ForeColor	Blue
PictureBox1	Name	picFoto
	Anchor	Top, Bottom, Left, Right
	BorderStyle	Fixed3D
	Cursor	Hand
	Image	Foto.jpg (ó cualquiera)
	SizeMode	Stretchlmage
	Location	X=85, Y=60
	Size	Width=130, Height=160
Button1	Name	btnAutor
	Anchor	Bottom, Left
	Cursor	Hand
	Location	X=20, Y=236
	Text	Autor
Button2	Name	btnUrl
	Anchor	Bottom, Right
	Cursor	Hand
	Location	X=196, Y=236
	Text	Dirección

4. Para indicar el orden de tabulación puede seleccionar del menú "Ver", la opción "Orden de tabulación" y luego seleccionar el orden en que pasará la tecla Tab sobre los controles. Luego para desaparecer el selector realice los mismo. 

Observación: El control PictureBox no es enfocable por lo que no tiene propiedades Tab, en cambio, note que en los demás controles se ha configurado la propiedad Tablndex en un número correlativo, empezando en cero.

5. Escribir dos manejadores de eventos "Click ""para los botones "Autor" y "Dirección" que permitan mostrar en un cuadro de mensaje ambas informaciones, tal como se muestra a continuación: 

6. Escribir un manejador de evento "Click" para el PictureBox que permita cerrar la aplicación: 

7. Configurar frmAcerca como el formulario de inicio. Por defecto lo está.

8. Grabar y ejecutar la aplicación pulsando F5. 

9. Clic al botón "Autor" y se mostrará un cuadro de mensaje con el nombre del autor del Sitio Web
 

10. Clic en "Aceptar" y seleccionar el botón "Dirección" y se mostrará un cuadro de mensaje con la dirección electronica del Sitio Web. 

11. Clic en "Aceptar" y luego trate de modificar el tamaño del formulario. 

• Observación: Los controles Label y PictureBox se modifican de tamaño ajustándose al tamaño del formulario, en cambio, los dos Button siempre se mantienen del mismo tamaño pero su posición se mantiene constante respecto a las esquinas.

12. Clic sobre la imagen para finalizar la ejecución de la aplicación.

Observación: Modifique el tamaño del formulario en el diseñador de formularios Windows y note como los controles también se organizan amomáticamente en tiempo de diseño.

Espero haber ayudado en algo. Adjunto el ejemplo en el siguiente enlace:

Ejemplo11 - Descargar

Hasta la próxima oportunidad!