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

Artículo
02/03/2025

En esta serie de cuatro tutoriales, crearás una prueba matemática. El cuestionario contiene cuatro problemas matemáticos aleatorios que un participante intenta resolver en un tiempo determinado.

En este tutorial se muestra cómo mejorar la prueba borrando los valores predeterminados y personalizando la apariencia de los controles.

En este tutorial final, aprenderá a:

Agregue controladores de eventos para borrar los valores de control NumericUpDown predeterminados.
Personalice la prueba.

Prerrequisitos

Este tutorial se basa en tutoriales anteriores, empezando por Creación de una aplicación WinForms para un quiz de matemáticas. Si no ha completado esos tutoriales, consulte primero estos tutoriales.

Agregar controladores de eventos para los controles NumericUpDown

La prueba contiene controles NumericUpDown que los usuarios de la prueba usan para escribir números. Al escribir una respuesta, debe seleccionar primero el valor predeterminado o eliminar ese valor manualmente. Al agregar un controlador de eventos Enter, puede facilitar la entrada de respuestas. Este código selecciona y borra el valor actual en cada control NumericUpDown en cuanto el usuario de la prueba lo selecciona y comienza a escribir un valor diferente.

Seleccione el primer control NumericUpDown en el formulario. En el cuadro de diálogo Propiedades, seleccione el icono Eventos de la barra de herramientas.

$Captura de pantalla que muestra la barra de herramientas del cuadro de diálogo Propiedades. Se destaca un icono que contiene un rayo.$

En la pestaña Eventos del cuadro de diálogo Propiedades se muestran todos los eventos del elemento elegido en el formulario a los que se puede responder. En este caso, todos los eventos enumerados pertenecen al control NumericUpDown.
Seleccione el evento Enter, escriba answer_Entery, a continuación, seleccione Enter.

$Captura de pantalla que muestra el cuadro de diálogo Propiedades con el evento Entrar seleccionado. El cuadro de método contiene answer_Enter.$

Aparece el editor de código y muestra el controlador de eventos Enter que creó para el control suma NumericUpDown.

En el método para el controlador de eventos answer_Enter, agregue el código siguiente:

private void answer_Enter(object sender, EventArgs e)
{
    // Select the whole answer in the NumericUpDown control.
    NumericUpDown answerBox = sender as NumericUpDown;

    if (answerBox != null)
    {
        int lengthOfAnswer = answerBox.Value.ToString().Length;
        answerBox.Select(0, lengthOfAnswer);
    }
}

''' <summary> 
''' Modify the behavior of the NumericUpDown control
''' to make it easier to enter numeric values for
''' the quiz.
''' </summary> 
Private Sub answer_Enter(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles sum.Enter

    ' Select the whole answer in the NumericUpDown control.
    Dim answerBox = TryCast(sender, NumericUpDown)

    If answerBox IsNot Nothing Then
        Dim lengthOfAnswer = answerBox.Value.ToString().Length
        answerBox.Select(0, lengthOfAnswer)
    End If

End Sub

En este código:

La primera línea declara el método . Incluye un parámetro denominado sender. En C#, el parámetro es object sender. En Visual Basic, es sender As System.Object. Este parámetro hace referencia al objeto cuyo evento se desencadena, que se conoce como emisor. En este caso, el objeto sender es el control NumericUpDown.
La primera línea dentro del método convierte, o transforma, el remitente de un objeto genérico a un control NumericUpDown. Esa línea también asigna el nombre answerBox al control NumericUpDown. Todos los controles NumericUpDown del formulario usarán este método, no solo el control del problema de suma.
En la línea siguiente se comprueba si se ha llevado a cabo correctamente la conversión de answerBox a un control NumericUpDown.
La primera línea dentro de la instrucción if determina la longitud de la respuesta que se encuentra actualmente en el control NumericUpDown.
La segunda línea dentro de la instrucción if usa la longitud de respuesta para seleccionar el valor actual en el control.

Cuando el participante del cuestionario selecciona el control, Visual Studio lanza este evento. Este código selecciona la respuesta actual. En cuanto la persona que realiza la prueba comienza a escribir una respuesta diferente, la respuesta actual se borra y se reemplaza con la nueva.

En Diseñador de Windows Forms, seleccione de nuevo el control NumericUpDown de problema de suma.
En la página Eventos del cuadro de diálogo Propiedades, busque el evento Click y, a continuación, seleccione answer_Enter en el menú desplegable. Este controlador de eventos es el que acaba de agregar.
En Diseñador de Windows Forms, seleccione el control de NumericUpDown de problema de resta.
En la página Eventos del cuadro de diálogo Propiedades, busque el evento Enter y, a continuación, seleccione la opción answer_Enter del menú desplegable. Este controlador de eventos es el que acaba de agregar. Repita este paso para el evento Click.
Repita los dos pasos anteriores para los controles NumericUpDown de multiplicación y división.

Ejecución de la aplicación

Guarde el programa y ejecútelo.
Inicie una prueba y seleccione un control NumericUpDown. El valor existente se selecciona automáticamente y, a continuación, se borra al empezar a escribir otro valor.

$Captura de pantalla que muestra la aplicación de prueba con cuatro problemas matemáticos aleatorios. Se selecciona la respuesta predeterminada al primer problema.$

Personalización de la prueba

En esta última parte del tutorial, explorará algunas maneras de personalizar el cuestionario y expandirá lo que ha aprendido.

Cambiar el color de una etiqueta

Usar la propiedad BackColor del control timeLabel para cambiar esta etiqueta a rojo cuando solo queden cinco segundos en un cuestionario.
- C#
- VB
```
timeLabel.BackColor = Color.Red;
```
```
timeLabel.BackColor = Color.Red
```
Restablezca el color cuando el cuestionario termine.

Reproducir un sonido para una respuesta correcta

Dé a los participantes del cuestionario una pista reproduciendo un sonido cuando la respuesta correcta se introduce en un control NumericUpDown. Para implementar esta funcionalidad, escriba un controlador de eventos para el evento ValueChanged de cada control. Este tipo de evento se activa cada vez que un usuario cambia el valor del control.

Pasos siguientes

¡Felicidades! Ha terminado esta serie de tutoriales. Ha completado estas tareas de programación y diseño en el IDE de Visual Studio:

Se ha creado un proyecto de Visual Studio que usa Windows Forms
Etiquetas agregadas, un botón y controles NumericUpDown
Se agregó un temporizador
Ha configurado controladores de eventos para los controles.
Código de C# o Visual Basic escrito para controlar los eventos

Continúe aprendiendo con otra serie de tutoriales sobre cómo crear un juego de emparejamiento.

Tutorial 3: Creación de un juego de formar parejas

Compartir vía