Esercitazione: Creare un'applicazione Windows Forms per visualizzare immagini (.NET Framework)

In questa serie di tre esercitazioni viene creata 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.

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

Per creare una nuova app Windows Form con .NET, seguire l'esercitazione Creare un'app Windows Form con .NET. Per ulteriori informazioni, consultare la Guida Desktop per Windows Forms .NET.

Prerequisiti

• Per completare questa esercitazione è necessario Visual Studio. Visita la pagina dei download di Visual Studio per una versione gratuita.
• Il carico di lavoro dello sviluppo desktop .NET . Per verificare o installare questo carico di lavoro in Visual Studio, selezionare Strumenti>Ottieni strumenti e funzionalità. Per altre informazioni, vedere Modificare i carichi di lavoro o i singoli componenti.

Creare il progetto Windows Form

Quando si crea un visualizzatore immagini, 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.

   

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.

   

5. Nella finestra Configura il nuovo progetto assegnare al progetto il nome PictureViewere 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 nel Designer di Windows Form.

Aggiungere un elemento di layout

L'app per la visualizzazione di immagini contiene una casella immagine, una casella di controllo e quattro pulsanti, che vengono aggiunti nella prossima esercitazione. L'elemento di layout controlla la loro posizione sul modulo. Questa sezione illustra come modificare il titolo del modulo, ridimensionare il modulo e aggiungere un elemento di layout.

1. Nel progetto, selezionare il Designer di 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à, come il colore di primo piano e di sfondo, il testo del titolo che appare nella parte superiore del modulo e le dimensioni del modulo.

   Se non viene visualizzato Proprietà, selezionare Visualizzazione>finestra Proprietà.

4. Trova la proprietà Text nella finestra Properties. A seconda della modalità di ordinamento dell'elenco, potrebbe essere necessario scorrere verso il basso. Immettere il valore Visualizzatore immaginie quindi scegliere Immettere.

   Il modulo include ora il testo Visualizzatore immagini 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. Selezionare di nuovo il modulo. Selezionare la maniglia di trascinamento in basso a destra del modulo. La maniglia è un piccolo quadrato bianco nell'angolo inferiore destro del modulo.

   

   Trascinare la maniglia per ridimensionare il form in modo che esso sia più ampio e un po' più alto. Se si esamina la finestra Proprietà, la proprietà dimensioni è diversa. È 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 visualizzato, selezionare Visualizza>casella degli strumenti dalla barra dei menu o CTRL+ALT+X.

7. Selezionare il piccolo simbolo a forma di triangolo 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 Attività TableLayoutPanel, selezionare un punto qualsiasi all'interno del modulo per chiuderlo.

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

   

10. Con TableLayoutPanel selezionata, trova la proprietà Dock, che ha il valore Nessuno. Seleziona la freccia del menu a discesa e quindi seleziona Riempimento, ovvero il pulsante grande al centro del menu a discesa.

    

    Ancoraggio si riferisce a come una finestra è collegata a un'altra finestra o area.

    TableLayoutPanel ora riempie l'intero modulo. Se si ridimensiona di nuovo il modulo, TableLayoutPanel rimane ancorato e si ridimensiona in modo da adattarsi.

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 di colonna e riga.

13. Selezionare la colonna Column1 e impostarne la dimensione su 15%. Assicurarsi che l'opzione Percentuale sia selezionata.

14. Selezionare Colonna2 e impostarlo su 85%.

    

15. Da Visualizza nella parte superiore della finestra di dialogo Stili colonna e riga, selezionare Righe. Impostare di Row1 al 90% e di Row2 al 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 della barra degli strumenti. In alternativa, per salvare l'app, scegliere File>Salva tutto dalla barra dei menu oppure premere Ctrl+Shift+S. È consigliabile risparmiare in anticipo e spesso.

Esegui la tua applicazione

Quando si crea un progetto di 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. Usare uno dei metodi seguenti:

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

   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 il debug.
   • Dalla tastiera, immettere Shift+F5.
   • Selezionare X nell'angolo superiore della finestra del Visualizzatore immagini .

   Quando si esegue l'app dall'interno dell'IDE di Visual Studio, viene chiamato debugging. L'applicazione viene eseguita per trovare e correggere i bug. Segui la stessa procedura per eseguire il debug di altri programmi. Per altre informazioni sul debug, vedere Esaminare prima di tutto il debugger.

Passaggio successivo

Avanza all'esercitazione successiva per imparare a aggiungere controlli al tuo programma Visualizzatore di Immagini.

Parte 2 dell'esercitazione: Aggiungere controlli al visualizzatore immagini