Unidad 1. Formularios Windows

▬ X
FORMULARIOS
WINDOWS
Aprendizaje Esperado
Diseña formularios
Windows en ambiente
gráfico para lectura y
escritura de datos
Introducción
Windows Forms
Tipos de proyectos de
programación
 Consola:
 Aplicaciones
Windows:
Aplicaciones basadas en
Windows
 Son más atractivas y naturales para los
usuarios.
 Están basadas en Interfaces Gráficas de

Usuario (GUI)
 La base típica de este tipo de programación

son los formularios Windows:
Windows Forms
Conceptos
 Visual Studio es un IDE

 Puede trabajar con varios lenguajes
 C#, Visual Basic, C++, Java, F#, JavaScript,
Python, Query Language y TypeScript.
 Permite el desarrollo para construir
 Aplicaciones de consola
 Aplicaciones Windows
 Aplicaciones Web
 Servicios Web
 Aplicaciones móviles
Visual C#
 Combinación entre
 Lenguaje de Programación C#
Jessica Haquin
 IDE Visual Studio
 Basado en .NET Framework
 Entorno de programación OO
 Biblioteca de Clases y otros códigos
para realizar mucho más cosas
Práctico 1-1
Creación de la Primera
Aplicación Windows
Estructura de una aplicación
Windows con Visual C#
 Una aplicación Windows se define como

una solución
 Una solución esta compuesta de uno o
más proyectos
 Los proyectos son grupos de
formularios y códigos que forman
una aplicación
Ejecutar Visual Studio 2022
Ejecutar Visual Studio 2017
Seleccionar tipo de proyecto
(Visual Studio 2022)
Escribir en el recuadro Windows Forms
Usaremos siempre
Windows Forms
(.NET Framework)
con C#
Seleccionar tipo de proyecto
Usaremos siempre
Windows Forms (.NET Framework) Visual C#
Asignar nombres al proyecto
Escribir pryPráctico1
Escribir slnUnidad1
CONVENCIÓN:
 Todo proyecto comienza con pry
 Toda Solución comienza con sln

Asignar nombres al proyecto
Escribir pryPráctico1
Escribir slnUnidad1
CONVENCIÓN:
 Todo proyecto comienza con pry
 Toda Solución comienza con sln

Diferencia entre Solución y
Proyecto
 Un proyecto incluye varios
archivos que forman una
sola aplicación
 Una solución puede contener varios

proyectos
 Es útil para construir aplicaciones relacionadas
Ubicación de los proyectos
 Por defecto la ubicación será en
 c:\users\miNombreUsuario\source\repos
 A partir de esa ubicación habrá una carpeta

con el nombre de la solución
 Dentro de la carpeta de la solución estará la

carpeta con el nombre del proyecto
Verificar
Ambiente de diseño
Cuadro de
herramientas Explorador de
soluciones
Área de diseño
Formulario
Windows
Propiedades
del objeto
¿Puede ver el cuadro de herramientas?

Ambiente de trabajo propuesto
Elementos
del IDE
 Explorador de
Soluciones:
 Muestras los proyectos
de la solución
 Muestra los archivos
de cada proyecto
Archivos relacionados
 En Explorador de Soluciones se pueden
ver tres archivos
Archivo Función
Form1.cs Aquí se programa
Lo utiliza el Diseñador Se recomienda
Form1.Designer.cs nunca editar
de Formularios este archivo
Program.cs Código de Inicio de la
aplicación
Contiene el Main()
Elementos
del IDE
 Área de
Diseño:
 Permite
modificar el
formulario
Elementos del IDE
 Cuadro de
Herramientas:
 Contiene los controles
que puede agregarse a
un formulario
Concepto de Control
Elementos del IDE
 Propiedades:
 Permite configurar
las propiedades de
cada control
Ejecutar la aplicación
 Seleccione
o presiones F5
 Probar las propiedades naturales de toda
aplicación Windows
 Cerrar ventana para detener la aplicación
Guardar un proyecto
 Botón para Guardar o Guardar Todo
 Ejecutar la aplicación
