Esercitazione: Personalizzare un'app WinForms per quiz matematici

In questa serie di quattro esercitazioni si creerà un quiz matematico. Il quiz contiene quattro problemi matematici casuali che un quiz taker tenta di rispondere entro un determinato periodo di tempo.

Questa esercitazione illustra come migliorare il quiz cancellando i valori predefiniti e personalizzando l'aspetto dei controlli.

In questa esercitazione finale si apprenderà come:

• Aggiungere gestori eventi per cancellare i valori predefiniti del controllo NumericUpDown.
• Personalizzare il quiz.

Prerequisiti

Questa esercitazione si basa sulle esercitazioni precedenti, a partire da Creazione di un'app WinForms per quiz matematici. Se non hai completato queste esercitazioni, esegui prima quelle.

Aggiungere gestori eventi per i controlli NumericUpDown

Il quiz contiene NumericUpDown controlli che i partecipanti al quiz usano per immettere numeri. Quando si immette una risposta, è necessario selezionare prima o eliminare manualmente il valore predefinito. Aggiungendo un gestore eventi Enter, è possibile semplificare l'immissione delle risposte. Questo codice seleziona e cancella il valore corrente in ogni controllo NumericUpDown non appena il quiz taker lo seleziona e inizia a immettere un valore diverso.

1. Selezionare il primo controllo NumericUpDown nel modulo. Nella finestra di dialogo proprietà selezionare l'icona eventi sulla barra degli strumenti.

   

   La scheda Eventi in Proprietà visualizza tutti gli eventi a cui è possibile rispondere per l'elemento che hai selezionato nel modulo. In questo caso, tutti gli eventi elencati riguardano il controllo NumericUpDown.

2. Selezionare l'evento Invio, immettere answer_Entere quindi selezionare Invio.

   

   Viene visualizzato l'editor di codice con il gestore eventi Enter che hai creato per il controllo NumericUpDown della somma .

3. Nel metodo per il gestore eventi answer_Enter aggiungere il codice seguente:

   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
   

---

In questo codice:

• La prima riga dichiara il metodo . Include un parametro denominato sender. In C# il parametro è object sender. In Visual Basic è sender As System.Object. Questo parametro fa riferimento all'oggetto di cui viene generato l'evento, noto come mittente. In questo caso, l'oggetto sender è il controllo NumericUpDown.
• La prima riga all'interno del metodo esegue un cast, o converte, il mittente da un oggetto generico a un controllo NumericUpDown. Tale riga assegna anche il nome answerBox al controllo NumericUpDown. Tutti i controlli NumericUpDown nel modulo useranno questo metodo, non solo il controllo del problema di addizione.
• La riga successiva verifica se answerBox è stato correttamente convertito in un controllo NumericUpDown.
• La prima riga all'interno dell'istruzione if determina la lunghezza della risposta attualmente presente nel controllo NumericUpDown.
• La seconda riga all'interno dell'istruzione if usa la lunghezza della risposta per selezionare il valore corrente nel controllo .

Quando il quiz taker seleziona il controllo, Visual Studio genera questo evento. Questo codice seleziona la risposta corrente. Non appena il quiz taker inizia a immettere una risposta diversa, la risposta corrente viene cancellata e sostituita con la nuova risposta.

1. In Designer di Windows Forms, selezionare di nuovo il controllo NumericUpDown del problema di somma.

2. Nella pagina Eventi della finestra di dialogo Proprietà, individuare l'evento Click e quindi selezionare answer_Enter dal menu a discesa. Questo gestore eventi è quello appena aggiunto.

3. In Designer di Windows Form, selezionare il controllo NumericUpDown del problema di sottrazione.

4. Nella pagina Eventi della finestra di dialogo Proprietà individuare l'evento Invio e quindi scegliere answer_Enter dal menu a discesa. Questo gestore eventi è quello appena aggiunto. Ripetere questo passaggio per l'evento Click.

5. Ripetere i due passaggi precedenti per i controlli NumericUpDown di moltiplicazione e divisione.

Esegui la tua app

1. Salvare il programma ed eseguirlo.

2. Avvia un quiz e seleziona un controllo NumericUpDown. Il valore esistente viene selezionato automaticamente e quindi cancellato quando si inizia a immettere un valore diverso.

   

Personalizzare il quiz

In questa ultima parte dell'esercitazione si esamineranno alcuni modi per personalizzare il quiz ed espandere ciò che si è appreso.

Modificare il colore di un'etichetta

• Utilizzare la proprietà BackColor del controllo timeLabel per trasformare questa etichetta in rosso quando rimangono solo cinque secondi in un quiz.

  C#

  timeLabel.BackColor = Color.Red;
  

  VB

  timeLabel.BackColor = Color.Red
  

• Reimpostare il colore quando il quiz è finito.

Riprodurre un suono per una risposta corretta

Fornire un suggerimento al partecipante del quiz riproducendo un suono quando la risposta corretta viene inserita in un controllo NumericUpDown. Per implementare questa funzionalità, scrivere un gestore eventi per l'evento ValueChanged di ogni controllo. Questo tipo di evento si attiva ogni volta che un partecipante al quiz modifica il valore del controllo.

Passaggi successivi

Felicitazioni! Questa serie di esercitazioni è stata completata. Queste attività di programmazione e progettazione sono state completate nell'IDE di Visual Studio:

• Creazione di un progetto di Visual Studio che usa Windows Form
• Sono state aggiunte etichette, un pulsante e controlli numerici tipo NumericUpDown
• Aggiunto un timer
• Configurare i gestori eventi per i controlli
• Codice C# o Visual Basic scritto per gestire gli eventi

Continuare a imparare con un'altra serie di esercitazioni su come creare un gioco corrispondente.

esercitazione 3: Creare un gioco corrispondente