UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA

ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS
PROGRAMACION I – Ciclo II 2020
GUIA 2: Elementos Básicos de Windows Forms

Objetivo General:
Practicar con los elementos básicos de Formularios Windows en C#.

Objetivos Específicos:
 Conocer y aplicar los elementos básicos de Formularios Windows en C#.
 Aprender a crear Formularios Windows en C#.
 Aprender a usar C# como herramienta para crear Formularios Windows.

Introducción:
Esta Guía consta de cuatro partes. La primera parte trata el Marco Teórico (definición de los
elementos básicos de los Formularios Windows); la segunda, plantea los pasos a seguir para
crear un Formulario Windows en Visual Studio 2015 (VS), para, en la tercera parte, exponer
el código generado y, finalmente, la cuarta parte, son los Ejercicios Propuestos.

Por motivos ilustrativos, la Parte III ha sido programada; sin embargo, el alcance de
esta práctica se limitará a diseñar los Formularios.

Metodología:
El docente explicará las Partes II y III de esta Guía, para después indicar a los estudiantes
que realicen todos los ejercicios de la Parte IV, los cuales debe desarrollar y entregar en un
límite máximo de una semana, antes de su próxima sesión de laboratorio.

Parte I. Marco Teórico: Windows Forms o Formularios Windows

Windows Forms o Formularios de Windows es el nombre dado a la interfaz de

programación de aplicación gráfica (API - Application Programming Interface) que se incluye
como parte de Microsoft .NET Framework y proporciona acceso a los elementos de la
interfaz de Microsoft Windows nativas envolviendo la API de Windows existente en código
administrado.

Los elementos básicos de Windows Forms son:

a) Eventos. Cuando un usuario hace algo en su formulario o en alguno de sus controles,

se genera un evento. Su aplicación reacciona a estos eventos utilizando el código y
procesa los eventos cuando aparecen.

b) Controles. Windows Forms contiene diversos controles que se pueden colocar en los
formularios: controles que muestran cuadros de texto, botones, cuadros desplegables,
botones de radio e incluso páginas Web.

Si un control existente no satisface sus necesidades, los formularios Windows Forms

también admiten la creación de sus propios controles personalizados mediante la
clase UserControl.

1
 Los formularios Windows Forms tienen controles enriquecidos de interfaz de usuario
que emulan las características de aplicaciones de tecnología avanzada como
Microsoft Office. Mediante los controles ToolStrip y MenuStrip se pueden crear barras
de herramientas y menús que contienen texto e imágenes, muestran submenús y
hospedan otros controles como cuadros de texto y cuadros combinados.

c) Controles de Usuario. Proporcionan un medio para crear y reutilizar interfaces

gráficas de usuario. Un control de usuario es esencialmente un componente con una
representación visual. Como tal, puede constar de uno o más controles de Windows
Forms, componentes o bloques de código, que pueden extender su funcionalidad
mediante la validación de la entrada del usuario, la modificación de las propiedades de
presentación o la ejecución de otras tareas requeridas por su autor. Los controles de
usuario pueden incluirse en Windows Forms de la misma manera que los demás
controles (arrastrar y tirar).

Una parte esencial del control de usuario es una interfaz visual. Esta interfaz visual se
implementa mediante la adición de uno o más controles de Windows al diseñador de
controles de usuario.
Con el diseñador de formularios de Visual Studio de tipo arrastrar y colocar, se puede
crear fácilmente aplicaciones de Windows Forms: no se tiene más que seleccionar los
controles con el cursor y colocarlos en el lugar deseado del formulario.
El diseñador proporciona herramientas como líneas de cuadrícula y "líneas de ajuste"
para minimizar la molestia de alinear los controles. Y, aunque utilice Visual Studio o
compile desde la línea de comandos (Aplicaciones de Consola), se puede utilizar los
controles FlowLayoutPanel, TableLayoutPanel y SplitContainer para crear diseños de
formularios avanzados con el mínimo de tiempo y de esfuerzo.

A continuación, se encuentra la lista de controles más comunes con una breve descripción
de cada uno de ellos:

1) Button: presenta un botón estándar en el que el usuario puede hacer clic para realizar
acciones.

2) CheckBox : indica si una condición está activa o inactiva.

3) CheckedListBox: muestra una lista de elementos con una casilla junto a cada uno de
ellos.

4) ColorDialog: permite que el usuario seleccione un color de una paleta en un cuadro

de diálogo preconfigurado y que agregue colores personalizados a la paleta.

5) ComboBox : muestra datos en un cuadro combinado desplegable.

6) DataGrid: muestra datos organizados en formato de tabla procedentes de un conjunto

de datos y permite actualizar el origen de datos.

7) DataGridView: proporciona un sistema flexible y ampliable para mostrar y editar datos

