13 conceptos de interfaz gráfica de usuario: parte I

13.1 Introducción • Una interfaz gráfica de usuario (GUI) permite a un usuario interactuar con

un programa en forma visual; además, proporciona a un programa una “apariencia visual” única

Control Descripción

• Label: Muestra imágenes o texto que no puede editarse.

• TextBox: Permite al usuario introducir datos mediante el teclado. También puede usarse para mostrar texto que puede o no editarse.

• Button: Activa un evento cuando se hace clic con el ratón.

• CheckBox: Especifica una opción que puede seleccionarse (activada) o deseleccionarse (desactivada).

• ComboBox: Proporciona una lista desplegable de elementos, de los cuales el usuario puede seleccionar uno, haciendo clic en un elemento de la lista o escribiendo dentro de un cuadro.

• ListBox: Proporciona una lista de elementos, de los cuales el usuario puede seleccionar uno, haciendo clic en un elemento de la lista. Pueden seleccionarse varios elementos a la vez.

• Panel: Un contenedor en el que pueden colocarse y organizarse controles.

• NumericUpDown: Permite al usuario seleccionar de un rango de valores

13.2 Formularios Windows Forms Un formulario es un contenedor de controles y componentes

Propiedades, métodos y eventos de Form Descripción

Propiedades comunes

• AcceptButton Control Button en el que se hace clic al oprimir Intro.

• AutoScroll Valor boolean que activa o desactiva las barras de desplazamiento, según sea necesario.

• CancelButton Control Button en el que se hace clic al oprimir Esc.

• FormBorderStyle Estilo de borde para el formulario. (Por ejemplo: ninguno, simple o tridimensional).

• Font La fuente de texto que se muestra en el formulario, y la fuente predeterminada para los controles que se agregan al formulario.

• Text El texto en la barra de título del formulario.

Métodos comunes

• Close Cierra un formulario y libera todos los recursos, como la memoria utilizada para los controles y componentes del formulario. Un formulario cerrado no puede volver a abrirse.

• Hide Oculta un formulario, pero no lo destruye ni libera sus recursos.

• Show Muestra un formulario oculto.

Eventos comunes

• Load Ocurre antes de que se muestre un formulario al usuario. El manejador para este evento se muestra en el editor de Visual Studio al hacer doble clic en el formulario, en el diseñador de Visual Studio.

13.3 Manejo de eventos Las GUIs son controladas por eventos. Cuando el usuario interactúa con un componente de la GUI, la interacción (conocida como evento) controla el programa para que realice una tarea. A un método que realiza una tarea en respuesta a un evento se le conoce como manejador de eventos, y al proceso general de responder a los eventos se le conoce como manejo de eventos.

13.3.1 Una GUI simple controlada por eventos // maneja evento de clic del control Button clickButton

private void clicButton_Click( object sender, EventArgs e ) { MessageBox.Show( "Se hizo clic en el botón." );

} // fin del método clicButton_Click

13.3.2 Otro vistazo al código generado por Visual Studio El código generado en forma automática que define la GUI en realidad forma parte de la clase de Form; en este caso, EjemploSimpleEventoForm

13.3.3 Delegados y el mecanismo de manejo de eventos El control que genera un evento se conoce como el emisor del evento. Un método manejador de eventos (conocido como el receptor del evento) responde a un evento específico que genera un control.

• El mecanismo del manejo de eventos nos permite escoger nuestros propios nombres para los métodos de manejos de eventos.

o Estos métodos deben estar propiamente declarados para recibir información acerca del evento que maneja.

• Necesita un mecanismo para indicar cual método es un manejador de eventos para el evento.

• Event Sender: Componente que genera un evento. No sabe por adelantado cual método va a responder a sus eventos.

• Event Handler: Método que es invocado para responder a un evento

Delegados Los manejadores de eventos se conectan a los eventos de un control a través de objetos especiales, conocidos como delegados. Un objeto delegado guarda una referencia a un método con una firma que se especifica mediante la declaración del tipo del delegado. Los controles de la GUI tienen delegados predefinidos que corresponden a cada uno de los eventos que pueden generar.

• Event handlers están conectados a un control de eventos a través de un objeto especial llamado delegado.