Se guarda automáticamente
Ejecución sin usar Visual Studio
Ubicación por defecto
c:\users\miNombreUsuario\source\repos
 Estructura de directorios
> Carpeta de Solución: slnUnidad1
> Carpeta de Proyecto: pryPráctico1
> Carpeta de binarios: bin
> Carpeta de ejecutable Debug
> Se encuentra el archivo ejecutable
con extensión pryPráctico.exe
Respaldar una solución
 Salir de Visual Studio

 Ir a la carpeta de la solución
 Copiar carpeta en otra ubicación
Publicar la solución en
ClassRoom
 Ir a la carpeta de la solución
 Ir a la carpeta del proyecto
 Eliminar directorios bin y obj
 Ir a la carpeta de las soluciones
 Comprimir la carpeta de la solución en zip
 Publicar el archivo zip en Google ClassRoom
Pregunta
¿Qué tienen en común estos 3 formularios?
Formularios Windows
Windows Forms
Características
 Permite crear aplicaciones Windows

 La clase Form es un contenedor de
controles
 Tiene una gran colección de
propiedades y métodos para crear una
interfaz programable
Formulario Básico
Minimizar
Maximizar
Barra de Titulo
Cerrar
Propiedades de un
Formulario
Apariencia y Comportamiento
¿Qué son las propiedades?
 La modificación de las
propiedades de un elemento
cambiará la apariencia y el
comportamiento
 Las propiedades se pueden cambiar

durante el diseño o durante la ejecución
 Las propiedades se modifican con la
Ventana de Propiedades
Ventana de Propiedades
Por categorías Alfabético
Práctico 1-2
Modificación de una propiedad
Título del Formulario
 En el proyecto anterior modifique la

Propiedad
Text
 Por ejemplo escribir:
Primer Formulario
Resultado ->
Algunas propiedades de
Apariencia
Propiedad Acción
BackColor Color de fondo
ControlBox Visibilidad de los controles
Icon Icono que aparece en el título
Location Coordenadas de ubicación
ShowIcon Visibilidad del icono en el titulo
Size Tamaño
Text Texto asociado al título
Algunas propiedades de
comportamiento
Propiedad Acción
AcceptButton Define el botón para Aceptar
CancelButton Define el botón Cancelar
MaximizeBox Si se puede maximizar
MinimizeBox Si se puede minimizar
Eventos en un Formulario
Programar acciones
¿Qué es un evento?
 Es la ocurrencia de algo
 Ejemplos de eventos:
 Maximizar una ventana
 Posicionar el mouse sobre una ventana
 Cerrar la ventana
Se puede programar sobre
esos eventos
 Ver la Lista de Eventos Programables:
 En ventana Propiedades
 Hacer click sobre el rayo
 Para agregar código (o mejor dicho un

Método) a un evento se hace doble clic
sobre el evento
Práctico 1-3
Agregar un Controlador de
Evento
Cierra del formulario
 En la lista de eventos
 Buscar evento FormClosing
 Notifica cuando se cierra la aplicación
 Hacer doble click sobre el Evento
 Se abre ventana de códigos
 Agregar la siguiente Línea de código:
 Ejecutar y cerrar la aplicación

Práctico 1-4
Eliminar un Controlador de
Evento
¿Cómo eliminar método?
 En la ventana de eventos, eliminar el

nombre del método
 Luego, si es necesario, borrar el código

del método en el archivo Form1.cs
¿Qué es un control?
 Una entidad de programación que tiene:

 Apariencia visible en la pantalla
 Código que lo administra
 El código asociado al control define:

 Apariencia del control
 Comportamiento del control
Ejemplo de control
 El control TextBox
 Despliega un área limpia en la pantalla
donde el usuario puede ingresar
información
TextBox
TextBox
Nombres de los controles
 Por convención los nombres de los

controles usan método Pascal Case
 Palabras juntas y la primera es mayúscula
 Ejemplos:
