Tutorial: Creación de una aplicación de "prueba matemática" WinForms

En esta serie de cuatro tutoriales, creará una prueba matemática. La prueba contiene cuatro problemas matemáticos aleatorios que un usuario intenta responder en un tiempo especificado.

El entorno de desarrollo integrado (IDE) de Visual Studio proporciona las herramientas necesarias para crear la aplicación. Para obtener más información sobre este IDE, consulte Le damos la bienvenida al IDE de Visual Studio.

En este primer tutorial, obtendrá información sobre cómo hacer lo siguiente:

• Crear un proyecto de Visual Studio que utiliza Windows Forms
• Agregue etiquetas, un botón y otros controles a un formulario.
• Establezca las propiedades de los controles.
• Guarde y ejecute el programa.

Requisitos previos

Necesitará Visual Studio para completar este tutorial. Visite la página de descargas de Visual Studio para obtener una versión gratuita.

Creación del proyecto de Windows Forms

Al crear una prueba matemática, el primer paso consiste en crear un proyecto de aplicación de Windows Forms.

1. Abra Visual Studio.

2. En la ventana de inicio, seleccione Crear un proyecto.

   

3. En la ventana Crear un proyecto, busque Windows Forms. Después, seleccione Escritorio en la lista Tipo de proyecto.

4. Seleccione la plantilla Aplicación de Windows Forms (.NET Framework) para C# o Visual Basic y, luego, Siguiente.

   

   Nota:

   Si no ve la plantilla Aplicación de Windows Forms (.NET Framework), puede instalarla desde la ventana Crear un proyecto nuevo. En el mensaje ¿No encuentra lo que busca? , seleccione Instalar más herramientas y características.

   

   Luego, en el Instalador de Visual Studio, seleccione Desarrollo de escritorio de .NET.

   

   Seleccione Modificar en el Instalador de Visual Studio. Es posible que se le pida que guarde su trabajo. Seguidamente, seleccione Continuar para instalar la carga de trabajo.

5. En la ventana Configure su nuevo proyecto, asigne al proyecto el nombre MathQuiz y, después, seleccione Crear.

Visual Studio crea una solución para la aplicación. Una solución es un contenedor de todos los proyectos y archivos necesarios para la aplicación.

Establecimiento de las propiedades del formulario

Tras seleccionar la plantilla y asignar un nombre al archivo, Visual Studio abre un formulario automáticamente. En esta sección se muestra cómo cambiar algunas propiedades del formulario.

1. En el proyecto, seleccione el Diseñador de Windows Forms. La pestaña del diseñador se denomina Form1.cs [Design] para C# o Form1.vb [Design] para Visual Basic.

2. Seleccione el formulario: Form1.

3. En la ventana Propiedades, ahora se muestran las propiedades del formulario. La ventana suele estar en la parte inferior derecha de Visual Studio. Si no ve la ventana Propiedades, seleccione Ver>Ventana Propiedades.

4. Busque la propiedad Text en la ventana Propiedades. En función del orden de la lista, puede que deba desplazarse hacia abajo. Escriba el valor Prueba matemática para el valor Text y, a continuación, seleccione Enter.

   El formulario ahora tiene el texto "Prueba matemática" en su barra de título.

   Nota

   Puede mostrar las propiedades por categoría o por orden alfabético. Use los botones de la ventana Propiedades para alternar entre una opción y la otra.

5. Cambie el tamaño del formulario a 500 píxeles de ancho por 400 píxeles de alto.

   Puede cambiar el tamaño del formulario arrastrando sus bordes o arrastrando el controlador hasta que el tamaño correcto aparezca como el valor Size en la ventana Propiedades. El controlador de arrastre es un pequeño cuadrado blanco situado en la esquina inferior derecha del formulario. También puede modificar el tamaño del formulario cambiando los valores de la propiedad Size.

6. Cambie el valor de la propiedad FormBorderStyle a Fixed3D y establezca la propiedad MaximizeBox en False.

   Estos valores impiden que los jugadores cambien el tamaño del formulario.

Creación del cuadro de tiempo restante

La prueba matemática contiene un cuadro en la esquina superior derecha. En él se muestra el número de segundos que quedan para completar la prueba. En esta sección se muestra cómo usar una etiqueta para ese cuadro. Agregará código para el temporizador de cuenta atrás en un tutorial posterior de esta serie.

1. En el lado izquierdo del IDE de Visual Studio, seleccione la pestaña Cuadro de herramientas. Si no la ve, seleccione Ver>Cuadro de herramientas en la barra de menús o presione Ctrl+Alt+X.

2. Seleccione el control Label de la ventana Cuadro de herramientas y arrástrelo al formulario.

3. En el cuadro Propiedades, establezca las siguientes propiedades para los nuevos controles:

   • Establezca el valor (Name) para timeLabel.
   • Cambie la AutoSize a False para poder cambiar el tamaño del cuadro.
   • Cambie BorderStyle a FixedSingle para dibujar una línea alrededor del cuadro.
   • Establezca Size en 200, 30.
   • Seleccione la propiedad Text y, a continuación, pulse la tecla Retroceso para borrar el valor Text.
   • Seleccione el signo más ( + ) situado junto a la propiedad Font y, a continuación, establezca Size en 15,75.

4. Mueva la etiqueta a la esquina superior derecha del formulario. Cuando aparezcan líneas espaciadoras azules, úselas para colocar el control en el formulario.

5. Agregue otro control Label desde el Cuadro de herramientas y establezca el tamaño de fuente en 15,75.

6. Establezca la propiedad Text de la etiqueta en Time Left.

7. Mueva la etiqueta para que se alinee a la izquierda de la etiqueta timeLabel.

   

Agregar controles para los problemas de suma

