Passaggio 4: creare il layout del form con un controllo TableLayoutPanel

In questo passaggio si aggiunge un controllo TableLayoutPanel al form.

per una versione video di questo argomento, vedere esercitazione 1: Creare un Visualizzatore immagini in Visual Basic alla visualizzazione 2 o esercitazione 1: Creare un Visualizzatore immagini in c# - la visualizzazione 2.

Per creare il layout del form con un controllo TableLayoutPanel

1. Andare a Progettazione Windows Form.Sul lato sinistro del form individuare la scheda Casella degli strumenti.Posizione il puntatore del mouse sulla scheda Casella degli strumenti. Verrà visualizzata la Casella degli strumenti.In alternativa, scegliere Casella degli strumenti dal menu Visualizza.

2. Fare clic sul segno di addizione accanto al gruppo Contenitori per aprirlo, come mostrato nell'immagine seguente.

   Gruppo Contenitori

   

3. È possibile aggiungere al form controlli quali pulsanti, caselle di controllo ed etichette.Fare doppio clic sul controllo TableLayoutPanel nella Casella degli strumenti.Quando si esegue questa operazione, l'IDE aggiunge un controllo TableLayoutPanel al form, come mostrato nell'immagine seguente.

   Controllo TableLayoutPanel

   

   [!NOTA]

   Dopo aver aggiunto il controllo TableLayoutPanel, se nel form viene visualizzata una finestra con il titolo Attività di TableLayoutPanel, fare clic ovunque all'interno del form per chiuderla.Verranno fornite ulteriori informazioni su questa finestra più avanti nell'esercitazione.

   [!NOTA]

   Si noti come la Casella degli strumenti si espanda per includere il form quando si fa clic sulla scheda e come si chiuda quando si fa clic all'esterno.Si tratta della funzionalità Nascondi automaticamente dell'IDE.È possibile attivarla o disattivarla e bloccare in posizione qualsiasi finestra facendo clic sull'icona a forma di puntina da disegno nell'angolo superiore destro della finestra.L'icona a forma di puntina da disegno ha l'aspetto seguente.

   Icona a forma di puntina da disegno

   

4. Accertarsi che TableLayoutPanel sia selezionato facendo clic su di esso.È possibile verificare quale controllo è selezionato osservando l'elenco a discesa nella parte superiore della finestra Proprietà, come mostrato nell'immagine seguente.

   Finestra Proprietà che mostra il controllo TableLayoutPanel

   

5. Il selettore dei controlli è un elenco a discesa che si trova nella parte superiore della finestra Proprietà.In questo esempio, viene mostrato che è selezionato un controllo denominato tableLayoutPanel1.È possibile selezionare i controlli facendo clic in Progettazione Windows Form o scegliendoli dal selettore dei controlli.Ora che TableLayoutPanel è selezionato, trovare la proprietà Dock e fare clic su Dock, che dovrebbe essere impostato su Nessuno.Si noti che viene visualizzata una freccia a discesa accanto al valore.Fare clic sulla freccia, quindi selezionare il pulsante Fill (il pulsante grande al centro), come mostrato nell'immagine seguente.

   Finestra Proprietà con Fill selezionato

   

6. Dopo aver impostato la proprietà Dock di TableLayoutPanel su Fill, il pannello riempie l'intero form.Se si ridimensiona nuovamente il form, TableLayoutPanel resta ancorato e viene ridimensionato correttamente.

   [!NOTA]

   Un controllo TableLayoutPanel funziona come una tabella di Microsoft Office Word: dispone di righe e colonne e una singola cella può estendersi su più righe e colonne.Ogni cella può contenere un controllo (come un pulsante, una casella di controllo o un'etichetta).TableLayoutPanel disporrà di un controllo PictureBox che si estende sull'intera riga superiore, un controllo CheckBox nella cella inferiore sinistra e quattro controlli Button nella cella inferiore destra.

   [!NOTA]

   Anche se è stato dichiarato che ogni cella può contenere un solo controllo, la cella inferiore destra dispone di quattro controlli Button.Questo si verifica perché è possibile inserire un controllo in una cella che contiene altri controlli.Questo tipo di controllo viene denominato contenitore e TableLayoutPanel è un contenitore.Verranno fornite ulteriori informazioni su questo argomento più avanti nell'esercitazione.

7. Attualmente, TableLayoutPanel dispone di due righe delle stesse dimensioni e di due colonne delle stesse dimensioni.È necessario ridimensionarle in modo che la riga superiore e la colonna a destra siano entrambe molto più grandi.In Progettazione Windows Form selezionare il controllo TableLayoutPanel.Nell'angolo superiore destro si trova un piccolo pulsante a forma di triangolo nero, illustrato di seguito.

   Pulsante a forma di triangolo

   

   Questo pulsante indica che il controllo dispone di attività che consentono di impostare automaticamente le proprietà.

8. Fare clic sul triangolo per visualizzare l'elenco attività del controllo, come mostrato nell'immagine seguente.

   Attività relative a TableLayoutPanel

   

9. Fare clic sull'attività Modifica righe e colonne per visualizzare la finestra Stili di riga e colonna.Fare clic su Column1 e impostare le dimensioni su 15% verificando che il pulsante % sia selezionato e immettendo 15 nella casella %.Si tratta di un controllo NumericUpDown che si utilizzerà in un'esercitazione successiva. Fare clic su Column2 e impostarla su 85%.Non fare ancora clic sul pulsante OK, perché la finestra verrebbe chiusa.Se tuttavia si fa clic su OK, è possibile riaprire la finestra utilizzando l'elenco attività.

10. Dall'elenco a discesa Mostra nella parte superiore della finestra, fare clic su Righe.Impostare Row1 su 90% e Row2 su 10%.

11. Scegliere OK.Il controllo TableLayoutPanel dispone ora di una riga grande nella parte superiore, una riga piccola nella parte inferiore, una colonna piccola a sinistra e una colonna grande a destra.È possibile ridimensionare le righe e le colonne in TableLayoutPanel trascinando i relativi bordi.

Per continuare o rivedere l'esercitazione

• Per andare al passaggio successivo dell'esercitazione, vedere Passaggio 5: aggiungere controlli al form.

• Per tornare al passaggio precedente dell'esercitazione, vedere Passaggio 3: impostare le proprietà del form.