Compartir a través de


Comunicarse con el usuario del programa: interfaz de usuario

Actualización: noviembre 2007

En esta lección, aprenderá lo que es una interfaz de usuario (UI), qué son los controles y cómo agregar controles a una interfaz de usuario.

En los primeros días de los equipos personales, los usuarios interactuaban con programas principalmente a través de una línea de comandos. Se iniciaba un programa y después se hacía una pausa para recibir los datos proporcionados por el usuario. Sin embargo, la mayoría de los programas que se utilizan hoy en día se ejecutan en una o varias ventanas. Estas ventanas permiten que el usuario se comunique o interactúe con el programa escribiendo, haciendo clic en los botones, eligiendo elementos en los menús preestablecidos y así sucesivamente. En estas y en las siguientes lecciones, aprenderá a crear sus propias interfaces de usuario basadas en Windows.

Utilizar formularios

Los formularios son las unidades de creación básicas para la interfaz de usuario. Cada formulario del programa representa una ventana que se aparece a los usuarios. Cuando se trabaja en el IDE (entorno de desarrollo integrado) de Visual Basic, un formulario puede considerarse como el diseñador que se utiliza para diseñar la interfaz de usuario de la aplicación, del mismo modo que Windows Paint se utiliza para dibujar una imagen.

Los controles se utilizan en el diseñador para crear la apariencia de la interfaz de usuario. Un control es un objeto que tiene un aspecto y comportamiento predefinidos. Por ejemplo, un control Button tiene el aspecto y el comportamiento de un botón de comando: cuando un usuario hace clic en él, cambia para mostrarlo.

Cada control de Visual Basic tiene una finalidad. Por ejemplo, los controles TextBox se utilizan para escribir texto, mientras que los controles PictureBox se utilizan para mostrar imágenes. Hay más de cincuenta controles diferentes incluidos en Visual Basic; también se pueden crear controles propios conocidos como controles de usuario. Obtendrá más información sobre cada tipo de control en lecciones posteriores.

Al diseñar la interfaz de usuario, se arrastran los controles desde el Cuadro de herramientas, se colocan en un formulario, luego se ubican y se cambian de tamaño para crear el aspecto deseado. Puede cambiar el aspecto aún más estableciendo propiedades de formularios y controles en la ventana Propiedades. Por ejemplo, los formularios y la mayoría de los controles tienen una propiedad BackColor que se utiliza para establecer su color de fondo.

Las propiedades también se utilizan para definir el comportamiento de un formulario o control. Por ejemplo, la propiedad ShowInTaskbar de un formulario determina si el formulario aparecerá en la barra de tareas de Windows cuando se esté ejecutando el programa. Las propiedades le permiten personalizar el aspecto y el comportamiento de la interfaz de usuario.

Inténtelo

Para cambiar las propiedades de un formulario

  1. En el menú Archivo, haga clic en Nuevo proyecto.

  2. En el cuadro de diálogo Nuevo proyecto, en el panel Plantillas, haga clic en Aplicación para Windows.

  3. En el cuadro Nombre, escriba FirstForm y haga clic en Aceptar.

    Se crea un nuevo proyecto de formularios Windows Forms. Aparece un nuevo formulario en la ventana principal y sus propiedades son visibles en la ventana Propiedades, en la esquina inferior derecha del IDE de Visual Basic.

  4. Haga clic en el formulario para seleccionarlo.

  5. En la ventana Propiedades, cambie la propiedad Text para que se lea "Mi primer formulario" y presione ENTRAR.

    El texto en la parte superior del formulario cambia después de especificar el nuevo valor.

  6. En la ventana Propiedades, cambie la propiedad BackColor a un color diferente seleccionando un color desde la lista desplegable.

    Observe que la propiedad BackColor se cambia a través de una interfaz especial. Esta interfaz le permite ver el color antes de seleccionarlo, así como elegir entre los colores actualmente utilizados por el sistema, colores web estándar o una selección de colores más personalizada. También puede escribir sólo el nombre del color (por ejemplo, Red) en el cuadro en la ventana Propiedades.

    Experimente cambiando otras propiedades del formulario. Cuando esté listo, continúe con el siguiente procedimiento.

Agregar controles al formulario

En este procedimiento, agregará controles al formulario seleccionando el control en la ventana Cuadro de herramientas, que normalmente se encuentra en el lado izquierdo del IDE de Visual Basic, y arrastrándolo al formulario. A continuación, ajustará las propiedades de los controles.

Para agregar controles al formulario

  1. Desde el Cuadro de herramientas, arrastre un control Button, un control TextBox, un control Label y finalmente un control CheckBox hasta el formulario.

  2. Seleccione el control Button y arrástrelo alrededor del formulario para cambiar su ubicación.

    Observe cómo aparecen las instrucciones cuando lo arrastra cerca de los otros controles. Estas instrucciones pueden ayudarle a colocar los controles con precisión.

  3. Repita el proceso con los otros controles hasta que la interfaz de usuario tenga el aspecto que desea.

  4. Seleccione el control Button y, a continuación, arrastre el cuadrado de tamaño por su esquina inferior derecha para cambiarlo de tamaño.

  5. Pruebe las propiedades de control durante algunos minutos. Haga clic en cada control en el formulario para seleccionarlo y cambie algunas de sus propiedades en la ventana Propiedades. Entre las propiedades que puede tratar de cambiar se encuentran: Font, BackColor, ForeColor y Text. Para obtener más información, consulte Información detallada: comprender el diseño de controles.

  6. Presione F5 para ejecutar el programa. Aparecerá una ventana con los controles que acaba de agregar. Observe que puede hacer clic en el botón, activar y desactivar la casilla y escribir en el cuadro de texto.

Pasos siguientes

En esta lección, aprendió a crear un formulario y a agregarle controles. También aprendió a cambiar propiedades de formularios y controles en la ventana Propiedades. En las siguientes lecciones, se explicarán con mayor detenimiento algunos de los controles.

Siguiente lección: Interactuar con el usuario: utilizar botones

Vea también

Conceptos

Información detallada: comprender propiedades, métodos y eventos

Otros recursos

Crear la apariencia visual de un programa: introducción a los formularios Windows Forms