5.

DISEÑO DE FORMULARIOS

INTRODUCCIÓN

En este tema se analizarán distintas propiedades del objeto Windows.Form y de los objetos
Windows.Form.Control y técnicas que nos ayudarán a diseñar un formulario de forma
sencilla para conseguir óptimos resultados.

COMPOSICIÓN VISUAL 1

Un buen diseño visual de formulario es aquel que ayuda al usuario a entender con facilidad
la información a introducir. Debe ser sencillo, estéticamente satisfactorio y su elementos
organizados teniendo en cuenta el punto de vista del usuario y no el de la estructura interna
de la aplicación.
Los formularios han de dar sensación de claridad evitando lo que podríamos llamar el exceso
de tinta (texto, líneas, recuadros, iconos, etc.).
Para ello las principales recomendaciones son:
• El espacio ocupado por texto y grafismos no debe sobrepasar el 40% del total.
• Eliminar grafismos innecesarios. Por ejemplo, no abusar de los recuadros de
grupo y sobretodo nunca poner un recuadro de grupo dentro de otro.
• Sustituir líneas y recuadros de separación por espacio en blanco.
• En formularios de entrada de datos, pedir solo la información necesaria
minimizando los campos opcionales.
• En formularios en los que se ofrezca información a consultar, debe mostrarse
solo información relevante.
• Redactar textos cortos para las etiquetas de campos eliminando palabras
innecesarias.

1
Esta apartado está tomado de http://www.alzado.org/articulo.php?id_art=408
1
 Organización de los elementos
La organización de los elementos dentro del formulario depende de los factores:
• las relaciones entre unos elementos y otros;
• la prioridad en el orden de colocación de estos elementos.
Relaciones lógicas entre los elementos
La ubicación de un elemento en un punto determinado de la pantalla puede ayudar a
comunicar una relación lógica con otros elementos ayudando a su comprensión.
Las principales recomendaciones son:
• Proximidad: la cercanía de los elementos comunica una relación entre ellos.
• Agrupación: crear grupos de elementos relacionados y separar los grupos para
clarificar diferencias.
• Inclusión: indica las jerarquías de los elementos. Para ello se pueden alinear unos
más a la derecha que los otros o bien incluirlos dentro de un recuadro.

Prioridad en el orden de colocación

La prioridad en el orden de colocación de los elementos vendrá dada por los intereses y
necesidades del usuario. Para ello se tendrán en cuenta los siguientes criterios:
• Sus prioridades en la introducción de datos: si es posible, colocar los datos
obligatorios en primer lugar y también aquellos que deban ser utilizados con más
frecuencia.
• Si el formulario es de consulta también deberemos intentar ofrecer en primer
término los datos que sean más relevantes.

2
 Composición visual III

Estética y orden visual

Muchas veces se da poca importancia a la composición estética de los formularios. Debemos
desconfiar de los formularios poco agradables visualmente ya que por lo general és un
síntoma de poca usabilidad. Los diseños estéticamente satisfactorios contribuyen a orientar
al usuario en la dirección de lectura y de entrada de datos. Las principales directrices para
conseguir un buen diseño son: consistencia, alineación y proporción.
Consistencia
La consistencia es un principio general de usabilidad que podría definirse como la similitud
visual y de comportamiento de los componentes que tienen la misma función. Es decir, los
campos deben tener el mimo aspecto, los botones también y además deben comportarse
igual. Para el usuario esto tiene muchas ventajas ya que reduce el tiempo de aprendizaje y
aumenta el grado de reconocimiento de los elementos en nuevas situaciones.
Alineación
La alineación proporciona orden visual ayudando a agrupar la información relacionada y a
crear relaciones jerárquicas de inclusión. En un próximo artículo se tratarán más
extensamente las principales directrices de alineación de los diversos componentes de un
formulario.
Proporción
La proporción en un formulario implica que los componentes que lo forman, campos,
botones, etiquetas, etc., deben tener una aspecto visual que respete una cierta proporción
entre ellos y su distribución en el formulario. Por lo general, todas las guías de estilo
determinan los diversos tamaños aconsejados de cada uno de los elementos y la separación
que debe haber entre ellos.

3
 MOVER Y CAMBIAR EL TAMAÑO DE UN FORMULARIO

Las siguientes propiedades intervienen en la tamaño y localización de un formulario

Propiedades

• Width o Height: Permiten obtener o establecer el ancho y alto de un control