La primera parte de la prueba es un problema de suma. En esta sección se muestra cómo usar etiquetas para mostrar ese problema.

1. Agregue un control de etiqueta de Cuadro de herramientas al formulario.

2. En el cuadro Propiedades, establezca las siguientes propiedades para los nuevos controles:

   • Establezca Text en ? (signo de interrogación).
   • Establezca AutoSize en False.
   • Establezca Size en 60, 50.
   • Establezca el tamaño de fuente en 18.
   • Establezca TextAlign en MiddleCenter.
   • Establezca Location en 50, 75 para colocar el control en el formulario.
   • Establezca (Name) en plusLeftLabel.

3. En el formulario, seleccione la etiqueta plusLeftLabel que ha creado. Copie la etiqueta seleccionando Editar>CopiaroCtrl+C.

4. Pegue la etiqueta en el formulario tres veces seleccionando Editar>Pegar o Ctrl+V tres veces.

5. Organice las tres nuevas etiquetas para que estén en fila a la derecha de la etiqueta plusLeftLabel.

6. Establezca la propiedad Text de la segunda etiqueta en + (signo más).

7. Establezca la propiedad (Name) de la tercera etiqueta en plusRightLabel.

8. Establezca la propiedad de la cuarta etiqueta Text en = (signo igual).

9. Agregue un control NumericUpDown del cuadro de herramientas al formulario. Obtendrá más información sobre este tipo de control más adelante.

10. En el cuadro Propiedades, establezca las siguientes propiedades del control NumericUpDown:

    • Establezca el tamaño de fuente en 18.
    • Establezca el ancho en 100.
    • Establezca el (Nombre) para sumar.

11. Alinee el control NumericUpDown con los controles de etiqueta para el problema de suma.

    

Agregar controles para los problemas de resta, multiplicación y división

Después, agregue etiquetas al formulario para los problemas matemáticos restantes.

1. Copie los cuatro controles Label y el control NumericUpDown que creó para el problema de suma. Péguelos en el formulario.

2. Mueva los nuevos controles para que se alineen debajo de los controles de suma.

3. En el cuadro Propiedades, establezca las siguientes propiedades para los nuevos controles:

   • Establezca el (Nombre) de la primera etiqueta del signo de interrogación como minusLeftLabel.
   • Establezca el valor Text de la segunda etiqueta como - (signo menos).
   • Establezca el (Nombre) de la segunda etiqueta del signo de interrogación como minusRightLabel.
   • Establezca el (Nombre) del control NumericUpDown como difference.

4. Copie los controles de suma y péguelos dos veces más en el formulario.

5. Para la tercera fila:

   • Establezca el (Nombre) de la primera etiqueta del signo de interrogación como timesLeftLabel.
   • Establezca el valor Text de la segunda etiqueta como × (signo de multiplicación). Puede copiar el signo de multiplicación de este tutorial y pegarlo en el formulario.
   • Establezca el (Nombre) de la segunda etiqueta del signo de interrogación como timesRightLabel.
   • Establezca el (Nombre) del control NumericUpDown como product.

6. Para la cuarta fila:

   • Establezca el (Nombre) de la primera etiqueta del signo de interrogación como dividedLeftLabel.
   • Establezca el valor Text de la segunda etiqueta como ÷ (signo de división). Puede copiar el signo de división de este tutorial y pegarlo en el formulario.
   • Establezca el (Nombre) de la segunda etiqueta del signo de interrogación como dividedRightLabel.
   • Establezca el (Nombre) del control NumericUpDown como quotient.

Agregar un botón Iniciar y establecer el orden del índice de tabulación

En esta sección se muestra cómo agregar un botón de inicio. También especificará el orden de tabulación de los controles. Este orden determina cómo se mueve el usuario de un control al siguiente mediante la tecla TAB.

1. Agregue un control Button del cuadro de herramientas al formulario.

2. En el cuadro Propiedades, establezca las siguientes propiedades del botón:

   • Establezca el (Nombre) en startButton.
   • Establezca el valor Text como Iniciar la prueba.
   • Establezca el tamaño de fuente en 14.
   • Establezca AutoSize en True, para que el tamaño del botón se ajuste automáticamente al texto.
   • Establezca TabIndex en 0. Este valor hace que el botón de inicio sea el primer control que recibe el foco.

3. Centre el botón cerca de la parte inferior del formulario.

   

4. En el cuadro Propiedades, establezca la propiedad TabIndex de cada control NumericUpDown:

   • Establezca la propiedad TabIndex del control NumericUpDown de sum en 1.
   • Establezca la propiedad TabIndex del control NumericUpDown de difference en 2.
   • Establezca la propiedad TabIndex del control NumericUpDown de product en 3.
   • Establezca la propiedad TabIndex del control NumericUpDown de quotient en 4.

Ejecutar la aplicación

Los problemas matemáticos aún no funcionan en la prueba. Pero puede ejecutar la aplicación para comprobar si los valores de TabIndex funcionan según lo previsto.

1. Use uno de los métodos siguientes para guardar la aplicación:

   • Seleccione Ctrl+Mayús+S.
   • En la barra de menús, seleccione Archivo>Guardar todo.
   • En la barra de herramientas, seleccione el botón Guardar todo.

2. Utilice uno de los métodos siguientes para ejecutar la aplicación:

   • Seleccione F5.
   • En la barra de menús, seleccione Depurar>Iniciar depuración.
   • En la barra de herramientas, seleccione el botón Iniciar.

3. Seleccione la tecla TAB varias veces para ver cómo se mueve el foco de un control al siguiente.

Pasos siguientes

Avance al siguiente tutorial para agregar problemas matemáticos aleatorios y un controlador de eventos a la prueba matemática.

Parte 2 del tutorial: adición de problemas matemáticos a una aplicación WinForms de prueba matemática