TextBox
Button
PictureBox
ProgressBar
Características de un Control
1. Propiedades
Determina la apariencia y el estado de control
Ejemplos: Color, Nombre, etc.
2. Métodos
Hacen que el control ejecute alguna acción
Ejemplo: Clear (limpiar)
3. Eventos
Ocurren cuando algo le pasa al control
Ejemplo: Clic
Práctico 1-5
Agregar controles a formulario
Datos del proyecto
 Usar la misma solución slnUnidad1

 Agregar otro un segundo Proyecto:
 En el Explorador de soluciones
 Click con el botón derecho sobre el nombre
de la solución
 Seleccionar opción agregar
 Agregar un nuevo proyecto
 Nombre del proyecto: pryPráctico2
Agregar Controles. Primera forma:
 En cuadro de herramientas:
 Hacer doble clic
sobre el control:
Label
 Hacer doble clic
sobre el control:
TextBox
 Modifique tamaño
del formulario y
ubique los controles como en la imagen
Agregar Controles. Segunda forma:
 En cuadro de herramientas:
 Arrastrar
el control Label
al formulario
 Arrastrar el control
TextBox al formulario
 Ubique los nuevos
controles como en la
imagen
Agregar Controles. Tercera forma:
 Seleccionar los
cuatro controles
 Mantener tecla
control presionada
y desplazar controles
a nueva posición
 Repita el proceso
para quedar como la
imagen
Propiedades de un control
 Modifiquemos las propiedades de al menos
dos Label y de dos TextBox
 Ir Ventana propiedades (a la derecha)
 Buscar Propiedad Text
 Ingresar un texto
 Ejemplo:
Control: Label
 Sirve para :
 Agrega texto descriptivo
 Etiquetar un control
 Desplegar información en ejecución
 Propiedades comunes
 BackColor = Cambia el color de fondo
 Text = Cambiar la etiqueta
 Font = Tipo de letra

Control: TextBox
 Sirve para:
 Permite el ingreso de datos
 Despliega texto durante la ejecución
 Propiedades Comunes
 Name = Nombre del control
 Text = Cambiar la etiqueta
 Font = Tipo de letra

Ejercicio 1-1
Agregar proyecto pryPráctico3
a solución slnUnidad1
Diseñar el formulario:
Nombrando a los Controles
 Cuando se agrega un control, Visual Studio

asigna un nombre al control
Ejemplos: label1, label2, textBox4, etc.
 Es muy útil agregar nombres significativos
para cuando se necesiten usar
 NO se necesitan nombrar todos los
controles. Sólo aquellos que se usarán en
el código.
Convención de Nombramiento
 Es una buena práctica para los nombres

de controles tipo Label usar algo así:
lblNombre
lblCiudad
 Para los TextBox puede usarse
txtApellido
txtCostos
Ejercicio 1-2
Nombrar los controles
Nombramiento
 Nombrar los controles adecuadamente
No se puede
escribir en este
TextBox
Control: Button
 Permiten incrementar la funcionalidad

 Habilita un botón el cual el usuario puede
hacerle clic para ejecutar una tarea
específica
 El evento más común es el click
 Convención de Nombramiento
btnAceptar
btnGrabar
Ejercicio 1-3
Agregar un botón
Agregar un botón
 Agregar un botón (Button) al formulario y
nombrarlo adecuadamente:
Intente respetar
el tamaño y forma
Orden de tabulación
 Ejecute el proyecto
 Verificar secuencia de controles cuando
se presiona la tecla TAB
 Se puede alterar la secuencia con la
Propiedad TabIndex
 Se puede evitar la pasada modificando
propiedad TabStop
Ejercicio 1-4
TabIndex y TabStop
Modificar
 Modificar Orden de tabulación como se pide
1
Saltar este control

dentro de la
secuencia
cuando se
presione TAB
2
Disposición de los
controles
Guías para el diseño

Ordenamiento de los
Controles
 Líneas snap distancia
 Líneas snap contenido
 Usar Flechas para situar al control

Menú y Barra
 Menú Formato:
 Barra de Herramientas de diseño

