UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA

ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS
PROGRAMACION I – Ciclo II 2020
GUIA 3: Programación de Formularios en C#

Objetivo General:
Programar y practicar soluciones secuenciales en C#, como con Formularios Windows.

Introducción :
Esta Guía consta de dos partes. La primera parte es un repaso de Formularios, se presentan
definiciones y ejemplos y, en la segunda parte, se exponen un conjunto de Ejercicios
Propuestos para que los estudiantes practiquen los conocimientos adquiridos.

Metodología:
El docente explicará la Parte I de esta Guía, para después indicar a los estudiantes que realicen
dos o tres de los ejercicios de la Parte II, los cuales debe desarrollar en un período máximo de
una semana.

Parte I. Programación de Formularios

C# es un lenguaje de programación orientado a objetos desarrollado y estandarizado por Microsoft

como parte de su plataforma .NET.

La sintaxis de C# es muy expresiva, pero también es sencilla y fácil de aprender. Los segmentos de
instrucciones de C# basados en pares de llaves son reconocidos inmediatamente por cualquier
programador familiarizada con C, C++ o DevC.

Framework. Net es la plataforma de desarrollo y ejecución de aplicaciones. Está compuesta de:

 Entorno de Ejecución (Runtime)

 Bibliotecas de Funcionalidad (Class Library)
 Lenguajes de Programación
 Compiladores
 Herramientas de Desarrollo (IDE & Tools)

En esta parte se explica el uso de Aplicaciones Windows Forms , los controles para diseñar
Interfaces Gráficas de Usuario GUI, Controles como GroupBox, Label, TextBox, Button,
ComboBox, ListBox, DataGridView, PictureBox, RadioButton, MenuStrip, entre otros; así como
también la modificación de las propiedades más importantes de dichos controles. Se explica
también el manejo de eventos en el Lenguaje de Programación C#.

El espacio de nombres System.Windows.Forms contiene clases para crear aplicaciones

basadas en ventanas que aprovechan las ventajas de las características avanzadas de la
interfaz de usuario disponibles en el Sistema Operativo Microsoft Windows.

A continuación, se estudian los controles básicos disponibles:

1
GroupBox: Componente que muestra un marco alrededor de un grupo de controles con un
título opcional.

Button: Componente que permite implementar un botón de pulsación.

Label: Proporciona información en tiempo de ejecución o texto descriptivo para un control.

TextBox: Componente que permite ingresar una línea de texto y editarlo.

PictureBox: Componente que permite mostrar una imagen en el formulario.

GroupBox Button Label TextBox PictureBox

CheckBox: Permite seleccionar o deseleccionar uno o varios ítems de un conjunto de

opciones.

RadioButton: Componente para mostrar varias opciones de las cuales sólo se puede
seleccionar una.

ComboBox: Usado para implementar una lista desplegable de varias opciones de las cuales
sólo se puede seleccionar una.

ListBox: Permite implementar una lista con varias opciones de las cuales se puede
seleccionar una o varias.

CheckBox RadioButton ComboBox ListBox

MenuStrip: Permite implementar un menú de ítems y subítems de opciones:

2
DataGridView: Muestra filas y columnas de datos en una cuadrícula que se puede
personalizar:

Algunas propiedades o características más comúnmente utilizadas de los Controles son:

BackColor: Permite modificar el color de fondo de un componente.

ForeColor: Propiedad para modificar el color de la letra de un componente.

Font: Permite modificar la fuente, el estilo y el tamaño de la letra de un componente.

Visible: Propiedad que permite establecer si el control estará o no visible.

Text: Para definir la línea de texto que se va a visualizar en el componente.

Cursor: Define el estilo del cursor del Mouse.

ToolTipText: Permite ingresar un mensaje de ayuda que se visualizará cuando se pase el

mouse sobre el componente.

Enable: Permite habilitar o deshabilitar un componente.

Un evento es un suceso que ocurre como consecuencia de la interacción del usuario con la
interfaz gráfica. Algunos ejemplos de eventos son:

● Pulsación de un botón.
● Cambio del contenido en una caja de texto.
● Deslizamiento de una barra.
● Activación de un CheckBox.
● Movimiento de la ventana.

