Esercitazione: Aggiungere controlli all'app Windows Forms visualizzatore di 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.

Questo programma include un contenitore di immagini, una casella di controllo e diversi pulsanti, usati per controllare l'applicazione. Questa esercitazione illustra come aggiungere questi controlli.

In questa seconda esercitazione si apprenderà come:

• Aggiungere controlli all'applicazione
• Aggiungere pulsanti in un pannello di layout
• Modificare i nomi e le posizioni dei controlli
• Aggiungere componenti della finestra di dialogo

Per creare una nuova app Windows Form con .NET, seguire l'esercitazione Creare un'app Windows Form con .NET. Per saperne di più, consulta la Guida per Desktop sui Windows Forms .NET.

Prerequisiti

• Questa esercitazione si basa sull'esercitazione precedente Creare un'applicazione visualizzatore immagini. Completa prima quel progetto e poi inizia con il progetto che hai creato per quell'esercitazione.

Aggiungere controlli all'applicazione

L'app Visualizzatore immagini usa un controllo PictureBox per visualizzare un'immagine. Usa una casella di controllo e diversi pulsanti per gestire l'immagine e lo sfondo e chiudere l'app. Aggiungere PictureBox e una casella di controllo dalla casella degli strumenti nell'IDE di Visual Studio.

1. Apri Visual Studio. Il tuo progetto del Visualizzatore di immagini appare sotto Apri recenti.

2. Nella Progettazione di Windows Forms, selezionare il TableLayoutPanel che hai aggiunto nell'esercitazione precedente. Verificare che tableLayoutPanel1 venga visualizzato nella finestra Proprietà.

3. 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. Nella casella degli strumenti espandere Controlli comuni.

4. Fare doppio clic su PictureBox per aggiungere un controllo PictureBox al modulo. Visual Studio aggiunge il controllo PictureBox alla prima cella vuota di TableLayoutPanel.

5. Scegliere il nuovo controllo PictureBox per selezionarlo e quindi selezionare il triangolo nero nel nuovo controllo PictureBox per visualizzarne l'elenco attività.

   

6. Selezionare Dock in Parent Container, che imposta la proprietà Dock picture Box su Fill. È possibile visualizzare tale valore nella finestra proprietà .

7. Nella finestra Proprietà per PictureBox, imposta la proprietà ColumnSpan su 2. PictureBox ora riempie entrambe le colonne.

8. Impostare la proprietà BorderStyle su Fixed3D.

9. Nel Designer di Windows Forms, selezionare TableLayoutPanel. Quindi, nella casella degli strumenti fare doppio clic sull'elemento checkBox per aggiungere un nuovo controllo CheckBox. Il PictureBox occupa le prime due celle nel TableLayoutPanel, quindi il controllo CheckBox viene aggiunto alla cella in basso a sinistra.

10. Scegliere la proprietà Text e immettere Stretch.

    

Aggiungere pulsanti in un pannello di layout

Finora sono stati aggiunti controlli a TableLayoutPanel. Questi passaggi illustrano come aggiungere quattro pulsanti a un nuovo pannello di layout in TableLayoutPanel.

1. Selezionare TableLayoutPanel nel modulo. Aprire la casella degli strumenti e selezionare Contenitori. Fare doppio clic FlowLayoutPanel per aggiungere un nuovo controllo all'ultima cella di TableLayoutPanel.

2. Impostare la proprietà Dock di FlowLayoutPanel su Fill. È possibile impostare questa proprietà selezionando il triangolo nero, quindi selezionando Dock nel contenitore padre.

   Un FlowLayoutPanel è un contenitore che dispone altri controlli in una riga, uno dopo l'altro.

3. Selezionare il nuovo oggetto FlowLayoutPanel e quindi aprire il casella degli strumenti di e selezionare Controlli comuni. Fare doppio clic sul pulsante elemento per aggiungere un controllo pulsante chiamato button1.

4. Fare doppio clic su Pulsante , Pulsante, di nuovo per aggiungere un altro pulsante. L'IDE chiama il successivo pulsante .

5. Aggiungere altri due pulsanti in questo modo. Un'altra opzione consiste nel selezionare pulsante2. Selezionare quindi Modifica>Copia o CTRL+C. Scegliere quindi Modifica>Incolla dalla barra dei menu oppure premere CTRL+V per incollare una copia del pulsante. Ora incollarlo di nuovo. L'IDE aggiunge button3 e button4 a FlowLayoutPanel.

