Condividi tramite

Esercitazione: Creare un'app WinForms per quiz matematici

In questa serie di quattro esercitazioni si crea 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 Benvenuto nell'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 download di Visual Studio per una versione gratuita.

Nota

Questa esercitazione richiede il modello di progetto App Windows Forms (.NET Framework). Durante l'installazione, selezionare il workload sviluppo di applicazioni desktop .NET:

Screenshot che mostra il pacchetto di lavoro .NET Desktop Development in Visual Studio Installer.

Se Visual Studio è già installato ed è necessario aggiungerlo, dal menu selezionare Strumenti>Ottieni strumenti e funzionalitàoppure nella finestra Crea un nuovo progetto selezionare il collegamento Installa altri strumenti e funzionalità.

Screenshot che mostra il collegamento Installa altri strumenti e funzionalità dal messaggio Non trovare quello che si sta cercando nella finestra di dialogo Crea nuovo progetto.

Creare il progetto Windows Form

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

  1. Apri Visual Studio.

  2. Nella finestra iniziale selezionare Crea un nuovo progetto.

    Screenshot che mostra l'opzione Crea un nuovo progetto nella finestra iniziale di Visual Studio.

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

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

    Screenshot che mostra la finestra di dialogo Crea un nuovo progetto con la casella di ricerca, l'elenco Tipo di progetto e due modelli evidenziati.

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

  1. Apri Visual Studio.

  2. Nella finestra iniziale selezionare Crea un nuovo progetto.

    Screenshot che mostra l'opzione Crea un nuovo progetto nella finestra iniziale di Visual Studio.

  3. Nella finestra Crea un nuovo progetto, cerca Windows Forms. Selezionare quindi Desktop dall'elenco Tipo di progetto.

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

    Screenshot che mostra la finestra di dialogo Crea un nuovo progetto con la casella di ricerca, l'elenco Tipo di progetto e due modelli evidenziati.

  5. Nella finestra Configura il nuovo progetto assegnare al progetto il nome MathQuize 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 Progettazione Windows Form. La scheda della finestra di progettazione è etichettata Form1.cs [Progettazione] per C# o Form1.vb [Progettazione] 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 non viene visualizzato Proprietà, selezionare Visualizzazione>finestra Proprietà.

  4. Trova la proprietà Testo nella finestra Proprietà. A seconda della modalità di ordinamento dell'elenco, potrebbe essere necessario scorrere verso il basso. Immettere il valore Math Quiz per il valore Testo, e quindi selezionare Immettere.

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

    Nota

    È possibile visualizzare le proprietà per categoria o alfabeticamente. Usa i pulsanti nella finestra Proprietà per passare avanti e indietro.

  5. Modificare le dimensioni del form in 500 pixel di larghezza di 400 pixel di altezza.

    È possibile ridimensionare il modulo trascinando i bordi o la maniglia fino a quando la dimensione corretta non verrà visualizzata come valore Dimensioni 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. Modificare il valore della proprietà FormBorderStyle su Fixed3De impostare la proprietà MaximizeBox su False.

    Questi valori impediscono ai gestori di quiz di ridimensionare il modulo.

Creare la casella del tempo rimanente

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. Aggiungerai 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 controllo Label nella casella degli strumenti e quindi trascinarlo nel form.

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

    • Impostare il (Nome) su timeLabel.
    • Cambia AutoSize in False in modo da poter ridimensionare la casella.
    • Modificare il BorderStyle da a FixedSingle per disegnare una linea intorno alla casella.
    • Impostare la dimensione su 200, 30.
    • Selezionare la proprietà Text e quindi selezionare il tasto Backspace per cancellare il valore Text.
    • Selezionare il segno più (+) accanto alla proprietà Font e quindi impostare la dimensione su 15.75.

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

  5. Aggiungere un altro controllo Label dalla casella degli strumenti e quindi impostarne le dimensioni del carattere su 15.75.

  6. Impostare la proprietà Text di questa etichetta su Time Left.

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

    Screenshot che mostra l'etichetta Ora sinistra e ora rimanente con i controlli allineati l'uno accanto all'altro nell'angolo superiore destro del modulo.

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'etichetta controllo dalla casella degli strumenti al modulo.

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

    • Impostare il text di su ? (punto interrogativo).
    • Impostare AutoSize su False.
    • Impostare il Dimensioni su 60, 50.
    • Impostare la dimensione del carattere su 18.
    • Impostare TextAlign su MiddleCenter.
    • Impostare Location a 50, 75 per posizionare il controllo sul modulo.
    • Imposta il (Nome) del a plusLeftLabel.

  3. Nel modulo, seleziona l'etichetta plusLeftLabel che hai creato. Copiare l'etichetta selezionando Modifica>Copia o CTRL+C.

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

  5. Disporre le tre nuove etichette in modo che siano in una riga 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 controllo NumericUpDown dalla casella degli strumenti al form. Altre informazioni su questo tipo di controllo verranno fornite più avanti.

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

    • Impostare la dimensione del carattere su 18.
    • In MaximumSizeimposta larghezza a 100.
    • Impostare il (Nome) a somma.

  11. Allinea il controllo NumericUpDown con i controlli etichetta per il problema di addizione.

    Screenshot che mostra la prima riga del quiz matematico, con etichette visibili e un controllo con tasti di direzione che visualizza uno 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 Label e il controllo NumericUpDown creato per il problema di addizione. Incollarli nel form.

  2. Spostare i nuovi controlli per allinearli sotto i controlli aggiuntivi.

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

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

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

  5. Per la terza riga:

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

  6. Per la quarta riga:

    • Impostare il nome () della prima etichetta del punto interrogativo su dividedLeftLabel.
    • Impostare la testo della seconda etichetta su ÷ (segno di divisione). È possibile copiare il segno di divisione da questa esercitazione e incollarlo nel modulo.
    • Impostare il nome dell'etichetta del punto interrogativo numero due su dividedRightLabel.
    • Imposta il (Nome) del controllo NumericUpDown su quoziente.

Screenshot che mostra un quiz matematico con quattro righe di problemi, con etichette e controlli con tasti di direzione visibili.

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

Questa sezione illustra come aggiungere un pulsante start. È anche possibile specificare l'ordine di tabulazione dei controlli. Questo ordinamento determina come il partecipante al quiz passa da un controllo a quello successivo utilizzando il tasto Tab.

  1. Aggiungere un controllo Button dalla casella degli strumenti nel modulo.

  2. Nella casella Proprietà impostare le proprietà seguenti del pulsante:

    • Imposta (Nome) su pulsanteStart.
    • Impostare il text di su Avviare il quiz.
    • Impostare le dimensioni del carattere su 14.
    • Impostare AutoSize su True, in modo che il pulsante venga ridimensionato automaticamente in base al testo.
    • Impostare il 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 che mostra un quiz matematico con quattro righe di problemi e un pulsante start.

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

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

Esegui l'applicazione

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+Shift+S.
    • Nella 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.
    • Nella barra dei menu selezionare Debug>Avvia debug.
    • Sulla barra degli strumenti, selezionare il pulsante Start.

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

Passaggio successivo

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

Esercitazione Parte 2: Aggiungere problemi matematici a un'app WinForms per quiz matematici