Tutorial: Personalización de una aplicación de prueba matemática en 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.

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, obtendrá información sobre cómo hacer lo siguiente:

• Agregar controladores de eventos para borrar los valores predeterminados del control NumericUpDown.
• Personalizar la prueba.

Prerequisites

Este tutorial se basa en tutoriales anteriores, empezando por Crear una prueba matemática de la aplicación WinForms. Si no ha completado esos tutoriales, revíselos primero.

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 especificación de respuestas. Este código selecciona y borra el valor actual de cada uno de los controles NumericUpDown en cuanto el usuario lo elija y comience a escribir un valor diferente.

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

   

   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.

2. Seleccione el evento Enter, escriba answer_Enter y elija la tecla Entrar.

   

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

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

   C#

   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);
       }
   }
   

   VB

   ''' <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
   

---

Importante

Use el control del lenguaje de programación situado en la parte superior derecha de esta página para ver el fragmento de código de C# o el de Visual Basic.

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 que tiene el evento que se genera, lo que se conoce como remitente. En este caso, el objeto remitente es el control NumericUpDown.
• La primera línea dentro del método convierte 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 está 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 usuario selecciona el control, Visual Studio inicia este evento. Este código selecciona la respuesta actual. En cuanto el jugador empiece a escribir otra respuesta, se borrará la respuesta actual y se reemplazará por la nueva.

1. En Diseñador de Windows Forms, seleccione de nuevo el control NumericUpDown de problema de suma.

2. 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.

3. En Diseñador de Windows Forms, seleccione el control de NumericUpDown de problema de resta.

4. En la página Eventos del cuadro de diálogo Propiedades, busque el evento Enter y, a continuación, seleccione answer_Enter en el menú desplegable. Este controlador de eventos es el que acaba de agregar. Repita este paso para el evento Click.

5. Repita los dos pasos anteriores para los controles NumericUpDown de multiplicación y división.

Ejecutar la aplicación

1. Guarde el programa y ejecútelo.

2. Inicie una prueba y seleccione un control NumericUpDown. El valor existente se selecciona automáticamente y se borra cuando empieza a escribir un valor diferente.

   

Personalizar la prueba

En la última parte del tutorial, explorará algunas maneras de personalizar la prueba y ampliar sus conocimientos.

Cambiar el color de una etiqueta

• Use la propiedad BackColor del control timeLabel para que esta etiqueta pase a estar en rojo cuando solo queden cinco segundos para acabar una prueba.

  C#

  timeLabel.BackColor = Color.Red;
  

  VB

  timeLabel.BackColor = Color.Red
  

• Restablezca el color cuando la prueba haya terminado.

Reproducir un sonido para una respuesta correcta

Proporcione una sugerencia al jugador reproduciendo un sonido cuando especifique una respuesta correcta en un control NumericUpDown. Para implementar esta funcionalidad, escriba un controlador de eventos para cada evento ValueChanged del 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. Completó estas tareas de programación y diseño en el IDE de Visual Studio:

• Ha creado un proyecto de Visual Studio que usa Windows Forms.
• Agregó etiquetas, un botón y controles NumericUpDown
• Agregó un temporizador
• Ha configurado controladores de eventos para los controles.
• Ha escrito código de C# o Visual Basic para controlar los eventos.

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

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