6. Selezionare il primo pulsante e impostarne la proprietà testo su Mostra un'immagine.

7. Impostare le proprietà Text dei tre pulsanti successivi su Deselezionare l'immagine, Impostare il colore di sfondoe Chiudi.

8. Per ridimensionare i pulsanti e disporre i pulsanti, selezionare FlowLayoutPanel. Impostare la proprietà FlowDirection su RightToLeft.

   I pulsanti devono allinearsi al lato destro della cella e invertire l'ordine in modo che la Mostra immagine pulsante si trova a destra della cella. È possibile trascinare i pulsanti intorno a FlowLayoutPanel per disporre i pulsanti in qualsiasi ordine.

9. Scegliere il pulsante Chiudi per selezionarlo. Quindi, per selezionare il resto dei pulsanti contemporaneamente, premere e tenere premuti il tasto Ctrl e selezionarli anche.

10. Nella finestra Proprietà, impostare la proprietà AutoSize su True. I pulsanti si ridimensionano per adattarsi al testo.

    

È possibile eseguire il programma per vedere l'aspetto dei controlli. Selezionare il tasto F5, selezionare Debug>Avvia debugoppure selezionare il pulsante Avvia . I pulsanti aggiunti non eseguono ancora alcuna operazione.

Modificare i nomi dei controlli

Nel modulo sono presenti quattro pulsanti denominati button1, button2, button3e button4 in C#. In Visual Basic, la prima lettera predefinita di qualsiasi nome di controllo viene maiuscola, pertanto i pulsanti sono denominati Button1, Button2, Button3e Button4. Usare questi passaggi per assegnare loro nomi più informativi.

1. Nel modulo scegliere il pulsante Chiudi. Se sono ancora selezionati tutti i pulsanti, scegliere esc per annullare la selezione.

2. Nella finestra Proprietà cercare (Nome). Modificare il nome in closeButton.

   

   L'IDE non accetta nomi che contengono spazi.

3. Rinominare gli altri tre pulsanti per backgroundButton, clearButtone showButton. È possibile verificare i nomi scegliendo l'elenco a discesa del selettore di controllo nella finestra Proprietà. Vengono visualizzati i nuovi nomi dei pulsanti.

È possibile modificare il nome di qualsiasi controllo, ad esempio TableLayoutPanel o CheckBox.

Aggiungere componenti della finestra di dialogo

L'app può aprire i file immagine e scegliere un colore di sfondo usando i componenti. Un componente è simile a un controllo. Usare la casella degli strumenti per aggiungere un componente al modulo. Imposti le sue proprietà utilizzando la finestra Proprietà.

A differenza di un controllo, l'aggiunta di un componente al form non aggiunge un elemento visibile. Fornisce invece determinati comportamenti che è possibile attivare con il codice. Ad esempio, si tratta di un componente che apre una finestra di dialogo Apri file.

In questa sezione si aggiunge un componente OpenFileDialog e un componente ColorDialog al modulo.

1. Selezionare Windows Forms Designer (Form1.cs [Design]). Quindi aprire la casella degli strumenti e selezionare il gruppo finestre di dialogo.

2. Fare doppio clic OpenFileDialog per aggiungere un componente denominato openFileDialog1 al modulo.

3. Fare doppio clic su ColorDialog per aggiungere un componente denominato colorDialog1. I componenti appaiono nella parte inferiore del Designer di Windows Forms come icone.

   

4. Scegliere l'icona di openFileDialog1 e impostare due proprietà:

   • Impostare la proprietà filtro sul valore seguente:

     JPEG Files (*.jpg)|*.jpg|PNG Files (*.png)|*.png|BMP Files (*.bmp)|*.bmp|All files (*.*)|*.*
     

   • Impostare la proprietà Titolo sul valore seguente: Selezionare un file immagine.

   Le impostazioni della proprietà filtro specificano i tipi che la finestra di dialogo Seleziona immagine visualizza.

Passaggio successivo

Passare all'esercitazione successiva per informazioni su come aggiungere codice all'applicazione.

Parte 3 dell'esercitazione: Aggiungere codice al visualizzatore immagini