en formato de tabla.

2
8) DateTimePicker: permite al usuario seleccionar un solo elemento de una lista de
fechas y horas.

9) Controles y Componentes de Cuadros de Diálogo: describe un conjunto de

controles que permite a los usuarios llevar a cabo interacciones estándar con la
aplicación o el sistema.

10) Control GroupBox: proporciona una agrupación identificable para otros controles.

11) ImageList: muestra imágenes en otros controles.

12) Label: muestra texto que no puede ser modificado por el usuario.

13) LinkLabel: permite agregar vínculos de tipo Web a aplicaciones de Windows Forms.

14) ListBox: permite a los usuarios seleccionar uno o más elementos de una lista
predefinida.

15) ListView: muestra una lista de elementos con iconos, al estilo del Explorador de
Windows.

16) MenuStrip: proporciona un sistema de menús para formularios.

17) MonthCalendar: muestra una intuitiva interfaz gráfica para que los usuarios vean y
establezcan información de fechas.

18) NotifyIcon: muestra iconos para procesos que se ejecutan en segundo plano y que,
de otro modo, no tendrían interfaz de usuario.

19) OpenFileDialog: permite que los usuarios abran archivos mediante un cuadro de
diálogo preconfigurado.

20) PageSetupDialog: establece los detalles de impresión de la página a través de un

cuadro de diálogo preconfigurado.

21) Control Panel: proporciona una agrupación identificable para otros controles y
permite su desplazamiento.

22) PictureBox: muestra gráficos en formato de mapa de bits, GIF, JPEG, metarchivo o
icono.

23) PrintDialog: selecciona una impresora, elige las páginas que se van a imprimir y
determina otros valores de configuración relacionados con la impresión.

24) PrintDocument: establece las propiedades que describen qué se va a imprimir e

imprime el documento en aplicaciones basadas en Windows.

3
 25) PrintPreviewControl: permite crear un componente o cuadro de diálogo PrintPreview
propio en lugar de utilizar la versión preconfigurada.

26) PrintPreviewDialog: muestra un documento tal como aparecerá cuando se imprima.

27) ProgressBar: indica gráficamente el progreso de una acción hacia su finalización.

28) RadioButton: presenta al usuario un conjunto de dos o más opciones excluyentes

entre sí.

29) SaveFileDialog: selecciona los archivos que se van a guardar y el lugar en el que se
guardarán.

30) SoundPlayer (Clase): permite incluir con facilidad sonidos en las aplicaciones.

31) StatusBar: muestra información de estado relacionada con el control que tiene el foco.

32) TabControl: muestra múltiples fichas que pueden contener imágenes u otros
controles.

33) TableLayoutPanel: representa un panel que dispone dinámicamente su contenido en

una cuadrícula que se compone de filas y columnas.

34) TextBox: permite que el usuario proporcione en varias líneas datos que se puedan
editar.

35) Timer: provoca un evento a intervalos regulares.

36) TreeView: muestra una jerarquía de nodos que se puede expandir o contraer.

37) WebBrowser: hospeda páginas Web y proporciona recursos de exploración Web de

Internet a la aplicación.

Parte II. Creación de un Formulario Windows Forms en C#

En el ejemplo se creará un formulario que contendrá un botón y una viñeta.

Crear un Nuevo Proyecto como Aplicación de Windows Forms. Poner Nombre y Ubicación y
dar Clic en Aceptar: [ Atajo: Ctrl+Shift+N ]

4
Luego a dar clic en Aceptar, aparecerá el espacio de trabajo para el Formulario 1 (Form1):

Propiedades de cada elemento

Lista de Controles
para Windows
Forms

5
Dar clic en Todo Windows Forms

y aparecerá:

En Cuadro de Herramientas, elegir botón (Button) y arrastrarlo hacia el formulario:

y aparecerá:

Dar clic derecho en y dar clic en Propiedades:

En Propiedades, buscar Text, dar clic en el combo box al final de la línea y aparecerá un
campo memo que puede reescribirse. Escribir el texto: “Presioname” y dar entrada:

6
En el formulario ha sido sustituído por

Una buena práctica es cambiar los nombres (propiedad Name) de los componentes (por
ejemplo, button1) por otros más fáciles de recordar y de comprender: “btnPresioname” en
lugar de button1. En el caso de label, se le puede renombrar como: “lblContador”:

Insertar una viñeta (Label) en Form1:

Dar clic en el combo

box para ir desplazando
la ventana de controles
hasta visualizar Label.
Dar clic y arrastrar al
Form1:

Para este ejemplo, Label se puede quedar con el texto “label1” debido a que se modificará
cada vez que se le dé clic al botón “Presioname”.