Crear un nuevo proyecto Windows Forms de nombre WF0:

3
Luego a dar Aceptar, aparecerá Form1 en Vista Diseño, aumentar tamaño y modificar la
Propiedad Text con “.:.Uso de Formularios.:.”

Form1 en Vista Diseño

Renombrar Form1 como:

.:.Uso de Formularios.:.

Colocar mouse para agrandar el tamaño del Form1

Cambiar el color de fondo del formulario:

Propiedades > Apariencia > BackColor > Personalizado

4
 Control
Personalizado del
BackColor

Luego a Personalizar el BackColor, se puede decidir cuáles de los botones de la Ventana del
Form1 serán o no visibles:

Botones de Form1

MinimizeBox
MaximizeBox

MinimizeBox

Si se desea ocultar el botón maximizar:

Propiedades > Estilo de Ventana > MaximizeBox de True a False:

De la misma manera,
si se desea ocultar el botón minimizar:
Propiedades > Estilo de Ventana > MinimizeBox
Cambiar de True a False:

La apariencia de Form1 es:

5
Insertar TabControl:

Ya colocadas las dos pestañas.

Ajustar el tamaño a lo largo y
ancho del formulario:

Arrastrar hacia Form1

Así:

6
Aparecen dos pestañas: TabPage1 y TabPage2. Ir a las Propiedades TabPages y dar clic en
para que aparezca el Editor de la colección TabPage:

Dar clic aquí:

Dar clic en tabPage1 y cambiar la propiedad Text a: DatosGenerales. Para tabPage2, colocar
en Text DatosOpcionales:

Los botones y permiten adicionar o eliminar tabPages del

formulario. Si se desea insertar un tabPage entre dos controles ya creados, se utiliza:
Dar clic en botón Aceptar y en el área del tabPage1, llamada DatosGenerales, se
comenzarán a insertar controles para manejar los datos generales de los usuarios:

7
Se insertarán dos GroupBox en DatosGenerales, se les cambiarán las propiedades Text por:
Datos del Usuario y Datos del Perfil, respectivamente:

Al concluir estas acciones, el formulario tendrá la siguiente apariencia:

8
Se colocarán cinco Label que indicarán al usuario del formulario los datos requeridos:
Nombres, Primer Apellido, Segundo Apellido, Sexo y Nacionalidad. Se agregarán tres TextBox
para rellenar con los Datos del Usuario: nombres, primer apellido y segundo apellido. Para
completar la casilla del Sexo, se utilizarán dos RadioButton (a cada uno de ellos, se les
modificará la propiedad Text por Masculino y Femenino, respectivamente). Para la
Nacionalidad, se hará uso de un ComboBox o Lista Desplegable:

Luego de agregar el ComboBox, en sus Propiedades colocar “Seleccione” en Text y listar los
Items. Dar clic en

9
Por el momento, los Datos del Usuario, se encuentran así:

Se cambiarán las propiedades de apariencia de las tres cajas de texto (TextBox), clic en la
primera, ctrl+clic en la segunda y ctrl+clic en la tercera: BorderStyle a FixedSingle para lograr
que se les visualice un borde:

10
También se cambiarán las propiedades de los Font de las Label: Tipo, Estilo y Tamaño.

Dar clic en

Dando ctrl+clic, se seleccionan todas las etiquetas al mismo tiempo:

Para cambiar el color de la Fuente, seleccionar ForeColor y elegir, dentro de Personalizado:

También se puede modificar el color de fondo de los

TextBox:

El cambio se exhibirá en el formulario, así:

Finalmente, los Datos del Usuario, quedarán así:

11
En los Datos del Perfil, se agregará un PictureBox para poder agregar la foto del usuario. Por
el momento, se colocará una imagen de fondo, modificando BackgroundImage.
Dar clic en :

Se almacenará en Resources.resx. Se tomará la opción Archivo de Recurso del Proyecto y

clic en Importar:

12
Seleccionar minerva.jpg y clic en Abrir
Luego a Aceptar la importación de la imagen, se observará lo siguiente:

Para lograr que la imagen importada ocupe en totalidad el