• La declaración del tipo de delegado especifica el tipo de retorno y firma de un método.

• Los controles tienen delegados predefinidos que corresponden a cada evento que generan.

• El delegado para el evento Click de un control Button es del tipo EventHandler (espacio de nombres System).

o public delegate void EventHandler( object sender, EventArgs e );

• Event sender llama al delegado apropiado cuando occurred el evento.

o Button llama al delegado EventHandler que corresponde a su evento Click en respuesta a un clic.

o El trabajo del delegado es invocar al método apropiado.

• Para especificar la llamada al método: this.clickButton.Click += new System.EventHandler(this.clicButton_Click);

• Muchos métodos pueden responder a un solo evento.

• Los delegados de eventos son multidifusión (MulticastDelegate) o representan un conjunto de objetos delegados, en donde

todos tienen la misma firma.

• Los delegados multidifusión (MulticastDelegate,) permiten que varios métodos se llamen en respuesta a un solo evento. Cuando ocurre un evento, el emisor de eventos llama a todos los métodos referenciados por el delegado multidifusión. A esto se le conoce como multidifusión de eventos.

• Delegado de eventos derivan de la clase MulticastDelegate o Deriva de delegado

13.3.4 Otras formas de crear manejadores de eventos

Propiedades y métodos de la clase Control

Propiedades comunes

• BackColor: El color de fondo del control.

• BackgroundImage: La imagen de fondo del control.

• Enabled: Especifica si el control está habilitado (es decir, si el usuario puede interactuar con él). Por lo general, ciertas partes de un control deshabilitado aparecen en color gris como indicación visual para el usuario de que el control está deshabilitado.

• Focused: Indica si el control tiene el foco.

• Font: La fuente utilizada para mostrar el texto del control.

• ForeColor: El color de primer plano del control. Por lo general, esta propiedad determina el color del texto en la propiedad Text.

• TabIndex: El orden de tabulación del control. Cuando se oprime Tab, el foco se transfiere entre los controles, con base en el orden de tabulación. Usted puede establecer este orden.

• TabStop: Si es true, entonces un usuario puede dar el foco a este control al oprimir Tab.

• Text: El texto asociado con el control. La ubicación y apariencia del texto varían, dependiendo del tipo de control.

• Visible: Indica si el control es visible.

Métodos comunes

• Focus: Adquiere el foco.

• Hide: Oculta el control (establece la propiedad Visible a false).

• Show: Muestra el control (establece la propiedad Visible a true).

13.3.5 Localización de la información de los eventos

13.4 Propiedades y distribución de los controles

• El anclaje hace que los controles permanezcan a una distancia fi ja desde los extremos del contenedor, incluso aunque éste cambie su tamaño. El anclaje mejora la experiencia del usuario. Por ejemplo, si el usuario espera que un control aparezca en cierta esquina de la aplicación, el anclaje asegura que el control siempre esté en esa esquina; aun si el usuario cambia el tamaño del formulario.

• El acoplamiento une un control a un contenedor, de tal forma que el control se estira a lo largo de todo un extremo del contenedor. Por ejemplo,

un botón acoplado en la parte superior de un contenedor se estira a lo largo de toda la parte superior de ese contenedor, sin importar la anchura del contenedor.

Propiedades de la distribución de Control - Descripción

• Anchor: Hace que un control permanezca a una distancia fija desde el (los) extremo(s) del contenedor, aun cuando se cambie su tamaño.

• Dock: Permite que un control abarque un extremo de su contenedor, o que llene todo el contenedor.

• Padding: Establece el espacio entre los bordes de un contenedor y los controles acoplados. El valor predeterminado es 0, lo cual hace que el control parezca estar empotrado a los extremos del contenedor

• Location: Especifica la ubicación (como un conjunto de coordenadas) de la esquina superior izquierda del control, en relación con su contenedor.

• Size: Especifi ca el tamaño del control en píxeles como un objeto Size, que tiene las propiedades Width (anchura) y Height (altura).

• MinimumSize/MaximumSize: Indica los tamaños mínimo y máximo de un objeto Control, respectivamente.

13.5 Controles Label, TextBox y Button

Propiedades comunes de Label/Descripción

• Font: La fuente del texto en el control Label.

• Text: El texto en el control Label.