respectivamente.
Me.btnAceptar.Height=23
Me.btnAceptar.Width=75
• Location: Permite otener o establecer las coordenadas de la esquina superior
izquierda del control en relación a su contenedor. El valor debe ser un elemento
de la clase Point y se establece como se puede ver a continuación
Me.btnAceptar.Location = New Point(100, 3)
• TopMost: Si se le asigna el valor True, el formulario siempre aparece por encima
del resto.
Me.TopMost = True
• StartPosition: Establece la posición de inicio del formulario
o CenterParent: centrado respecto al formulario principal
o CenterScreen: centrado respecto a la pantalla
o Manual: respeta la propiedad Location
o WindowsDefaultBounds: se comporta según valores predeterminados de
Windows.
o WindowsDefaultLocation: se comorta según los parámetros de ubicación
predeterminados de Windows y tiene el tamaño especificado en el programa.
• AutoScroll: Si asignamos el valor True (verdadero) a esta propiedad, hacemos que
cuando el formulario se haga muy pequeño o muy estrecho, se muestren unas barras
de desplazamiento (scrolls) para que pulsando en ellas podamos ver el contenido del
mismo.

4
Métodos

• SetDesktopBounds (x,y,ancho,alto): fija el tamaño y posición del formulario en

relación al escritorio
Private Sub Form2_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)
Handles MyBase.Load
'Establece la posición y el tamaño de la pantalla activa
'Screen.PrimaryScreen hace referencia a la pantalla principal
'La propiedad WorkingArea devuelve el tamaño y posición de una pantalla
'Establece el tamaño del formulario a 1/4 del tamaño del escritorio
'y lo centra en el cuadrante inferior derecho del mismo
Me.SetDesktopBounds(Screen.PrimaryScreen.WorkingArea.Width / 2, _
Screen.PrimaryScreen.WorkingArea.Height / 2, _
Screen.PrimaryScreen.WorkingArea.Width / 2, _
Screen.PrimaryScreen.WorkingArea.Height / 2)
End Sub
• CentertoScreen(): centra el formulario en pantalla.
• CentertoToParent(): centra el formulario respecto al formulario padre

CAMBIAR EL ASPECTO DE LA VENTANA DEL FORMULARIO

Cambiar el nivel de opacidad de un formulario

Se puede determinar el nivel de transparencia de un formulario con la propiedad Opacity,
por defecto está al 100% y el formulario es totalmente opaco.
En la siguiente imagen se muestran un grupo de formulario a los que se ha alterado su
propiedad Opacity.

Mostrar una imagen de fondo en un formulario

La propiedad BackgroundImage permite incluir una imagen de fondo en el formulario.
La propiedad BackgroundImageLayout permite indicar el comportamiento de la imagen

5
 None. La imagen se alinea a la izquierda en la parte superior del formulario.
Tile. La imagen se dispone en mosaico en todo el rectángulo cliente del control.
Center. La imagen se centra dentro del rectángulo cliente del control.
Stretch. La imagen se extiende por todo el rectángulo cliente del control.
Zoom. La imagen se amplía dentro del rectángulo cliente del control.

Modificar los bordes del formulario

La propiedad FormBorderStyle puede tener los siguiente valores
Valor Consecuencia
None Sin borde. Se utiliza para los formularios de inicio.
Fixed 3D Se utiliza cuando se desea un efecto de borde tridimensional. No se
puede cambiar de tamaño. Puede incluir en la barra de título un
botón de menú de control y botones Maximizar y Minimizar.
Fixed Dialog Se utiliza para los cuadros de diálogo. Presenta un borde grueso. No
se puede cambiar de tamaño. Puede incluir en la barra de título un
cuadro de menú de control, y botones Maximizar y Minimizar.
Fixed Single. No se puede cambiar de tamaño. Presenta un borde de una sóla
línea. Puede incluir cuadro de menú de control y botones Maximizar
y minimizar. Sólo puede cambiar de tamaño con los botones
Maximizar y Minimizar.
Fixed Tool Window Se utiliza para las ventanas de herramientas. Muestra una ventana
de tamaño no ajustable con un tamaño de fuente reducido.
Sizable Con frecuencia se utiliza como ventana principal. Se le puede
cambiar el tamaño. Puede incluir un menú de control y botones
Maximizar y Minimizar. Puede cambiar de tamaño mediante el
cuadro de menú de control, los botones Maximizar y Minimizar de la
barra de título, o mediante el ratón.
SizableToolWindow Ventana de herramientas de tamaño variable. Se debe tener en
cuenta de que este tipo de ventana no aparece en la barra de tareas.