espacio asignado en el formulario, se puede utilizar la
propiedad BackgroundImageLayout opción Stretch:

Dar clic en y escoger Stretch:

Observar cómo se adecúa la imagen al tamaño del PictureBox. Inmediatamente después,

agregar un Label: “Fecha de Nacimiento: “ y un control DateTimePicker, para elegir de un
calendario una fecha específica:
Una vez insertado el
control, el cambio se
exhibirá en Form1, así:

13
Se puede modificar el formato de la fecha, de Long a Short:

Y el cambio se notará:

Se agregará un control que permita seleccionar si se desea o no que se muestren los datos
del usuario. Para ello, se utilizará un CheckBox y dentro de su propiedad Text se colocará:
“Desea Mostrar estos datos?” De esta manera, el usuario podrá activar o desactivar la opción
si desea o no mostrar los Datos del Perfil:

Dentro de tabPage2, DatosOpcionales, se agregará un GroupBox con Text “Otros Datos del
Usuario”, una Label, “Descripción:” y un TextBox grande para que el usuario pueda escribir su
respectiva descripción, para ello, se debe modificar Multiline de False a True. Esto permite
aumentar verticalmente el tamaño del cuadro de texto:

Para que aparezca una

barra de desplazamiento
vertical, se debe modificar
ScrollBars de None a
Vertical:

A la par de Descripción, colocar otra Label, “Preferencias:” y un ListBox o Lista de Opciones

para que el usuario pueda elegir sus preferencias:

Para que el usuario tenga una lista de preferencias a seleccionar, modificar Items:

14
Luego a Aceptar, se puede cambiar la propiedad Font del listado de preferencias:

Se agregarán tres botones para que el usuario pueda seleccionar funcionalidades: guardar sus
datos, borrar sus datos o salir de la aplicación:

Para hacer más amigables los

botones, se les pueden agregar
imágenes, importándolas con la
propiedad Image y alineándolas
con ImageAlign

Finalmente, los DatosOpcionales quedarían así:

15
Para ejecutarlo, oprimimos F5 o el botón

16
Como segundo ejemplo, calcular el Interés Compuesto de un Capital en un determinado
espacio de tiempo a una tasa de interés determinada, utilizando el Lenguaje de Programación
C# y Windows Forms para diseñar la Interfaz Gráfica de Usuario, utilizando los controles
Textbox, Label, Button, Groupbox. Adicionalmente, se utilizará la clase Math y su método Pow,
se procesará la información en el evento Click del Button y se implementará también un
procedimiento para limpiar los diferentes componentes.

Estudiar el Flujograma que describe la solución a implementar y considerar las descripciones

de las fórmulas a utilizar, colocadas a la derecha del Diagrama de Flujo:

M=(1+r%)t *C I=M-C

Donde:

M (Monto) es la suma del capital más intereses

producidos en un tiempo determinado.

r (Taza de Interés) es la ganancia que se obtiene

por cada 100 unidades monetarias en cada periodo
de Tiempo.

T (Tiempo) es el período de tiempo durante el cual

se presta el capital.

C (Capital) es la cantidad de dinero invertida para

generar una ganancia.

I (Interés) es la utilidad Generada.

17
Modificar el Text a “Ejemplo 2”, insertar dos GroupBox, al primero de ellos colocar el Text
Interés y al de abajo borrarle Text.

El primer GroupBox recibirá las entradas y el segundo, desplegará las salidas de la aplicación
a desarrollar.

En el GroupBox del Interés colocar tres Label (Capital, Razón, Tiempo) con sus
correspondientes TextBox cada una. Modificar la propiedad Name de cada una de las cajas
de texto: txtCapital, txtRazon y txtTiempo (figura de la izquierda).

Dentro del mismo GroupBox, agregar dos botones: Calcular y Nuevo, colocarles este nombre
en la propiedad Text de cada uno de ellos. El primero permitirá calcular las operaciones;
mientras que el segundo limpiará los contenidos de las cajas de texto, nombrarlos btnCalcular
y btnNuevo, respectivamente (figura de la derecha).

18
En el segundo GroupBox, agregar dos Label y 2 TextBox:

