Windows Forms y Controles

Sencillos

Curso de programación en
C#.NET

Ismael Caballero Muñoz-Reja

Ignacio García Rodríguez de Guzmán
 Formularios
Introducción
„ Todos los componentes que incluye la biblioteca
de .NET para el desarrollo de aplicaciones pueden
ser divididos en:
{ Windows Forms (componentes para gestionar ventanas
y controles).
{ Interfaz de dispositivos gráficos (GDI+), constituido por
las funciones que encapsulan las funcionalidades
graficas de bajo nivel).
„ Todo el conjunto de clases y tipos que encapsulan
toda la funcionalidad de las interfaces gráficas de
Windows en .NET están organizadas de manera
jerárquica. Esta jerarquía está definida por
herencia.
Curso de C#.NET Soluziona 2
Formularios
Introducción

Curso de C#.NET Soluziona 3

 Formularios
Introducción
Clase ¿Qué hace?
Object Clase básica de todos los tipos en el
entorno .NET
Component Funcionalidad básica de los
contenedores, facilitando la
tarea de albergar elementos en
un entorno gráfico. Establece
un protocolo de disponibilidad
de los recursos
Control Funcionalidad básica de un control
visual que responde a eventos
de ratón y teclado, acepta el
concepto de foco (ser el foco de
acción), además de participar
en operaciones drag & drop.
Form Define una clase que representa la
ventana Windows a la que
Curso de C#.NET
podemos añadir controles.
Soluziona
¿Por qué es necesario?
Proveer funcionalidad básica para
todos los objetos, además de
ser la base de un sistema único
de tipos.
Albergar un amplio tipo de controles
y componentes de una manera
genérica, además de constituir
la base para componentes no
visuales.
Superclase de todos los controles
existentes (ej. TextBox, Label,
Button, etc.), además de
proveer de la base para
componentes personalizados.
Clase base para crear nuestras propias
ventanas con una funcionalidad
de contenedor ya incluida (que
4
puede ser extendida).
 Formularios
Introducción
„ Crear una aplicación Windows Forms, es tan fácil
como instanciar y extender los formularios de
Windows y las clases de la GDI+.
„ Proceso:
1. Crear un nuevo proyecto definiendo la estructura de
una aplicación basada en Windows Forms.
2. Definir los Windows Forms necesarios.
3. Mediante el diseñador, personalizarlos añadiendo
controles según el propósito, configurando los
manejadores para la gestión de los eventos.
4. Agregar nuestro código para personalizar el
comportamiento y la apariencia.
5. Diseñar nuestros propios controles.
Curso de C#.NET Soluziona 5
 Formularios
Aplicación basada en Windows Forms
„ Lo primero…crear
un proyecto.
„ Seleccionamos el
tipo de proyecto.
„ Podemos empezar
a diseñar la
aplicación.

Curso de C#.NET Soluziona 6

 Formularios
Aplicación basada en Windows Forms
„ Visual Studio .NET establece el esqueleto de
la aplicación basada en formularios:
{ Un proyecto tipo Windows Application.
{ Referencias a los ensamblados correspondientes
para la gestión de los Windows Forms
(visualizables en el Solution Explorer ).
{ Formulario inicial: Form1 (clase en C# con la
estructura de un formulario).
{ Método Main para lanzar el formulario.
Curso de C#.NET Soluziona 7
 Formularios
Agregar controles

System.Windows.Forms.Form

ƒ Clase ya preparada para añadir y configurar controles.

ƒAñadidos de manera manual.
ƒAñadidos de manera visual (arrastrando y soltando).

Algunos
controles que
ofrece .NET por
defecto:

Curso de C#.NET Soluziona 8

 Formularios
Agregar controles
„ Arrastramos los objetos Nota: Ventana
a la ventana. de propiedades
(F4)
{ Label: Establecemos
texto y en propiedad
Autosize = true.
{ ComboBox:
Establecemos un
conjunto de términos.
{ TextBox: Establecemos
texto a vacío.

Curso de C#.NET Soluziona 9

 Formularios
Agregar controles
„ Para ejecutar, pulsamos F5 o
„ Con las propiedades de los
componentes, podemos
personalizar todo el
comportamiento y la
apariencia. Ej. en los TextBox,
podemos hacer que acepten
varias lineas (MultiLine), que
acepte tabuladores y retornos
de carro (AcceptsTab y
AcceptsReturn), establecer
ScrollBars verticales (o ambos
si la propiedad WordWrap esta
a false),…
Curso de C#.NET Soluziona 10
 Formularios
Agregar manejadores de Eventos
„ La interacción y la invocación de los servicios de los componentes se realiza
mediante la implementación de eventos.
„ Con simple “doble-clic” sobre un componente del formulario, se crea un metodo
y se vincula al evento “Click”, del componente pulsado.

Categorías

Eventos
concretos

Curso de C#.NET Soluziona 11

 Formularios
Agregar manejadores de Eventos
„ Seleccionando el evento deseado del componente
seleccionado, se genera automáticamente el esqueleto en
el código fuente.

„ En .NET, se aceptan dos parámetros en los eventos, por un

lado el sender (tipo object) y e (del tipo System.EventArgs).
{ sender Æ Control que envía el mensaje, útil, ya que multiples
controles pueden disparar un mismo evento.
{ e Æ Contiene información importante para el evento.

Curso de C#.NET Soluziona 12

 Formularios
Agregar manejadores de Eventos
„ Por ejemplo, agregamos la información de los
otros componentes:

Nota: Propiedad
Items de
determinados
componentes

Curso de C#.NET Soluziona 13

 Formularios
Controles en tiempo de Ejecución
„ Los controles también pueden agregarse de manera manual
(sin la interfaz del Designer).
„ Necesario cuando se debe incluir un componente como
resultado de la ejecución de un evento.
„ Utilizar como modelo el código generado automáticamente
en el Editor de Código. Concretamente en el método
InitializeComponent.
„ Agregar de manera manual un componente puede
resumirse básicamente en 4 pasos:
1. Añadir un nuevo campo de declaración para el nuevo componente.
2. Instanciar el control.
3. Configurar el control (establecimiento de los valores de las
propiedades) y añadir eventos (cuando sean necesarios).
4. Añadirlo a la colección de controles del formulario o a un contenedor
que tenga que gestionarlo.
Curso de C#.NET Soluziona 14
 Formularios
Controles en tiempo de Ejecución
1. private System.Windows.Forms.TextBox
nuevoTextBox;
2. this.nuevoTextBox = new TextBox();
3. this.nuevoTextBox.Location = new
Point(30,30); Point
4.
Size
this.Controls.Add(nuevoTextBox);
Rectangle

Curso de C#.NET Soluziona 15

 Formularios
Propiedades importantes
„ Posicionamiento y tamaño: tópicos vitales en la
configuración de los controles.
Tipo (struct) Ejemplo

Point button1.Location = new Point (100, 80);

button1.Left = 100;
button1.Top = 80;
Console.WriteLine (button1.Location.X);
button1.Location.X = 100;
Size button1.Size = new Size (75, 25);
button1.Width = 75;
button1.Height = 25;
this.Size = new Size (button1.Right,
button1.Bottom);
this.ClientSize = new Size(button1.Right, button1.Bottom);
Rectangle button1.Bounds = new Rectangle(100, 80, 50, 20);
button1.Bounds = new Rectangle
(0, 0, this.ClientSize.Width,this.ClientSize.Height);
Curso de C#.NET Soluziona 16
 Formularios
Colecciones de controles
„ La clase Form es un ejemplo de control que contiene otros
controles.
„ Los formularios Windows gestionan sus controlan sus controles
mediante una propiedad Controls. Esta propiedad devuelve un
objeto ControlCollection (implementa ICollection) a la que se
puede añadir, eliminar y acceder a los controles hijos.

„ El Panel es un ejemplo de contenedor para otros controles. Otro

contenedor más complejo es el GroupBox.

Curso de C#.NET Soluziona 17

 Formularios
Manejadores de Eventos en Tiempo de ejecución

„ También se pueden agregar manejadores de

eventos sin el explorador de eventos.
„ Tan sólo hay que seguir dos pasos:
1. Escribir el método que implementa el manejador
del evento.
2. Vincular el método al evento del control.
„ Vamos a crear un evento sobre el TextBox,
concretamente el MouseDown.
Curso de C#.NET Soluziona 18
 Formularios
Manejadores de Eventos en Tiempo de ejecución
„ Evento MouseClick para TextBox:
1. Creamos el método que vincularemos al evento:
2. Vinculamos el método que describe el
comportamiento deseado al evento que
correspondiente del control deseado:

Curso de C#.NET Soluziona 19

 Formularios
Manejadores de Eventos en Tiempo de ejecución
„ Todos los componentes tienen definidos un conjunto de eventos
que pueden ser “programados” para reaccionar de una manera
determinada ante un estímulo externo que responda a su
naturaleza.
„ En principio, los eventos no influyen en el estado del control a
menos que se ligue un manejador que controle el
comportamiento del mismo.
„ Para cada control existe un conjunto amplio de categorías de
eventos:
{ Acción
{ Arrastrar y colocar
{ Clave
{ Comportamiento Varían las categorías y los
{ Datos TextBox eventos según el tipo de
{ Foco control
{ Cambio de propiedad
{ Mouse
{ Presentación
Curso de C#.NET Soluziona 20
 Formularios
Manejadores de Eventos en Tiempo: Delegates
„ No podemos vincular un método directamente a un evento,
ya que C# es un lenguaje fuertemente tipado, y los eventos
necesitan pasar un conjunto de argumentos al método que
gestiona el comportamiento de respuesta al evento.
„ En caso contrario, no podríamos formalizar el número y el
tipo de parámetros. Por esto se utilizan los Delegates.
„ ¿Qué es un Delegate?
{ Dedfinición del Delegate: Descrita por la signatura de un método.
{ Instancia del Delegate: Un objeto que contiene un puntero al método
de acuerdo a la signatura.
„ Ej. de Delegate:
{ public delegate void EventHandler(object sender, EventArgs e)
{ EventHandler evha = new EventHandler(label1_Click);
{ label1.Click += evha;
Curso de C#.NET Soluziona 21
 Formularios
Tipos de Aplicación
„ Recordando…podemos
realizar dos tipos de
aplicación, las SDI
(Single Document
Interface) y las MDI
(Múltiple Document
Interface).

Curso de C#.NET Soluziona 22

 Formularios
Tipos de Aplicación
„ En las aplicaciones MDI, las ventanas están
físicamente restringidas en la ventana padre.
„ Existe un único menú principal ubicado en la
ventana padre.
„ En .NET, las aplicaciones Windows Form, se
declaran MDI mediante el uso de una propiedad
booleana, IsMdiContainer.
„ Agregamos un MainMenu del Cuadro de
Herramientas, estableciendo su propiedad MdiList
a True, para que se adjunten a este elemento la
lista de ventanas secundarias MDI.

Curso de C#.NET Soluziona 23

 Formularios
TabControl
„ En muchas ocasiones, los formularios se ven
sobrecargados con una gran cantidad de
controles, o prevemos durante la etapa de
desarrollo que podrá tenerlos.
„ Puede resultar desalentador, sobre todo el la etapa
de mantenimiento, enfrentarse a un formulario o
una ventana de diálogo tan sobrecargada (y
desordenada, en muchos casos).
„ A tal fin, encontramos controles como el
TabControl, que nos ayudan a tener organizados
los controles de los formularios.
„ Un TabControl consiste en una colección de
TabPages, cada una de las cuales alberga un
conjunto de controles. Podemos imaginar cada
una de estas TabPages como pestañas
separadas, que agrupan controles que realizan
conjuntamente alguna tarea.
Curso de C#.NET Soluziona 24
 Formularios
TabControl
„ Pasos a seguir:
1. Creamos un nuevo proyecto o tomamos un formulario cualquiera de un
proyecto existente.
2. Buscamos el componente TabControl en el Cuadro de Herramientas, lo
arrastramos al formulario como cualquier otro control.
3. Seleccionamos el numero de pestañas (TabPage) y las personalizamos.

Curso de C#.NET Soluziona 25

 Formularios
TabControl
„ Un TabControl consiste en una colección de TabPages,
cada una de las cuales alberga una colección de controles.
„ En cada instante, tan sólo un TabPage puede estar activo,
podemos determinar dinámicamente cual es:
{ Mediante la propiedad SelectedTab para recuperar el TabPage
activo.
{ Mediante la propiedad SelectedIndex recuperamos su posición en
el TabControl.
„ Además, podemos añadir TabPages a un TabControl
dinámicamente.
1. Creamos la TabPage: TabPage t = new TabPage(“Nueva pestaña”);
2. La añadimos al TabControl: tcontrol.TabPages.Add(t);
„ De la misma manera, podemos añadir dinámicamente
controles a las TabPage.
Curso de C#.NET Soluziona 26
 Formularios
TabControl: Ejemplo
„ Vamos a realizar una aplicación con varias
pestañas. La primera, que implemente una
pequeña calculadora, la segunda una agenda
para tomar notas simples, y la tercera una
ventana de Log, donde se reflejen las
operaciones realizadas en las dos pestañas
primeras.

Curso de C#.NET Soluziona 27

Formularios
TabControl: Ejemplo

…y entre
medias…UN
DELEGATE

Curso de C#.NET Soluziona 28

 Formularios
TreeView y ListView
„ El estilo de visualización de Windows es muy
cómodo, y una parte considerable de los
usuarios están muy familiarizados con este
tipo de entornos.
„ Ej. el explorador de Windows, el árbol a la
izquierda y la vista de elementos a la
derecha. Además de ser cómodo, resulta muy
intuitivo.
Curso de C#.NET Soluziona 29
 Formularios
ListView
„ Este control nos permite desarrollar “contenedores”
para almacenar colecciones de elementos,
constituyendo un repositorio para los elementos
que contiene.
„ Antes de empezar a utilizar estos componentes,
vamos a utilizar el componente ImageList, que
funciona como un contenedor donde poner
colecciones de imágenes, y poder utilizarlo dentro
de otros componentes, como el ListView.

Curso de C#.NET Soluziona 30

 Formularios
ListView
„ En primer lugar, vamos a arrastrar un
ImageList a la pantalla (no se ve porque es
un componente, no un control, pero se ve
que está ahí. La llamaremos IconosChicos
(los iconos serán de 16*16).
„ Buscamos las imágenes con las que vamos
a cargarlo: Sun, Snow, Clouds, Rain (buscar
iconos en Program Files\Microsoft Visual
Studio.NET\Common7\Graphics\Icons). Con
la propiedad Images, desplegamos el
cuadro de edición del ImageList.
„ De la misma forma, añadimos otro
ImageList, llamada IconosGrandes, con los
mismos iconos, pero con resolución de
32*32, que lo especificaremos en la
propiedad ImageSize.
„ En ambas listas, las imágenes deben estar
en el mismo orden.

Curso de C#.NET Soluziona 31

 Formularios
ListView
„ Añadimos el ListView,
ponemos la propiedad
LargeImageList a
IconosGrandes y la
SmallImageList a
IconosChicos.
„ Añadimos cuatro items
(propiedad Items), que
se corresponderán con
la leyenda de los
iconos.
„ Con la propiedad View,
podemos controlar el
tipo de visualización.
Curso de C#.NET Soluziona 32
 Formularios
ListView
„ Vinculamos un
manejador al
evento
ItemActivate, le
decimos que nos
muestre un dialogo
con el texto del
item seleccionado:

Curso de C#.NET Soluziona 33

 Formularios
ListView: Vista de Detalles
„ La típica vista de Detalles
con varias columnas para
los diferentes campos
también puede ser
implementada en un
ListView.
„ En primer lugar,
tendremos que cambiar el
tipo de vista del ListView
a Details y editamos las
columnas en la propiedad
Columns.
„ En el editor de los items,
describimos, para item,
cual es el contenido en
todas las columnas.

Curso de C#.NET Soluziona 34

 Formularios
Menú Contextual
„ En casi todas las aplicaciones
Windows (y de otras plataformas) hay
elementos que ayudan al usuario a
realizar acciones sobre los elementos
que tenemos a la vista.
„ Partiremos del proyecto anterior para
agregar un menú contextual.
„ Localizamos el control en el cuadro de
herramientas y lo arrastramos al
formulario.
„ Le añadiremos cuatro elementos:
Iconos grandes, Iconos pequeños y
Detalles y Lista. Vamos a hacer un
menú contextual para seleccionar el
tipo de vista del ListView.
„ Nombraremos a los ítem del menú
contextual: IconosGrandesMI,
IconosChicosMI y DetallesMI y ListMI
respectivamente, para poder luego
referirnos a ellos.
Curso de C#.NET Soluziona 35
 Formularios
Menú Contextual
„ Una vez creados los elementos del menú, queda vincular los
manejadores a los eventos de los elementos del menú para
que responda y realice las acciones que determinemos.
„ Escribimos un método para cada uno de los eventos (para los
iconos pequeños, los grandes y la vista de detalles).
Vinculamos cada método con el evento Click de cada uno de
los ítem del menú.

View.LargeIcon
View.SmallIcon
View.Details

Curso de C#.NET Soluziona View.List 36

 Formularios
Menú Contextual
„ Tras esto, seleccionamos el componente cmView, abrimos su ventana
de propiedades y nos desplazamos a la ventana de eventos, allí
hacemos doble-clic el evento Popup. Pinchamos y se crea el
esqueleto del método (handler) que gestionará el comportamiento del
menú contextual.
„ En el método diremos que al desplegarse, se dibuje una muesca al
lado del ítem que corresponda con el tipo de vista que actualmente
tiene el menú (establecemos la muesca poniendo a true propiedad
Checked de los item del menú).

Curso de C#.NET Soluziona 37

 Formularios
Menú Contextual
„ Por último, queda vincular el menú contextual con el
ListView.
„ Seleccionamos el ListView, buscamos su propiedad
ContextMenu, la desplegamos y seleccionamos el
único menú que hay en el proyecto.

Curso de C#.NET Soluziona 38

 Formularios
TreeView
„ El TreeView es quizá uno de los controles más importantes
y útiles, ya que lejos de estar simplemente delegados al
típico explorador, ofrecer al usuario un sinfín de
posibilidades y usos en la navegación en el entorno de las
aplicaciones.
„ Mediante este control, el uso de los programas por parte de
usuarios no experimentados se hace sencillo e intuitivo,
además de ser muy fácil de programar.
„ En este caso, vamos a vincularle también iconos para
hacerlo más descriptivo. Utilizaremos para ello un
ImageList, que como bien dijimos, es un contenedor para
colecciones de iconos.

Curso de C#.NET Soluziona 39

 Formularios
TreeView
„ Para ello, creamos una
colección de iconos como
antes, la agregamos,
ponemos un TreeView en
un formulario del proyecto
y vinculamos la propiedad Control TreeView
ImageView del TreeView
al componente
ImageView.

Curso de C#.NET Soluziona 40

 Formularios
TreeView
„ Personalizamos el número
de nodos, los nodos raíz, lo
nodos hijo, los iconos de
cada nodo…con el editor
de nodos (propiedad
Nodes del TreeView.
„ A su vez, cada uno de los
nodos, tiene una propiedad
Node a la que se le pueden
añadir mas nodos hijo.
„ En el evento DoubleClick
del TreeNode, añadimos
un manejador para añadir
dinámicamente nodos hijo.
Por ejemplo, para que
añada nodos a nodo raíz
con el icono del Sol.
Curso de C#.NET Soluziona 41
 Formularios
Splitter
„ Con el control Splitter podemos conseguir por fin
nuestra visualización estilo Explorador de
Windows, dividiendo en dos la pantalla. De esta
manera, situamos a la izquierda el árbol que nos
permite navegar y, a la derecha, un ListView con el
que ver los contenidos.
„ Creamos un nuevo proyecto y añadimos, en
primer lugar, un árbol como el que hemos añadido
antes, junto con los ImageView que hemos
utilizado.
Curso de C#.NET Soluziona 42
 Formularios
Splitter
„ Mediante la propiedad Dock del
TreeView, decimos que sitúe a
este componente a la izquierda
de la ventana.
„ Agregamos el componente
Splitter, poniendo su propiedad
Dock a Left, como el TreeView.
„ Posteriormente, añadimos el
ListView, donde serán colocados
todos los item que deseemos
mostrar. En este caso, para su
propiedad Dock, diremos que
rellene todo la área de ventana
sobrante (Fill).

Curso de C#.NET Soluziona 43