• TextAlign: La alineación del texto en el control Label; horizontal (izquierda, centro o derecha) y vertical (superior, media o inferior).

Propiedades y evento de TextBox /Descripción

Propiedades comunes

• AcceptsReturn: Si es true en un control TextBox con múltiples líneas, al oprimir Intro en el control TextBox se crea una nueva línea. Si es false, oprimir Intro es lo mismo que oprimir el control Button predeterminado en el formulario. El control Button predeterminado es el que se asigna a la propiedad AcceptButton de un formulario.

• Multiline: Si es true, el control TextBox puede abarcar varias líneas. El valor predeterminadoes false.

• PasswordChar: Cuando se asigna un carácter a esta propiedad, el control TextBox se convierte en un cuadro de texto de contraseña, y el carácter

especificado enmascara cada carácter que escribe el usuario. Si no se especifica un carácter, el control TextBox muestra el texto que se escribió.

• ReadOnly: Si es true, el control TextBox tiene un fondo de color gris y no se puede editar su texto. El valor predeterminado es false.

• ScrollBars: Para los cuadros de texto con múltiples líneas, esta propiedad indica cuáles barras de desplazamiento deben aparecer: ninguna (None), Horizontal, Vertical o ambas (Both).

• Text: El contenido de texto del control TextBox.

Evento común

• TextChanged: Se genera cuando cambia el texto en un control TextBox (es decir, cuando el usuario agrega o elimina caracteres). Al hacer doble clic en el control TextBox en el modo de Diseño, se genera un manejador de eventos vacío para este evento.

Propiedades y evento de Button/Descripción

Propiedades comunes

Text: Especifica el texto a mostrar en la superficie del control Button. FlatStyle: Modifica la apariencia de un control Button: los atributos Flat. (Para que el botón se muestre sin una apariencia tridimensional), Popup. (Para que el botón aparezca plano hasta que el usuario mueva el puntero del ratón sobre el botón), Standard (tridimensional) y System, en donde el sistema operativo es el que controla la apariencia del botón. El valor predeterminado es Standard.

Evento común

Click: Se genera cuando el usuario hace clic en el control Button. Al hacer doble clic en un control Button en vista de diseño, se crea un manejador de eventos vacío para este evento.

13.6 Controles GroupBox y Panel Por lo general, estos controles se utilizan para agrupar en una GUI los controles con una funcionalidad similar, o varios controles relacionados El control GroupBox puede mostrar una leyenda (es decir, texto) y no incluye barras de desplazamiento. El control Panel puede incluir barras de desplazamiento pero no incluye una etiqueta.

Propiedades de Groupbox-Descripción Controls: El conjunto de controles que contiene el control GroupBox. Text: Especifi ca el texto

Propiedades de Panel-Descripción AutoScroll: Indica si aparecen barras de desplazamiento cuando el control Panel es demasiado pequeño para mostrar todos sus controles. El valor predeterminado es false. BorderStyle; Establece el borde del control Panel. El valor predeterminado es None; las otras opciones son Fixed3D y FixedSingle. Controls: El conjunto de controles que contiene el control Panel

13.7 Controles CheckBox y RadioButton

Propiedades y eventos de CheckBox

Descripción

Propiedades comunes

Checked: Indica si el control CheckBox está seleccionado (contiene una marca de verificación) o deseleccionado (en blanco). Esta propiedad devuelve un valor Boolean.

CheckState: Indica si el control CheckBox está seleccionado o deseleccionado con un valor de la enumeración CheckState (Checked, Unchecked o Indeterminate). Indeterminate se utiliza cuando no está claro si el estado debe ser Checked (seleccionado) o Unchecked (deseleccionado). Por ejemplo, en Microsoft Word, cuando seleccionamos un párrafo que contiene varios formatos de caracteres y después seleccionamos Formato > Fuente, algunos de los controles CheckBox aparecen en el estado Indeterminate. Cuando CheckState se establece a Indeterminate, por lo general el control CheckBox se muestra en color gris. Text Especifica el texto que aparece a la derecha del control CheckBox.

Eventos comunes

CheckedChanged: Se genera cuando cambia la propiedad Checked. Éste es un evento predeterminado del control CheckBox. Cuando un usuario hace doble clic en el control CheckBox en vista de diseño, se genera un manejador de eventos vacíos para este evento.