De esta manera queda terminado el diseño del formulario. Se debe pasar a la programación
de las clases y eventos.

Dar doble clic en el botón Calcular para programarlo. Posteriormente, en el botón Nuevo y
pulsar F5 para observar la ejecución.

A continuación, se explicará el proceso para agregar una clase a nuestra solución.

19
  Dar clic derecho sobre la “GUIA3Ejem2” selecciona los submenús según la imagen.

Una segunda forma de poder agregar una clase es presionando las teclas “Mayus + Alt + C”

A Continuación, Programaremos la siguiente Clase:

Los atributos en una clase los

dejaremos privados, mientras que los
métodos se dejarán públicos

Al seleccionar esa opción o la combinación de teclas se nos desplegará la siguiente ventana

donde debemos de seleccionar en el listado de componentes “Clase” y en la parte inferior
debemos de colocar como nombre “Cuenta.cs” según la siguiente imagen.

20
A continuación, el contenido de Cuenta.cs:

Procedimiento para construir los set y get correspondientes por cada atributo

 Sombreamos los 3 atributos y seleccionamos “Acciones rápidas y refactorizaciones…”

21
 Selecciona en el sub menú “Encapsular campos (pero seguir usando el campo)”

22
También los métodos get y set los podemos crear de manera manual y quedarían de la
siguiente manera:

La programación del botón btnCalcular quedaría de la siguiente manera utilizando los

métodos set hechos manualmente:

23
A continuación, se muestra el contenido del Form1.cs.

Para ejecutar, pondremos los siguientes datos: 100 en Capital, 0.10 en Razón y 2 en Tiempo.
Oprimir Calcular y finalmente, la aplicación funcionando será:

24
Para ejecutar nuevamente, primero se deben limpiar los cuadros de texto. Para ello,
presionar el botón Nuevo:

25
Parte III. Ejercicios Propuestos

Construir soluciones en C# utilizando Windows Forms para los siguientes enunciados:

1. En el taller de reparación de motos, se necesita diseñar una solución en VS, basada en

C#, que despliegue la lista de repuestos, con sus precios más la mano de obra y calcule
el monto total a facturarle al cliente. Recordar sumar el 13% de IVA

2. Un cliente se acerca a un banco a realizar 3 transacciones: pago de ANDA, cambio del

cheque de su salario y depósito de $25 a su cuenta de ahorros. Calcular cuánto dinero
gastó y cuánto lleva en su bolsillo, luego de su visita al banco.

3. Dados los nombres de las gasolineras y los precios de gasolina súper, regular y de diesel,
imprimir los precios de cada combustible y el nombre de la gasolinera respectiva.

4. Leer 10 notas (de A a E) y los nombres de sus respectivos estudiantes. Imprimir los
nombres y las notas de cada uno.

5. El Departamento de Sismología de la Escuela de Ingeniería Civil de la Facultad de

Ingeniería y Arquitectura de la Universidad de El Salvador, necesita una solución que le
permita registrar la magnitud de los sismos que acontecen diariamente. Es decir, cada vez
que haya un sismo, se debe de registrar su magnitud. Al final del día se desea imprimir la
cantidad de sismos acontecidos.

6. La tiendita de la esquina necesita llevar el control de las bebidas vendidas diariamente y

separarlas por tipo (agua, jugo, gaseosa y cerveza) y precio (0.30, 0.60, 0.50, 0.75,
respectivamente. Además, si es envase de plástico o de vidrio. Al final del día se solicitará
la cantidad total vendida y el total de dinero recogido.

7. Crear un programa que simule una calculadora capaz de sumar, restar, multiplicar y dividir
dos dígitos:

26
8. Un estudiante que cursa Programación I, necesita un programa que le permita calcular su
nota al final del ciclo. El estudiante solo ingresará sus notas y obtendrá el cálculo, además
mostrar un mensaje de “Aprobado” o “Reprobado” dependiendo del resultado.

Evaluación Porcentaje
Primera Practica Evaluada 10%
Segunda Practica Evaluada 15%
Tercera Practica Evaluada 25%
Primer Examen Parcial 25%
Segundo Examen Parcial 25%
Total/Nota Final 100%

27