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

En esta serie de cuatro tutoriales, creas una prueba matemática. El cuestionario contiene cuatro problemas matemáticos aleatorios que el participante intenta responder dentro de un tiempo especificado.

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

En este primer tutorial, aprenderá a:

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

Prerrequisitos

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

Nota

Este tutorial requiere la plantilla de proyecto aplicación de Windows Forms (.NET Framework). Durante la instalación, seleccione la carga de trabajo desarrollo de escritorio de .NET:

Si ya tiene Visual Studio instalado y necesita agregarlo, en el menú, seleccione Herramientas>Obtener herramientas y característicaso en la ventana crear un nuevo proyecto, seleccione el vínculo Instalar más herramientas y características.

Creación del proyecto de Windows Forms

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

1. Abra Visual Studio.

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

   

3. En la ventana Crear un proyecto, busque Windows Forms. A continuación, seleccione Desktop 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.

   

5. En la ventana Configurar el nuevo proyecto, asigne un nombre al proyecto MathQuizy seleccione Crear.

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

Establecer las propiedades del formulario

Después de 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 de formulario.

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

2. Seleccione el formulario Form1.

3. La ventana Propiedades de ahora muestra las propiedades del formulario. Esta ventana suele estar en la esquina inferior derecha de Visual Studio. Si no ve la ventana Propiedades, seleccione Ver>Ventana Propiedades.

4. Busque la propiedad Text en la ventana Properties. En función de cómo se ordene la lista, es posible que tenga que desplazarse hacia abajo. Escriba el valor Prueba matemática para el valor Text y, a continuación, seleccione Enter.

   Su formulario ahora tiene el texto "Math Quiz" en su barra de título.

   Nota

   Puede mostrar las propiedades por categoría o alfabéticamente. 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 en la esquina inferior derecha del formulario. También puede cambiar el tamaño del formulario cambiando los valores de la propiedad Size.

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

   Estos valores impiden que los usuarios del cuestionario vuelvan a cambiar el tamaño del formulario.

Crear el cuadro de tiempo restante

La prueba matemática contiene un cuadro en la esquina superior derecha. Ese cuadro muestra el número de segundos que permanecen en la prueba. En esta sección se muestra cómo usar una etiqueta para ese cuadro. Agregue 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 ve el cuadro de herramientas, seleccione Ver>Cuadro de herramientas en la barra de menús o presione Ctrl+Alt+X.

2. Seleccione el control Label del cuadro de herramientas de y arrástrelo al formulario.

3. En el cuadro Propiedades, establezca las siguientes propiedades para la etiqueta:

   • Establezca el valor (Name) para timeLabel.
   • Cambie AutoSize a False para que pueda redimensionar el 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 el problema de adición

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

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

2. En el cuadro Propiedades, establezca las siguientes propiedades para la etiqueta:

   • 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>Copiar o Ctrl+C.

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

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

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 de al formulario. Más adelante obtendrá más información sobre este tipo de control.

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

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

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

    

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

A continuación, 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 alinearse debajo de los controles de adición.

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 adición 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.
   • Asigne el texto de la segunda etiqueta a × (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 de 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, lo que hace que el botón cambie automáticamente el tamaño para ajustarse al texto.
   • Establezca TabIndex en 0. Este valor hace que el botón de inicio sea el primer control para recibir 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 sum en 1.
   • Establezca la propiedad TabIndex del control difference en 2.
   • Establezca la propiedad TabIndex del control product en 3.
   • Establezca la propiedad TabIndex del control quotient en 4.

Ejecución de la aplicación

Los problemas matemáticos aún no funcionan en el cuestionario. Pero todavía puedes 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. Use 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.

Paso siguiente

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

Tutorial, parte 2: Agregar problemas matemáticos a una aplicación WinForms de cuestionario de matemáticas