Esercitazione: Creare un'app WinForms di gioco corrispondente

In questa serie di quattro esercitazioni si crea un gioco corrispondente, in cui il giocatore corrisponde alle coppie di icone nascoste.

Usare queste esercitazioni per informazioni sulle attività seguenti nell'IDE (Integrated Design Environment) di Visual Studio.

• Archiviare oggetti, ad esempio icone, in un oggetto List<T>.
• Usare un foreach ciclo in C# o un For Each ciclo in Visual Basic per scorrere gli elementi in un elenco.
• Tenere traccia dello stato di un form utilizzando variabili di riferimento.
• Compilare un gestore eventi per rispondere a eventi utilizzabili con più oggetti.
• Creare un timer con conto alla rovescia e quindi generare un evento subito dopo l'avvio.

Al termine, avrai un gioco completo.

In questa prima esercitazione si apprenderà come:

• Creare un progetto di Visual Studio che usa Windows Form.
• Aggiungere e formattare un elemento di layout.
• Aggiungere e formattare etichette da visualizzare.

Prerequisiti

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

Creare il progetto di gioco di Windows Form match

Quando crei il gioco corrispondente, il primo passaggio consiste nel creare un progetto app Windows Form.

1. Aprire Visual Studio.

2. Nella finestra iniziale selezionare Crea un nuovo progetto.

   

3. Nella finestra Crea un nuovo progetto cercare Windows Form. Selezionare quindi Desktop dall'elenco Tutti i tipi di progetto.

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

   

   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 il collegamento Installa altri strumenti e funzionalità.

   

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

   

   Selezionare Modifica nel 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 progettoil nome MatchingGame 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.

A questo punto, Visual Studio visualizza un modulo vuoto in Progettazione Windows Form.

Creare un layout per il gioco

In questa sezione viene creata la griglia quattro per quattro del gioco.

1. Fare clic sul modulo per selezionare la finestra di progettazione Windows Form. La scheda legge Form1.cs [Progettazione] per C# o Form1.vb [Progettazione] per Visual Basic. Nella finestra Proprietà impostare le proprietà del form seguenti.

   • Modificare la proprietà Text da Form1 a Gioco corrispondente. Questo testo viene visualizzato nella parte superiore della finestra del gioco.
   • Impostare le dimensioni del modulo. È possibile modificarla impostando la proprietà Size su 550, 550 o trascinando l'angolo del modulo fino a visualizzare le dimensioni corrette nella parte inferiore dell'IDE di Visual Studio.

2. Selezionare la scheda Casella degli strumenti sul lato sinistro dell'IDE. Se non viene visualizzata, selezionare Visualizza>casella degli strumenti dalla barra dei menu o CTRL+ALT+X.

3. Trascinare un TableLayoutPanel controllo dalla categoria Contenitori nella casella degli strumenti o fare doppio clic su di esso. Impostare le proprietà seguenti per il pannello nella finestra Proprietà .

   • Impostare la proprietà BackColor su CornflowerBlue. Per impostare questa proprietà, selezionare la freccia accanto alla proprietà BackColor . Nella finestra di dialogo BackColor selezionare Web. Nei nomi dei colori disponibili selezionare CornflowerBlue.

     Nota

     I colori non sono in ordine alfabetico e CornflowerBlue è verso la fine dell'elenco.

   • Impostare la proprietà Dock su Fill dall'elenco a discesa selezionando il pulsante centrale grande. Questa opzione distribuisce la tabella in modo che copra l'intero modulo.

   • Impostare la proprietà CellBorderStyle su Inset. Questo valore fornisce bordi visivi tra ogni cella della scheda.

   • Selezionare il pulsante triangolo nell'angolo superiore destro di TableLayoutPanel per visualizzare il relativo menu attività. Nel menu attività selezionare Aggiungi riga due volte per aggiungere altre due righe. Selezionare quindi Aggiungi colonna due volte per aggiungere altre due colonne.

   • Nel menu attività selezionare Modifica righe e colonne per aprire la finestra Stili colonna e riga. Per ogni colonna, selezionare l'opzione Percentuale e quindi impostare la larghezza di ogni colonna su 25 %.

   • Selezionare Righe dall'elenco nella parte superiore della finestra e quindi impostare l'altezza di ogni riga su 25%.

   • Al termine, selezionare OK per salvare le modifiche.

TableLayoutPanel è ora una griglia a quattro by quattro con 16 celle quadrate di dimensioni uguali. Queste righe e colonne sono in cui le icone vengono visualizzate in un secondo momento.

Aggiungere e formattare etichette da visualizzare

In questa sezione vengono create e formattate le etichette da visualizzare durante il gioco.

1. Accertarsi che TableLayoutPanel sia selezionato nell'editor del form. Nella parte superiore della finestra Proprietà dovrebbe essere visualizzata la tabellaLayoutPanel1. Se non è selezionata, selezionare TableLayoutPanel nel modulo oppure selezionarla dall'elenco nella parte superiore della finestra Proprietà .

2. Aprire la casella degli strumenti, come in precedenza, e aprire la categoria Controlli comuni. Aggiungere un Label controllo alla cella superiore sinistra di TableLayoutPanel. Il controllo etichetta è ora selezionato nell'IDE. Impostare le proprietà indicate di seguito.

   • Impostare la proprietà BackColor dell'etichetta su CornflowerBlue.
   • Impostare la proprietà AutoSize su False.
   • Impostare la proprietà Dock su Fill.
   • Impostare la proprietà TextAlign su MiddleCenter scegliendo il pulsante a discesa accanto alla proprietà e quindi selezionando il pulsante centrale. Questo valore garantisce che l'icona venga visualizzata al centro della cella.
   • Selezionare la proprietà Font . Viene visualizzato un pulsante con i puntini di sospensione (...). Selezionare i puntini di sospensione e impostare il valore Carattere su Webdings, Stilecarattere su Grassetto e Dimensioni su 48.
   • Impostare la proprietà Text dell'etichetta sulla lettera c.

   La cella superiore sinistra di TableLayoutPanel ora contiene una scatola nera centrata su uno sfondo blu.

   Nota

   Webdings è un tipo di carattere di icone fornito con il sistema operativo Windows. Nel gioco corrispondente, il giocatore corrisponde a coppie di icone. Questo tipo di carattere visualizza le icone da trovare.

   Invece di c, provare lettere diverse nella proprietà Text . Il punto esclamativo equivale a un ragno, la N maiuscola a un occhio e la virgola a un peperoncino.

3. Selezionare il controllo Etichetta e copiarlo nella cella successiva in TableLayoutPanel. Selezionare i tasti CTRL+C o sulla barra dei menu Modifica>copia. Incollarlo quindi usando CTRL+V o Modifica>incolla.

   Nella seconda cella di TableLayoutPanel verrà visualizzata una copia della prima etichetta. Incollare di nuovo e nella terza cella verrà visualizzata un'altra etichetta. Continuare a incollare i controlli Label fino a riempire tutte le celle.

Questo passaggio completa il layout del modulo.

Passaggi successivi

Passare all'esercitazione successiva per informazioni su come assegnare un'icona casuale a ogni etichetta e aggiungere gestori eventi alle etichette.

Aggiungere icone al gioco corrispondente