Explorando el Diseño de Formularios en C# con Tim Corey — Un Recorrido Guiado

Introducción a la construcción de formularios

Tim comienza dándonos la bienvenida a la lección siete y establece claramente el propósia: estamos construyendo los formularios. Nos recuerda que esto es similar al trabajo de la biblioteca de clases, pero ahora estamos implementando la interfaz real basada en nuestros esquemas de planificación anteriores. Tim señala que podríamos sentir la tentación de agregar código durante esta etapa, pero nos insta a concentrarnos solo en construir los formularios.

También explica que nuestros diseños anteriores eran bocetos burdos, y ahora estamos haciendo que los formularios se vean bien. Tim afirma que la guía de diseño es importante, y aunque no mostrará la experimentación que realizó, nos guiará a través de los resultados finales. También señala que los diseños del paso cuatro de planificación son la base de esta lección, y sugiere que se refiera a esos diseños si es necesario.

Agregar nuevo proyecto y comenzar una aplicación de Windows Forms

Tim nos muestra cómo agregar un nuevo proyecto a la solución. En el Explorador de soluciones, hace clic derecho en la solución, selecciona Agregar nuevo proyecto y elige Aplicación de Formularios de Windows. Esto crea un nuevo tipo de proyecto específicamente para construir aplicaciones de escritorio de Windows. Le da al proyecto el nombre de Tournament Tracker UI.

Explica que el archivo Form1.cs predeterminado se genera automáticamente al crear una aplicación de Windows Forms. Como la aplicación necesita un formulario inicial, Tim decide no eliminarlo. En cambio, renombra el archivo y la clase a TournamentViewerForm, y acepta el aviso para renombrar todas las referencias. Esto asegura que la ventana principal de la aplicación funcione correctamente.

Renombrar la clase del formulario

Tim enfatiza que debes tener un formulario que se ejecute en una aplicación de Windows Forms. Él explica que si eliminas el Form1.cs predeterminado, debes actualizar el punto de entrada en Program.cs manualmente. Para evitar esa complejidad, Tim simplemente renombra el formulario. Este es un paso típico al comenzar una aplicación de Windows Forms: renombrar la clase y el archivo para que coincidan con el propósito del proyecto.

Usar la ventana de propiedades

Tim saca la ventana de propiedades y comienza a modificar las propiedades del formulario. Cambia la propiedad Text a "Tournament Viewer" para que la barra de título muestre el nombre correcto.

Luego cambia el BackColor del gris predeterminado de Visual Studio a blanco, explicando que el blanco es más moderno y no distrae del contenido del formulario. Esto es parte del establecimiento de una guía de diseño para la interfaz de usuario.

Luego cambia la fuente a una fuente moderna de 16 puntos, y explica por qué esto debe hacerse desde el principio: los controles agregados más tarde heredarán la nueva fuente automáticamente. Tim explica que este es un consejo importante para construir formularios de manera eficiente.

Cambiar el icono y los recursos

Tim cambia el icono del formulario importando un archivo de icono personalizado. Explica que utilizó una herramienta gratuita llamada Metro Studio para crear el icono. Esto le ayuda a evitar escribir o diseñar iconos desde cero. También señala que usará el mismo icono en todos los formularios para crear un aspecto cohesivo para la aplicación.

Agregar controles al formulario

Tim comienza a construir la interfaz de usuario arrastrando controles desde el Toolbox al formulario. Agrega una etiqueta de encabezado y cambia sus propiedades:

• ForeColor → RGB (51, 153, 255)

• Fuente → Light, 28

• Texto → "Torneo:"

• Nombre → "headerLabel"

Luego copia y pega la etiqueta de encabezado para crear la etiqueta del nombre del torneo, estableciendo su texto en "None" temporalmente y nombrándola tournamentNameLabel. Tim explica que copiar y pegar controles es una forma rápida de mantener un estilo consistente y ahorrar tiempo.

Agregar controles de selección de ronda

Tim agrega una etiqueta de Ronda y un cuadro desplegable ComboBox. Cambia la fuente de la etiqueta a 20 y establece el color en el mismo acento azul. Utiliza las guías de alineación de Visual Studio para asegurarse de que los controles estén alineados correctamente.

Luego, agrega una casilla de verificación etiquetada "Solo no jugados". Cambia su estilo a plano y modifica el color de la marca de verificación a azul. Tim también explica su convención de nombrar: agrega el tipo de control al final (por ejemplo, roundDropDown, unplayedOnlyCheckbox) para facilitar la búsqueda y la navegación por el código.

Agregar lista de enfrentamientos y controles de puntaje

Tim agrega un ListBox llamado matchupListBox y establece su estilo de borde en fijo sencillo. Explica que el ListBox se comporta de manera similar al ComboBox, lo que facilita la codificación más adelante.