CheckStateChanged Se genera cuando cambia la propiedad CheckState

FontStyle tiene un atributo llamado System.Flag- Attribute, lo que significa que los valores de bit de FontStyle se seleccionan de una manera que nos permita

combinar distintos elementos FontStyle para crear estilos compuestos, mediante el uso de operadores a nivel de bit. Estos estilos no son mutuamente exclusivos, por lo que podemos combinar distintos estilos y eliminarlos sin afectar la combinación de los elementos FontStyle anteriores. Podemos combinar estos diversos estilos de fuente, usando ya sea el operador OR lógico ( | ) o el operador OR exclusivo (^). salidaLabel.Font = new Font( salidaLabel.Font.Name, salidaLabel.Font.Size,salidaLabel.Font.Style ^ FontStyle.Bold ); Cuando se aplica el operador OR lógico a dos bits, si por lo menos uno de los dos bits tiene el valor 1, entonces el resultado es 1. La combinación de estilos mediante el uso del operador OR condicional funciona de la siguiente forma. Suponga que el estilo FontStyle.Bold se representa mediante los bits 01 y que FontStyle.Italic se representa mediante los bits 10. Si utilizamos el OR condicional ( | | ) para combinar los estilos, obtenemos los bits 11 01 = Bold 10 = Italic ----------------- 11 = Bold e Italic

Controles RadioButton Tienen dos estados: seleccionado y no seleccionado.

• Use controles RadioButton cuando el usuario sólo debe seleccionar una opción en un grupo.

• Use controles CheckBox cuando el usuario deba poder seleccionar varias opciones en un grupo.

• Los controles Form, GroupBox y Panel pueden actuar como grupos lógicos para los controles RadioButton. Los controles RadioButton dentro de cada grupo son mutuamente exclusivos entre sí, pero no con los controles Radio-Button en distintos grupos lógicos.

13.8 Controles PictureBox

Propiedades y eventos

Descripción

Propiedades comunes

Image: Establece la imagen a mostrar en el control PictureBox

SizeMode: Enumeración que controla el tamaño y el posicionamiento de la imagen. Los valores son Normal (predeterminado), StretchImage, AutoSize y CenterImage. Normal coloca la imagen en la esquina superior izquierda del control PictureBox, y CenterImage coloca la imagen en el centro. Estas dos opciones truncan la imagen si es demasiado grande. Stretch- Image cambia el tamaño de la imagen para que se ajuste al control PictureBox. AutoSize cambia el tamaño del control PictureBox para que muestre toda la imagen.

Eventos comunes

Click: Ocurre cuando el usuario hace clic en el control. Al hacer doble clic en este control en la vista de diseño, se crea un manejador de eventos para este evento.

Usando recursos programados Recursos

• Forma parte del archivo ejecutable.

• Permite a la aplicación acceder a imágenes dentro de la propiedad namespace del proyecto.

• Como agregar imágenes a los recursos del proyecto o Clic derecho en el nodo de propiedades del proyecto en el solution

explorer y seleccione abrir para desplegar las propiedades del proyecto.

o Clic al tab de recursos o Clic a la flecha ubicada en la parte superior del tab de recursos para

agregar recursos y seleccione agregar archivo existente… para desplegar la ventana de dialogo agregar archivo existente al recurso.

o Localice el archivo de imagen que desea agregar como recursos y de clic al botón de abrir.

• Accesible para la aplicación vía sus clases de recursos (del nombre de espacios de las propiedades del proyecto).

• Las clases contienen un objeto administrador de recursos para interactuar con los recursos a nivel de código.

• El método GetObject toma como un argumento el nombre del recurso tal como aparece en el tab de recursos, Ejemplo: “imagen0”, y retorna el recurso como un objeto.

• La clase recursos también proveen acceso directo a los recursos que ud defina con expresiones de la forma: resources.resourceName

13.9 Controles ToolTip

Propiedades y eventos

Descripción

Propiedades comunes

AutoPopDelay: La cantidad de tiempo (en milisegundos) que aparece el cuadro de información sobre herramientas, mientras el ratón se coloca sobre un control.

