Esercitazione: Creare un'app WinForms per quiz matematici

  • Articolo

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.

L'ambiente di sviluppo integrato (IDE) di Visual Studio fornisce gli strumenti necessari per creare l'app. Per altre informazioni su questo IDE, vedere Introduzione all'IDE di Visual Studio.

In questa prima esercitazione si apprenderà come:

  • Creare un progetto di Visual Studio che usa Windows Form.
  • Aggiungere etichette, un pulsante e altri controlli a un modulo.
  • Impostare le proprietà per i controlli.
  • Salvare ed eseguire il progetto.

Prerequisiti

Per completare questa esercitazione è necessario Visual Studio. Visitare la pagina dei download di Visual Studio per una versione gratuita.

Creare il progetto Windows Form

Quando si crea un quiz matematico, il primo passaggio consiste nel creare un progetto di app Windows Form.

  1. Aprire Visual Studio.

  2. Nella finestra iniziale selezionare Crea un nuovo progetto.

    Screenshot that shows the Create a new project option in the Visual Studio start window.

  3. Nella finestra Crea un nuovo progetto cercare Windows Form. Selezionare quindi Desktop nell'elenco Tipo di progetto.

  4. Selezionare il modello app Windows Form (.NET Framework) per C# o Visual Basic e quindi selezionare Avanti.

    Screenshot that shows the Create a new project dialog box. The search box, the Project type list, and two templates are called out.

    Nota

    Se non viene visualizzato il modello app Windows Form (.NET Framework), è possibile installarlo dalla finestra Crea un nuovo progetto. Nel messaggio Non trovare quello che si sta cercando? selezionare Installa altri strumenti e funzionalità.

    Screenshot that shows the Install more tools and features link from the Not finding what you're looking for message in the Create new project dialog box.

    Successivamente, in Programma di installazione di Visual Studio selezionare Sviluppo di desktop .NET.

    Screenshot that shows the dot NET desktop development workload in Visual Studio Installer.

    Selezionare Modifica in Programma di installazione di Visual Studio. Potrebbe essere richiesto di salvare il lavoro. Selezionare quindi Continua per installare il carico di lavoro.

  5. Nella finestra Configura il nuovo progetto assegnare al progetto il nome MathQuiz e quindi selezionare Crea.

  1. Aprire Visual Studio.

  2. Nella finestra iniziale selezionare Crea un nuovo progetto.

    Screenshot that shows the Create a new project option in the Visual Studio start window.

  3. Nella finestra Crea un nuovo progetto cercare Windows Form. Selezionare quindi Desktop nell'elenco Tipo di progetto.

  4. Selezionare il modello app Windows Form (.NET Framework) per C# o Visual Basic e quindi selezionare Avanti.

    Screenshot that shows the Create a new project dialog box. The search box, the Project type list, and two templates are called out.

    Nota

    Se non viene visualizzato il modello app Windows Form (.NET Framework), è possibile installarlo dalla finestra Crea un nuovo progetto. Nel messaggio Non trovare quello che si sta cercando? selezionare Installa altri strumenti e funzionalità.

    Screenshot that shows the Install more tools and features link from the Not finding what you're looking for message in the Create new project dialog box.

    Successivamente, in Programma di installazione di Visual Studio selezionare Sviluppo di desktop .NET.

    Screenshot that shows the dot NET desktop development workload in Visual Studio Installer.

    Selezionare Modifica in Programma di installazione di Visual Studio. Potrebbe essere richiesto di salvare il lavoro. Selezionare quindi Continua per installare il carico di lavoro.

  5. Nella finestra Configura il nuovo progetto assegnare al progetto il nome MathQuiz e quindi selezionare Crea.

Visual Studio crea una soluzione per l'app. Una soluzione è un contenitore per tutti i progetti e i file necessari per l'app.

Impostare le proprietà del modulo