Dar clic derecho en y dar clic en Propiedades, buscar Name, renombrar label1 como
lblContador:

7
Parte III. Programación de un Formulario Windows Forms en C#

Dar doble clic al botón “Presioname” y aparecerá el código que VS ha generado. Observar
que ya aparece escrito el método Evento Click y está listo para ser utilizado:

Esta barra permite

observar las diferentes
vistas de Form1:

Código: Form1.cs
Diseño:Form1.cs[Diseño]

Método ClickEvent, creado automáticamente

por VS y listo para ser utilizado

8
En este momento, lo único que hace falta es programar lo que se desea que haga el botón al
presionarlo, para ello:

Se declarará la variable entera de 16 bits cantidad y se inicializará a cero. Almacenará la

cantidad de veces que se ha presionado el botón Presioname. Posteriormente, se utilizará el
método TryParse para convertir el valor entero de 16 bits inicial de cantidad a texto y
almacenarlo en la label1, de nombre lblContador

Cada vez que se presione el botón, el valor de cantidad se incrementará en uno y se

almacenará como texto en lblContador.

El texto almacenado en label1 de nombre lblContador será el valor de cantidad convertido en

string. Para esto se utilizará el método ToString:

Observar la utilización del foco:

TOMAR EN CUENTA QUE: La apariencia del programa depende del tema seleccionado en
Windows o del tema asignado al formulario

El programa ya corriendo, se vería de la siguiente forma:

Cada vez que se presione el botón “Presioname”, el texto de la viñeta “label1”, de nombre
“lblContador”, se irá actualizando.

Cerrar la ventana Form1 para parar la ejecución. Dar clic en

9
Opcionalmente, se puede cambiar la viñeta (Label) por un cuadro de texto (TextBox) y hacer
que escriba algo más.

Nota: también se puede trabajar con Windows Presentation Foundation que permite trabajar
los formularios de una manera mucho más detallada.

Windows Presentación Foundation

Windows Presentation Foundation (WPF) es un marco de interfaz de usuario que crea
aplicaciones de cliente de escritorio. La plataforma de desarrollo de WPF admite un amplio
conjunto de características de desarrollo de aplicaciones, incluido un modelo de aplicación,
recursos, controles, gráficos, diseños, enlace de datos, documentos y seguridad. Es un
subconjunto de .NET Framework, por lo que si ya se está familiarizado con la creación de
aplicaciones con .NET Framework, usando Windows Forms o ASP.NET, la experiencia de
programación resultará más sencilla. WPF usa el lenguaje de marcado de aplicaciones
extensible (XAML) para proporcionar un modelo declarativo para la programación de
aplicaciones.

Se trabaja de manera similar que con Windows Forms, sólo que WPF permite personalizar
de una manera más detallada las formas por medio del archivo XAML.

Ejemplo: Crear el mismo formulario que se creó con Windows Forms, el cual contiene un
botón (button) y una viñeta (label). Para ello, crear un Nuevo Proyecto como Aplicación de
WPF. Poner Nombre y Ubicación y dar Clic en Aceptar: [ Atajo: Ctrl+Shift+N ]

Luego de dar clic sobre el botón Aceptar, aparecerá la siguiente pantalla:

10
Como se puede apreciar en la imagen anterior, la única diferencia que se obtiene al trabajar
con WPF es que aparece una pestaña con el nombre XAML, el cual es código que permitirá
personalizar de una mejor manera la forma diseñada.
Ubicarse en la columna Controles WPF comunes, en donde aparecen todas las formas para
crear la pantalla:

Seleccionar Button y arrastrarlo al área de trabajo:

Al arrastrar el botón al área de trabajo se generan las

líneas guía para localizarlo y poder anclarlo. Asimismo,
se genera el código XAML.

En el código generado del botón, se puede cambiar

directamente el nombre tanto de la variable como el que
se mostrará gráficamente. Para este caso, la variable es
llamada btn1 y se muestra gráficamente como:
“Presióname”.

Mostrando así una mayor facilidad para poder manejar las variables y características de las
formas insertadas en el área de trabajo:

11
De la misma manera que se realizó con la forma Button, seleccionar y arrastrar la forma
Label al área de trabajo:

Después de agregadas las formas, el código completo XAML queda de la siguiente manera:

12
La programacion de este formulario se realiza de la misma manera que se ha explicado en el
ejemplo 1 con Windows Forms.

Parte IV. Ejercicios Propuestos

Construir los siguientes formularios en Windows form y Windows Presentation Fundation:

1 2
1 1

13
 3
1

4
1

14
 5
1

SUGERENCIA: Para diseñar tablas con celdas de diferentes colores, debe colocarse
cada una de ellas individualmente para cada campo y no una sola tabla.

6
1

15
7
1

16