InitialDelay: La cantidad de tiempo (en milisegundos) que debe colocarse un ratón sobre un control para que aparezca un cuadro de información sobre herramientas.

ReshowDelay La cantidad de tiempo (en milisegundos) entre la cual aparecen dos cuadros de información sobre herramientas distintos (cuando el ratón se desplaza de un control a otro).

Eventos comunes

Draw: Se genera cuando se muestra el cuadro de información sobre herramientas. Este evento permite a los programadores modificar la apariencia del cuadro de información sobre herramientas.

13.10 Control NumericUpDown Propiedades y eventos

Descripción

Propiedades comunes

DecimalPlaces Cuantos espacios decimales se mostrarán en el control

Increment Especifica por cuánto cambia el número actual en el control, cuando el usuario hace clic en las flechas hacia arriba y hacia abajo.

Maximum El valor más grande en el rango del control.

Minimum El valor más pequeño en el rango del control

UpDownAlign Modifica la alineación de los controles Button arriba y abajo en el control. NumericDownControl. Esta propiedad se puede utilizar para mostrar estos controles Button, ya sea a la izquierda o a la derecha del control.

Value El valor numérico actual que se muestra en el control.

Eventos comunes

ValueChanged Este evento se genera cuando cambia el valor en el control. Es el evento predeterminado para el control NumericUpDown

13.11 Manejo de los eventos del ratón Propiedades y eventos

Descripción

Eventos del ratón con argumento del evento de tipo EventArgs

MouseEnter Ocurre cuando el cursor del ratón entra a los límites del control.

MouseLeave Ocurre cuando el cursor del ratón sale de los límites del control.

MouseHover Ocurre cuando el cursor del ratón se sobre el control.

Eventos del ratón con argumento del evento de tipo MouseEventArgs

MouseDown Ocurre cuando se oprime un botón del ratón mientras el cursor se encuentra dentro de los límites de un control.

MouseWheel Se reciben eventos de ratones con ruedita.

MouseMove Ocurre cuando el cursor del ratón se desplaza dentro de los límites del control.

MouseUp Ocurre cuando se suelta un botón del ratón, mientras el cursor se encuentra sobre los límites del control.

Propiedades de la clase MouseEventArgs

Button Especifica cuál botón del ratón se oprimió: Left (izquierdo), Right (derecho), Middle (central) o ninguno.

Clicks El número de veces que se hizo clic con el botón del ratón.

X-x La coordenada x dentro del control en el cual ocurrió el evento

Y-y La coordenada y dentro del control en el cual ocurrió el evento

13.12 Manejo de los eventos del teclado Propiedades y eventos

Descripción

Eventos de tecla con argumentos de tipo KeyEventArgs

KeyDown Se genera cuando se oprime por primera vez una tecla.

KeyUp Se genera cuando se suelta una tecla.

Evento de tecla con argumento de tipo KeyPressEventArgs

KeyPress Se genera cuando se oprime una tecla.

Propiedades de la clase KeyPressEventArgs

KeyChar Devuelve el carácter ASCII para la tecla oprimida.

Handled Indica si se manejó el evento KeyPress.

Propiedades de la clase KeyEventArgs

Alt Indica si se oprimió la tecla Alt.

Control Indica si se oprimió la tecla Ctrl.

Shift Indica si se oprimió la tela Mayús.

Handled Indica si se manejó el evento.

KeyCode Devuelve el código de la tecla que se oprimió, en forma de un valor de la enumeración Keys. Esto no incluye información sobre las teclas modificadoras. Se utiliza para evaluar una tecla específica.

KeyData Devuelve el código de la tecla que se oprimió, en combinación con la información de las teclas modificadoras en forma de un valor Keys. Esta propiedad contiene toda la información acerca de la tecla oprimida.

KeyValue Devuelve el código de tecla como un int, en vez de devolverlo como un valor de la enumeración Keys. Esta propiedad se utiliza para obtener una representación numérica de la tecla oprimida. El valor int se conoce como código de tecla virtual de Windows.

Modifiers Devuelve un valor Keys que indica si se oprimieron teclas modificadoras (Alt, Ctrl y Mayús). Esta propiedad sólo se utiliza para determinar la información sobre las teclas modificadoras.