Dopo aver selezionato il modello e assegnare un nome al file, Visual Studio apre automaticamente un modulo. Questa sezione illustra come modificare alcune proprietà del modulo.

  1. Nel progetto selezionare Windows Form Designer. La scheda della finestra di progettazione è denominata Form1.cs [Design] per C# o Form1.vb [Design] per Visual Basic.

  2. Selezionare il modulo Form1.

  3. Nella finestra Proprietà vengono ora visualizzate le proprietà per il modulo. Questa finestra si trova in genere nell'angolo inferiore destro di Visual Studio. Se le proprietà non sono visualizzate, selezionare Visualizza>finestra proprietà.

  4. Trovare la proprietà Text nella finestra Proprietà . A seconda di come è ordinato l'elenco, potrebbe essere necessario scorrere verso il basso. Immettere il valore Math Quiz (Quiz matematico) per il valore Text (Testo ) e quindi premere INVIO.

    Il modulo ha ora il testo "Math Quiz" nella barra del titolo.

    Nota

    È possibile visualizzare le proprietà per categoria o alfabeticamente. Usare i pulsanti nella finestra Proprietà per tornare indietro e indietro.

  5. Impostare le dimensioni del modulo su 500 pixel di larghezza per 400 pixel di altezza.

    È possibile ridimensionare il form trascinando i bordi o trascinando il quadratino fino a quando le dimensioni corrette non verranno visualizzate come valore Size nella finestra Proprietà . Il quadratino di trascinamento è un piccolo quadrato bianco nell'angolo inferiore destro del form. È anche possibile ridimensionare il modulo modificando i valori della proprietà Size .

  6. Impostare il valore della proprietà FormBorderStyle su Fixed3D e la proprietà MaximizeBox su False.

    Questi valori impediranno agli esecutori del quiz di ridimensionare il modulo.

Creare la casella rimanente del tempo

Il quiz matematico contiene una casella nell'angolo superiore destro. Tale casella mostra il numero di secondi che rimangono nel quiz. Questa sezione illustra come usare un'etichetta per tale casella. Si aggiungerà il codice per il timer del conto alla rovescia in un'esercitazione successiva di questa serie.

  1. Sul lato sinistro dell'IDE di Visual Studio selezionare la scheda Casella degli strumenti. Se la casella degli strumenti non è visualizzata, selezionare Visualizza>casella degli strumenti dalla barra dei menu o CTRL+ALT+X.

  2. Selezionare il Label controllo nella casella degli strumenti e quindi trascinarlo nel form.

  3. Nella casella Proprietà impostare le proprietà seguenti per l'etichetta:

    • Impostare (Name) su timeLabel.
    • Impostare AutoSize su False in modo che sia possibile ridimensionare la casella.
    • Impostare BorderStylesu FixedSingle per disegnare una linea intorno alla casella.
    • Impostare Dimensioni su 200, 30.
    • Selezionare la proprietà Text e quindi selezionare la chiave Backspace per cancellare il valore Text.
    • Selezionare il segno più (+) accanto alla proprietà Font e quindi impostare Size su 15.75.

  4. Spostare l'etichetta nell'angolo superiore destro del form. Quando vengono visualizzate linee di spaziatore blu, usarle per posizionare il controllo nella maschera.

  5. Aggiungere un altro controllo Label dalla casella degli strumenti e quindi impostare la dimensione del carattere su 15,75.

  6. Impostare la proprietà Text dell'etichetta su Time Left.Set this label's Text property to Time Left.

  7. Spostare l'etichetta in modo che si allinea a sinistra dell'etichetta timeLabel .

    Screenshot that shows the Time Left label and the remaining time label. The controls are lined up next to each other in the upper-right corner of the form.

Aggiungere controlli per il problema di addizione

La prima parte del quiz è un problema di addizione. Questa sezione illustra come usare le etichette per visualizzare il problema.

  1. Aggiungere un controllo Etichetta dalla casella degli strumenti al form.

  2. Nella casella Proprietà impostare le proprietà seguenti per l'etichetta:

    • Impostare Il testo su ? (punto interrogativo).
    • Impostare AutoSize su False.
    • Impostare Dimensioni su 60, 50.
    • Impostare la dimensione del carattere su 18.
    • Impostare TextAlign su MiddleCenter.
    • Impostare Location su 50, 75 per posizionare il controllo nella maschera.
    • Impostare (Name) su plusLeftLabel.

  3. Nel modulo selezionare l'etichetta plusLeftLabel creata. Copiare l'etichetta selezionando Modifica>copia o CTRL+C.

  4. Incollare l'etichetta nel modulo tre volte selezionando Modifica>incolla o CTRL+V tre volte.

  5. Disporre le tre nuove etichette in modo che risultino in fila a destra dell'etichetta plusLeftLabel.

  6. Impostare la proprietà Text della seconda etichetta su + (segno più).

  7. Impostare la proprietà (Name) della terza etichetta su plusRightLabel.

  8. Impostare la proprietà Text della quarta etichetta su = (segno di uguale).

  9. Aggiungere un NumericUpDown controllo dalla casella degli strumenti al form. Più avanti verranno fornite ulteriori informazioni su questo tipo di controllo.

  10. Nella casella Proprietà impostare le proprietà seguenti per il controllo NumericUpDown:

    • Impostare la dimensione del carattere su 18.
    • Impostare la larghezza su 100.
    • Impostare (Nome) su sum.

  11. Allineare il controllo NumericUpDown ai controlli Label per il problema di addizione.

    Screenshot that shows the first row of the math quiz. Labels are visible, and a control with arrow keys displays a zero.