Luego agrega etiquetas y cuadros de texto para los nombres de los equipos y los puntajes. Demuestra una técnica poderosa: seleccionar múltiples controles, copiarlos y pegarlos juntos. Esto preserva el espaciado y el diseño, acelerando el proceso de diseño.

Tim también explica que debes renombrar cada control adecuadamente, evitando nombres predeterminados como label1 o textBox2, los cuales pueden causar confusión más adelante.

Agregar la etiqueta VS y el botón de puntaje

Tim agrega una etiqueta "VS" entre las dos secciones de equipo. Luego agrega un botón de puntaje y personaliza su estilo:

• FlatStyle → Flat

• Color del borde → Silver

• MouseDownBackColor → (102, 102, 102)

• MouseOverBackColor → (242, 242, 242)

• Fuente → Semi-bold, 16

• Color de frente → (51, 153, 255)

• Texto → "Puntuación"

Explica que estas configuraciones hacen que el botón se vea moderno y responsivo, especialmente cuando el usuario pasa el cursor o hace clic.

Ejecutar el formulario

Tim explica que el proyecto actualmente tiene el proyecto de inicio incorrecto. La biblioteca de clases está en negrita en el Explorador de soluciones, lo que significa que está configurada como el proyecto de inicio, pero una biblioteca de clases no puede ejecutarse por sí sola. Configura Tracker UI como el proyecto de inicio.

Cuando ejecuta la aplicación, el formulario aparece con el estilo de Windows 10. Tim señala el comportamiento de pasar el cursor y hacer clic del botón, demostrando que la interfaz de usuario es moderna y responsiva.

Formulario de Creación de Torneo

Tim agrega un nuevo formulario llamado CreateTournamentForm y establece sus propiedades (fuente, color, icono). Copia controles del formulario Tournament Viewer para acelerar el desarrollo.

Agrega:

• Entrada del nombre del torneo

• Entrada de tarifa de entrada (valor predeterminado 0)

• Cuadro desplegable agregar equipo

• Etiqueta de enlace crear equipo

• Botón agregar equipo

• Botón crear premio

• Cuadro de lista de jugadores del torneo

• Botones de eliminación

• Botón crear torneo

Tim explica su elección de diseño de mantener la etiqueta de enlace azul porque los usuarios están entrenados para reconocer el texto azul subrayado como un enlace.

Formulario de Creación de Equipo

Tim crea el CreateTeamForm y agrega:

• Entrada del nombre del equipo

• Cuadro desplegable de seleccionar miembro de equipo

• Botón agregar miembro

• Cuadro de grupo para agregar nuevos miembros

• Campos de primer nombre, apellido, correo electrónico y celular

• Botón crear miembro

• Cuadro de lista de miembros del equipo

• Botón eliminar miembro seleccionado

• Botón crear equipo

Explica que el cuadro de grupo proporciona un límite visual y hace que sea más fácil manejar los controles agrupados. También ayuda al mover el grupo como una unidad.

Formulario de Creación de Premio

Tim construye el CreatePrizeForm con:

• Entrada de número de lugar

• Entrada de nombre de lugar

• Entrada de monto del premio

• Entrada de porcentaje del premio

• Etiqueta "O"

• Botón crear premio

Utiliza herramientas de alineación para asegurar que el diseño se vea limpio y profesional.

Formulario de Panel de Torneos

Tim construye el formulario final: TournamentDashboardForm. Agrega:

• Cuadro desplegable de cargar torneo existente

• Botón de cargar torneo

• Botón crear torneo

Utiliza herramientas de alineación y espaciado para hacer el diseño visualmente equilibrado.

Consejos de nomenclatura y organización

Tim enfatiza la importancia de una nomenclatura adecuada. Muestra cómo el menú desplegable de Propiedades puede ayudar a identificar controles no nombrados como label1 o textBox2 que quedaron accidentalmente. Demuestra cómo renombrar un cuadro de grupo a addNewMemberGroupBox para mayor claridad.

Establecer el formulario de inicio

Tim explica cómo cambiar el formulario de inicio en Program.cs. Cambia:

Application.Run(new TournamentViewerForm());

a:

Application.Run(new TournamentDashboardForm());

Él explica que esta línea crea la instancia del formulario y pausa la aplicación hasta que el formulario se cierra.

Por qué Main importa

Tim compara Windows Forms con aplicaciones de consola: ambas tienen un Main estático void. Él aclara que una vez que Main se completa, la aplicación se cierra. Por eso el formulario debe permanecer abierto para mantener la aplicación en funcionamiento.

También señala que Visual Studio incluye comentarios XML, y anima a agregar documentación XML para métodos más adelante.

Qué viene a continuación

Tim concluye la lección afirmando que el siguiente paso es conectar los formularios con lógica. Él tranquiliza a los espectadores diciendo que la parte intimidante está por venir, pero que será manejable una vez que se construyan los formularios. Él dice que la lógica se sentirá como ensamblar piezas de LEGO, y la parte difícil desaparecerá gradualmente a medida que avancemos.