ORGANIZACIÓN DE LOS CONTROLES EN EL FORMULARIO

Anchor y Dock
Acoplar y anclar controles. La visualicación de los controles pueden sufrir alteraciones
inesperadas al redimensionar la ventana en tiempo de ejecución o se cambia la resolución.
Para evitar estos problemas se pueden utilizar las propiedades Dock y Anchor.
Anchor es una propiedad que indica el comportamiento de un control cuando su contenedor
cambia de tamaño. Estra propiedad indica si el control se redimiensiona proporcionalmente
o bien si permanece del mismo tamaño siendo constante su posición relativa respecto a
alguno de los lados del formulario.
6
 Prueba a crear un control en un formulario y modificar su propiedad Anchor. El efecto se
comprobará al ejecutar el formulario y cambiar el tamaño a la ventana.
Dock es una propiedad vinculada a Anchor. Especifica si el control permanece anclado (a una
distancia constante) de los lados de su contenedor. Si se redimensiona éste, el control
continúa a la misma distancia del extremo al que se ha anclado

o Fill

o Top

o Left

o Button

o Right

Prueba la propiedad Dock para un Anchor fijo

Los controles LayoutPanel

El control FlowLayoutPanel permite organizar los elementos de un formulario de forma

automática y se adapta a los cambios de tamaño. Cuando se necesita un diseño dinámico
que varía en función del tamaño de su contenido esta es una buena opción.

El control FlowLayoutPanel organiza su contenido en una dirección específica de flujo

horizontal o vertical (FlowDirection) y permite acoplarse a la ventana del formulario
(Dock=Fill). Los controles se van colocando automáticamente, según el flujo de datos, al irse

El contenedor TableLayoutPanel organiza el contenido en celdas. Las celdas se organizan en

filas y columnas y éstas pueden tener distintos tamaños. En cada celda sólo es posible
introducir un control.

Entre las operaciones que se pueden realizar con un control TableLayoutPanel destacan:

• Cambiar el ancho de cada fila y columna arrastrando la línea que divisoria, esta
operación provoca que los controles reduzcan su tamaño hasta adaptarse al de
la celda (ver Button2 en la imagen)

7
 • Se puede utilizar la propiedad Anchor y Dock teniendo como referencia la celda
de la tabla
• Se puede conseguir que un control ocupe dos filas cambiando la propiedad
RowSpan. Por ejemplo, en la imagen se ve un control Button2 que estaba en la
primera fila y se ha cambiado su propiedad RowSapan a 2 para, posteriormente,
modificar su tamaño y traspasar sin problemas la barrera de la fila a la que
pertenece.

• Se puede conseguir que un control ocupe dos columnas cambiando la propiedad

ColumnSpan. Por ejemplo, en la imagen se ve un control Button2 que estaba en
la primera columna y se ha cambiado su propiedad ColumsSapan a 2 para,
posteriormente, modificar su tamaño y traspasar sin problemas la barrera de la
columna a la que pertenece.

Líneas de ajuste: SnapLine

Las SnapLine son segmentos de líneas verticales y horizontales que se muestran de forma
dinámica al colocar los controles en el formulario y que ayudan a la alineación de controles.
Las líneas de ajuste muestran referencias para colocar los controles unos respecto a otros y
dan información sobre la distancia mínima deseada entre ellos.

CREAR VENTANAS DIVISORIAS

Para crear un formulario que tenga una línea vertical que divida el formulario en dos zonas
se utiliza el control SplitContainer.
Cuando arrastramos el control el formulario se ve de la siguente manera

8
Sólo tiene que soltar un control SplitContainer en el formulario y luego agregar controles
sobre éste; el comportamiento de cambio de tamaño está disponible automáticamente
cuando se ejecuta la aplicación.
También puede agregar varios controles SplitContainer al formulario para tener regiones de
tamaño variable dentro de regiones, lo que permite crear una aplicación parecida a
Microsoft Outlook.

ENLACES UTILIZADOS

http://adeshoras.wordpress.com/2008/07/02/buenas-practicas-para-el-diseno-de-
formularios/
http://www.colimbo.net/documentos/documentacion/208/IHMTema08A_Windows_Forms.
pdf
http://www.alzado.org/articulo.php?id_art=408