Aggiungere controlli per i problemi di sottrazione, moltiplicazione e divisione

Aggiungere quindi etichette al modulo per i problemi matematici rimanenti.

  1. Copiare i quattro controlli Etichetta e il controllo NumericUpDown creato per il problema di addizione. Incollarli nel form.

  2. Spostare i nuovi controlli per allinearsi sotto i controlli di addizione.

  3. Nella casella Proprietà impostare le proprietà seguenti per i nuovi controlli:

    • Impostare ( Nome) della prima etichetta punto interrogativo su minusLeftLabel.
    • Impostare Il testo della seconda etichetta su - (segno meno).
    • Impostare ( Nome) della seconda etichetta punto interrogativo su minusRightLabel.
    • Impostare il valore (Name) del controllo NumericUpDown sulla differenza.

  4. Copiare i controlli di addizione e incollarli due volte più volte nel form.

  5. Per la terza riga:

    • Impostare ( Nome) della prima etichetta punto interrogativo su timesLeftLabel.
    • Impostare Testo della seconda etichetta su × (segno di moltiplicazione). È possibile copiare il segno di moltiplicazione da questa esercitazione e incollarlo nel modulo.
    • Impostare ( Nome) della seconda etichetta punto interrogativo su timesRightLabel.
    • Impostare ( Nome) del controllo NumericUpDown su product.

  6. Per la quarta riga:

    • Impostare ( Nome) della prima etichetta del punto interrogativo su dividedLeftLabel.
    • Impostare Testo della seconda etichetta su ÷ (segno di divisione). È possibile copiare il segno di divisione da questa esercitazione e incollarlo nel modulo.
    • Impostare ( Nome) della seconda etichetta punto interrogativo su dividedRightLabel.
    • Impostare (Nome) del controllo NumericUpDown su quoziente.

Screenshot that shows a math quiz with four rows of problems. Labels and controls with arrow keys are visible.

Aggiungere un pulsante di avvio e impostare l'ordine dell'indice di tabulazione

Questa sezione illustra come aggiungere un pulsante start. Si specificherà anche l'ordine di tabulazione dei controlli. Questo ordinamento determina il modo in cui il quiz taker passa da un controllo a quello successivo usando il tasto TAB .

  1. Aggiungere un Button controllo dalla casella degli strumenti al form.

  2. Nella casella Proprietà impostare le proprietà seguenti di Button:

    • Impostare (Nome) su startButton.
    • Impostare Text (Testo) su Start the quiz (Avvia il quiz).
    • Impostare la dimensione del carattere su 14.
    • Impostare AutoSize su True, che determina il ridimensionamento automatico del pulsante in base al testo.
    • Impostare TabIndex su 0. Questo valore rende il pulsante Start il primo controllo a ricevere lo stato attivo.

  3. Centrare il pulsante nella parte inferiore del modulo.

    Screenshot that shows a math quiz with four rows of problems and a start button.

  4. Nella casella Proprietà impostare la proprietà TabIndex di ogni controllo NumericUpDown:

    • Impostare TabIndex del controllo NumericUpDown somma su 1.
    • Impostare TabIndex del controllo NumericUpDown della differenza su 2.
    • Impostare TabIndex del controllo NumericUpDown del prodotto su 3.
    • Impostare TabIndex del controllo NumericUpDown quoziente su 4.

Eseguire l'app

I problemi matematici non funzionano ancora sul quiz. È comunque possibile eseguire l'app per verificare se i valori TabIndex funzionano come previsto.

  1. Usare uno dei metodi seguenti per salvare l'app:

    • Selezionare CTRL+MAIUSC+S.
    • Sulla barra dei menu selezionare File>Salva tutto.
    • Sulla barra degli strumenti selezionare il pulsante Salva tutto .

  2. Usare uno dei metodi seguenti per eseguire l'app:

    • Selezionare F5.
    • Sulla barra dei menu selezionare Debug>Avvia debug.
    • Sulla barra degli strumenti selezionare il pulsante Start .

  3. Selezionare il tasto TAB alcune volte per vedere come lo stato attivo si sposta da un controllo all'altro.

Passaggi successivi

Passare all'esercitazione successiva per aggiungere problemi matematici casuali e un gestore eventi al quiz matematico.

Parte 2 dell'esercitazione: Aggiungere problemi matematici a un'app WinForms quiz matematico