Actividad 1-1
Ejercicio Propuesto
Resolver el ejercicio en clases
Práctico 1-6
Agregar proyecto pryPráctico4Gráfico a
solución slnUnidad1
Gráfico de Barras
 Crear un formulario
que represente un
gráfico como la figura
 Ayuda:
 Para el fondo del
gráfico usar el control
pictureBox
 Para las barras usar el control Label
Actividad 1-2
Resolver ejercicio fuera de clases
Google
Luego subir a ClassRoom
para practicar la entrega de

trabajos
Redimensionamiento
 La modificación del tamaño de un

formulario podría producir problemas en
el diseño
 Se puede resolver con:
 Propiedad Anchor
 Restringiendo el tamaño del formulario
Práctico 1-7
Agregar proyecto pryPráctico5 a
solución slnUnidad1
Formulario de trabajo
 Crear un formulario con un diseño lo más

similar a este:
Ejecutar proyecto
 Redimensione el formulario
 Maximice el formulario
 Podría verse así:
Reorganización automática
 Se puede permitir que las posiciones

definidas de los controles dentro del
formulario se adapten cuando se
producen redimensionamientos
 Esto se puede gracias a la propiedad
llamada Anchor de un Control
Propiedad Anchor
 Indica que debe mantener la distancia con

los bordes del formulario
 El valor por defecto es Top, Left
 Top: Anclaje arriba
 Left: Anclaje a la izquierda
Modificar propiedad Anchor
 Botón izquierdo dejarla en Top, Left

 Botón Centro modificar a sólo Botton
 Botón derecho modificar a Top, Right
 Ejecutar la aplicación
 Redimensione o maximice el formulario
nuevamente
El resultado sería así
Realizar la siguiente prueba
 Modifique el Botón Centro de tal forma

que la propiedad Anchor sea
Top, Bottom
 Ejecute
 Redimensione o maximice la ventana
 ¿Qué ocurre?
Bloqueo de redimensión
 No permitir maximizar
Propiedad MaximizeBox en False
 No permitir redimensionamiento
Propiedad FormBorderStyle en
FixedSingle
 Probar
 Uso de IDE del Visual Studio
 Ejecución de la solución
 Respaldo de la solución
 Como subir solución a Google ClassRoom
 Nombramiento de controles
 Controles: Label, TextBox y Button
 Diseño y organización de los controles

Unidad 1. Formularios Windows

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Unidad 1. Formularios Windows

Cargado por

Copyright:

Formatos disponibles

▬ X

 Están basadas en Interfaces Gráficas de

 La base típica de este tipo de programación

 Visual Studio es un IDE

 Una aplicación Windows se define como

 Toda Solución comienza con sln

 Toda Solución comienza con sln

 Una solución puede contener varios

 A partir de esa ubicación habrá una carpeta

 Dentro de la carpeta de la solución estará la

¿Puede ver el cuadro de herramientas?

 Botón para Guardar o Guardar Todo

 Salir de Visual Studio

 Permite crear aplicaciones Windows

 Las propiedades se pueden cambiar

 En el proyecto anterior modifique la

 Para agregar código (o mejor dicho un

 Ejecutar y cerrar la aplicación

 En la ventana de eventos, eliminar el

 Luego, si es necesario, borrar el código

 Una entidad de programación que tiene:

 El código asociado al control define:

 Por convención los nombres de los

 Usar la misma solución slnUnidad1

 Text = Cambiar la etiqueta

 Font = Tipo de letra

 Text = Cambiar la etiqueta

 Font = Tipo de letra

 Cuando se agrega un control, Visual Studio

 Es una buena práctica para los nombres

 Nombrar los controles adecuadamente

 Permiten incrementar la funcionalidad

Saltar este control

Guías para el diseño

 Líneas snap contenido

 Usar Flechas para situar al control

 Barra de Herramientas de diseño

para practicar la entrega de

 La modificación del tamaño de un

 Crear un formulario con un diseño lo más

 Se puede permitir que las posiciones

 Indica que debe mantener la distancia con

 Botón izquierdo dejarla en Top, Left

 Modifique el Botón Centro de tal forma

También podría gustarte