Esercitazione: Creare un visualizzatore di immagini Windows Form'app in Visual Studio

In questa serie di tre esercitazioni si creerà un'applicazione Windows Form che carica un'immagine e la visualizza. L'IDE (Integrated Design Environment) di Visual Studio fornisce gli strumenti necessari per creare l'app. Per altre informazioni, 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 un elemento di layout
• Eseguire l'applicazione

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 visualizzatore immagini, 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 nell'elenco Tipo 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 PictureViewer 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.

Aggiungere un elemento di layout

L'app per la visualizzazione di immagini contiene una casella di controllo, una casella di controllo e quattro pulsanti, che verranno aggiunti nell'esercitazione successiva. L'elemento di layout controlla la posizione nel form. Questa sezione illustra come modificare il titolo del modulo, ridimensionare il modulo e aggiungere un elemento di layout.

1. Nel progetto selezionare la finestra di progettazione Windows Form. La scheda legge Form1.cs [Progettazione] per C# o Form1.vb [Progettazione] per Visual Basic.

2. Selezionare un punto qualsiasi in Form1.

3. Nella finestra Proprietà vengono ora visualizzate le proprietà per il modulo. La finestra Proprietà si trova in genere in basso a destra di Visual Studio. Questa sezione controlla varie proprietà, ad esempio il colore di primo piano e di sfondo, il testo del titolo visualizzato nella parte superiore della maschera e le dimensioni del modulo.

   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 Visualizzatore immagini e quindi scegliere Invio.

   Il modulo ha ora il visualizzatore immagini di testo 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. Selezionare di nuovo il modulo. Selezionare il quadratino di trascinamento in basso a destra del modulo. Il quadratino è un piccolo quadrato bianco nell'angolo inferiore destro della maschera.

   

   Trascinare il punto di controllo per ridimensionare il form in modo che sia più largo e leggermente più alto. Se si esamina la finestra Proprietà , la proprietà Size è stata modificata. È anche possibile modificare le dimensioni del modulo modificando la proprietà Size .

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

7. Selezionare il simbolo di triangolo piccolo accanto a Contenitori per aprire il gruppo.

   

8. Fare doppio clic su TableLayoutPanel nella casella degli strumenti. È anche possibile trascinare un controllo dalla casella degli strumenti nel form. Il controllo TableLayoutPanel viene visualizzato nel modulo.

   

   Nota

   Dopo aver aggiunto TableLayoutPanel, se una finestra viene visualizzata all'interno del modulo con il titolo TableLayoutPanel Tasks(Attività TableLayoutPanel), fare clic in un punto qualsiasi all'interno del modulo per chiuderla.

9. Selezionare TableLayoutPanel. È possibile verificare il controllo selezionato esaminando la finestra Proprietà .

   

10. Con l'elemento TableLayoutPanel selezionato, trovare la proprietà Dock con il valore Nessuno. Selezionare la freccia a discesa e quindi selezionare Riempimento, ovvero il pulsante grande al centro del menu a discesa.

    

    L'ancoraggio si riferisce al modo in cui una finestra è collegata a un'altra finestra o area.

    TableLayoutPanel ora riempie l'intero modulo. Se si ridimensiona nuovamente il form, TableLayoutPanel resta ancorato e viene ridimensionato correttamente.

11. Nel modulo selezionare TableLayoutPanel. Nell'angolo in alto a destra c'è un piccolo pulsante di triangolo nero.

    Selezionare il triangolo per visualizzare l'elenco attività del controllo.

    

12. Selezionare Modifica righe e colonne per visualizzare la finestra di dialogo Stili colonna e riga.

13. Selezionare Column1 e impostarne le dimensioni su 15%. Assicurarsi che il pulsante Percentuale sia selezionato.

14. Selezionare Column2 e impostarlo su 85%.

    

15. In Mostra nella parte superiore della finestra di dialogo Stili colonna e riga selezionare Righe. Impostare Row1 su 90% e Row2 su 10%. Selezionare OK per salvare le modifiche.

    TableLayoutPanel ha ora una grande riga superiore, una piccola riga inferiore, una piccola colonna sinistra e una colonna grande a destra.

    

Il layout è completo.

Nota

Prima di eseguire l'applicazione, salvare l'app scegliendo il pulsante Salva tutto sulla barra degli strumenti. In alternativa, per salvare l'app, scegliere File>Salva tutto dalla barra dei menu o premere CTRL+MAIUSC+S. Una procedura consigliata consiste nel salvare presto e spesso.

Eseguire l'app

Quando si crea un progetto app Windows Form, si compila un programma in esecuzione. In questa fase, l'app Visualizzatore immagini non esegue molte operazioni. Per il momento, visualizza una finestra vuota che mostra Visualizzatore immagini nella barra del titolo.

Per eseguire l'app, seguire questa procedura.

1. Usa uno dei seguenti metodi:

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

   Visual Studio esegue l'app. Viene visualizzata una finestra con il titolo Visualizzatore immagini.

   

   Esaminare la barra degli strumenti dell'IDE di Visual Studio. Quando si esegue un'applicazione, vengono visualizzati altri pulsanti sulla barra degli strumenti. Questi pulsanti ti consentono di eseguire operazioni come arrestare e avviare l'app e aiutarti a rilevare eventuali errori.

   

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

   • Sulla barra degli strumenti selezionare il pulsante Arresta debug .
   • Nella barra dei menu selezionare Debug>Arresta debug.
   • Dalla tastiera immettere MAIUSC+F5.
   • Selezionare X nell'angolo superiore della finestra Visualizzatore immagini.

   Quando si esegue l'app dall'interno dell'IDE di Visual Studio, viene chiamata debug. L'applicazione viene eseguita per trovare e correggere i bug. Per l'esecuzione e il debug di altri programmi si applica la stessa procedura. Per altre informazioni sul debug, vedere Presentazione del debugger.

Passaggi successivi

Passare all'esercitazione successiva per informazioni su come aggiungere controlli al programma Visualizzatore immagini.

Parte 2 dell'esercitazione: Aggiungere controlli al visualizzatore immagini