Procedura dettagliata: disposizione dei controlli in Windows Form utilizzando TableLayoutPanel

Articolo
08/22/2007

Alcune applicazioni richiedono che il form abbia un layout in grado di adattarsi automaticamente alle eventuali modifiche alle dimensioni del form o del contenuto del form. Per utilizzare un layout dinamico senza gestire gli eventi Layout in modo esplicito nel codice è possibile usare un pannello layout.

I controlli FlowLayoutPanel e TableLayoutPanel offrono modalità intuitive per disporre i controlli nel form. Entrambi i controlli forniscono una funzionalità configurabile e automatica per la verifica delle posizioni relative dei controlli figlio contenuti e funzionalità di layout dinamico in fase di esecuzione in modo che i controlli figlio possano essere ridimensionati e riposizionati quando le dimensioni del form padre cambiano. I pannelli layout possono essere nidificati in altri pannelli layout in modo da consentire la realizzazione di interfacce utente sofisticate.

FlowLayoutPanel dispone il contenuto secondo una specifica direzione di flusso, orizzontale o verticale. Il contenuto può andare a capo da una riga a quella successiva o da una colonna a quella successiva. In alternativa, è possibile troncare il contenuto invece di utilizzare il ritorno a capo. Per ulteriori informazioni, vedere Procedura dettagliata: disposizione dei controlli in Windows Form utilizzando FlowLayoutPanel.

TableLayoutPanel dispone il contenuto in una griglia fornendo funzionalità simili all'elemento <table> HTML. Il controllo TableLayoutPanel permette di inserire i controlli in un layout di griglia senza dover specificare precisamente la posizione di ogni singolo controllo. Le celle sono disposte in righe e colonne che possono anche avere dimensioni differenti. È possibile unire le celle di più righe e colonne. Le celle possono contenere tutto ciò che può essere incluso in un form, comportandosi per quasi tutti gli altri aspetti come contenitori.

Il controllo TableLayoutPanel inoltre fornisce una funzionalità di ridimensionamento proporzionale in fase di esecuzione, in modo che il layout possa cambiare facilmente in base al ridimensionamento del form. Di conseguenza, il controllo TableLayoutPanel è molto adatto per i form per l'immissione dei dati e le applicazioni localizzate. Per ulteriori informazioni, vedere Procedura dettagliata: creazione di un Windows Form ridimensionabile per l'inserimento di dati e Procedura dettagliata: creazione di un layout dalle proporzioni adattabili per la localizzazione.

Di norma, il controllo TableLayoutPanel non deve essere utilizzato come un contenitore per l'intero layout. Usare i controlli TableLayoutPanel per fornire le funzionalità di ridimensionamento proporzionale alle parti del layout.

Di seguito sono elencate le attività illustrate nella procedura dettagliata:

Creazione di un progetto Windows Form
Disposizione dei controlli in righe e colonne
Impostazione delle proprietà di righe e colonne
Estensione di un controllo su righe e colonne
Gestione automatica degli overflow
Inserimento dei controlli tramite doppio clic nella Casella degli strumenti
Inserimento di un controllo tramite il trascinamento della struttura
Riassegnazione dei controlli esistenti a un differente padre

Al termine, si saranno acquisite le informazioni circa il ruolo delle importanti funzionalità di layout.

Nota

È possibile che le finestre di dialogo e i comandi di menu visualizzati varino da quelli descritti nella Guida in linea a seconda delle impostazioni attive o dell'edizione del programma Per modificare le impostazioni, scegliere Importa/esporta impostazioni dal menu Strumenti. Per ulteriori informazioni, vedere Impostazioni di Visual Studio.

Creazione del progetto

Il primo passaggio indica come creare il progetto e impostare il form.

Per creare il progetto

Creare un progetto Applicazione Windows chiamato "TableLayoutPanelExample". Per ulteriori informazioni, vedere Procedura: creare un progetto applicazione Windows.
Selezionare il form in Progettazione Windows Form.

Disposizione dei controlli in righe e colonne

Il controllo TableLayoutPanel consente di disporre facilmente i controlli in righe e colonne.

Per disporre i controlli in righe e colonne utilizzando TableLayoutPanel

Trascinare un controllo TableLayoutPanel dalla Casella degli strumenti al form. Per impostazione predefinita, il controllo TableLayoutPanel contiene quattro celle.
Trascinare un controllo Button dalla Casella degli strumenti nel controllo TableLayoutPanel e rilasciarlo in una delle quattro celle. Il controllo Button viene creato all'interno della cella selezionata.
Trascinare altri tre controlli Button dalla Casella degli strumenti nel controllo TableLayoutPanel in modo che ogni cella contenga un pulsante.
Agganciare il quadratino di ridimensionamento verticale tra le due colonne e spostarlo verso sinistra. Si noti come il controllo Button nella prima colonna venga ridimensionato in una larghezza inferiore mentre la dimensione dei controlli Button nella seconda colonna resta invariata.
Agganciare il quadratino di ridimensionamento verticale tra le due colonne e spostarlo verso destra. Per i controlli Button nella prima colonna viene ripristinata la dimensione originale mentre i controlli Button nella seconda colonna vengono spostati verso destra.
Spostare il quadratino di ridimensionamento orizzontale verso l'alto e verso il basso per osservarne gli effetti sui controlli del pannello.

Posizionamento dei controlli utilizzando l'ancoraggio e l'aggancio

Il comportamento dell'aggancio dei controlli figlio in un TableLayoutPanel è differente rispetto a quello di altri controlli contenitore. Il comportamento dell'ancoraggio dei controlli figlio è uguale a quello di altri controlli contenitore.

Posizionamento dei controlli all'interno delle celle

Selezionare il primo controllo Button. Modificare il valore della proprietà Dock su Fill. Il controllo Button si espande in modo da occupare la cella.
Selezionare uno degli altri controlli Button. Modificare il valore della proprietà Anchor su Right. Si noti come viene spostato in modo che il bordo destro sia vicino al bordo destro della cella. La distanza tra i bordi corrisponde alla somma dei valori della proprietà Margin del controllo Button e della proprietà Padding del pannello.
Modificare il valore della proprietà Anchor del controllo Button su Right e Left. Si noti come il controllo viene ridimensionato nella larghezza della cella in base ai valori di Margin e Padding.
Ripetere i passaggi 2 e 3 con gli stili Top e Bottom.

Impostazione delle proprietà di righe e colonne

È possibile impostare singole proprietà di righe e colonne utilizzando gli insiemi RowStyles e ColumnStyles.

Per impostare le proprietà di righe e colonne

Selezionare il controllo TableLayoutPanel in Progettazione Windows Form.
Nella finestra Proprietà, aprire l'insieme ColumnStyles facendo clic sul pulsante con i puntini di sospensione () accanto alla voce Colonne.
Selezionare la prima colonna e modificare il valore della proprietà SizeType su AutoSize. Scegliere OK per confermare la modifica. La larghezza della prima colonna viene ridotta per adattarsi al controllo Button. Si noti inoltre che la larghezza della colonna non è ridimensionabile.
Nella finestra Proprietà, aprire l'insieme ColumnStyles e selezionare la prima colonna. Modificare il valore della proprietà SizeType su Percent. Scegliere OK per confermare la modifica. Ridimensionare il controllo TableLayoutPanel su una larghezza maggiore e notare come si espande la larghezza della prima colonna. Ridimensionare il controllo TableLayoutPanel su una larghezza inferiore e notare come vengono ridimensionati i pulsanti della prima colonna per adattarsi alla cella. Si noti inoltre che la larghezza della colonna è ridimensionabile.
Nella finestra Proprietà, aprire l'insieme ColumnStyles e selezionare tutte le colonne dell'elenco. Impostare il valore di ogni proprietà SizeType su Percent. Scegliere OK per confermare la modifica. Ripetere le operazioni per l'insieme RowStyles.
Agganciare uno dei quadratini di ridimensionamento presenti negli angoli e ridimensionare la larghezza e l'altezza del controllo TableLayoutPanel. Le righe e le colonne vengono ridimensionate in base alle dimensioni modificate del controllo TableLayoutPanel. Si noti inoltre che le righe e le colonne sono ridimensionabili tramite i quadratini di ridimensionamento orizzontale e verticale.

Estensione di un controllo su righe e colonne

Il controllo TableLayoutPanel aggiunge diverse proprietà ai controlli in fase di progettazione. RowSpan e ColumnSpan sono due di queste proprietà. È possibile utilizzare le proprietà per estendere un controllo su più righe o colonne.

Per estendere un controllo su righe e colonne

Selezionare il controllo Button nella prima riga della prima colonna.
Nella finestra Proprietà modificare il valore della proprietà ColumnSpan su 2. Il controllo Button occupa la prima e la seconda colonna. Viene inoltre aggiunta una ulteriore riga per inserire la modifica.
Ripetere il passaggio 2 per la proprietà RowSpan.

Inserimento dei controlli tramite doppio clic nella Casella degli strumenti

Il controllo TableLayoutPanel può essere compilato facendo doppio clic sui controlli nella Casella degli strumenti.

Per inserire i controlli facendo doppio clic nella Casella degli strumenti

Trascinare un controllo TableLayoutPanel dalla Casella degli strumenti al form.
Nella Casella degli strumenti, fare doppio clic sull'icona del controllo Button. Viene visualizzato un nuovo controllo pulsante nella prima cella del controllo TableLayoutPanel.
Fare doppio clic su diversi altri controlli nella Casella degli strumenti. I nuovi controlli vengono visualizzati in sequenza nelle celle libere del controllo TableLayoutPanel. Inoltre, il controllo TableLayoutPanel si espande in modo da inserire i nuovi controlli qualora non fossero disponibili celle aperte.

Gestione automatica degli overflow

Quando si inserisce un controllo in TableLayoutPanel, potrebbero esaurirsi le celle vuote per i nuovi controlli. Il controllo TableLayoutPanel gestisce tale situazione aumentando automaticamente il numero delle celle.

Per osservare la gestione automatica degli overflow

Se ancora sono presenti celle vuote nel controllo TableLayoutPanel, continuare a inserire nuovi controlli Button fino a completare il controllo TableLayoutPanel.
Una volta completato il controllo TableLayoutPanel, fare doppio clic sull'icona Button nella Casella degli strumenti per inserire un altro controllo Button. Si noti che il controllo TableLayoutPanel crea nuove celle per inserire il nuovo controllo. Inserire qualche altro controllo e osservare il comportamento di ridimensionamento.
Modificare il valore della proprietà GrowStyle del controllo TableLayoutPanel su FixedSize. Fare doppio clic sull'icona Button nella Casella degli strumenti per inserire i controlli Button fino a completare il controllo TableLayoutPanel. Fare di nuovo doppio clic sull'icona Button nella Casella degli strumenti. Viene visualizzato un messaggio di errore di Progettazione Windows Form indicante che non è possibile creare altre righe e colonne.

Inserimento di un controllo tramite il trascinamento della struttura

È possibile inserire un controllo in TableLayoutPanel e determinarne la dimensione trascinando la struttura in una cella.

Per inserire un controllo tramite il trascinamento della struttura

Trascinare un controllo TableLayoutPanel dalla Casella degli strumenti al form.
Nella Casella degli strumenti fare clic sull'icona del controllo Button. Non trascinare nel form.
Spostare il puntatore del mouse sul controllo TableLayoutPanel. Il puntatore assumerà la forma di una croce (selezione di precisione) associata all'icona del controllo Button.
Fare clic e tenere premuto il pulsante del mouse.
Trascinare il puntatore del mouse per disegnare la struttura del controllo Button. Una volta ottenuta la dimensione desiderata, rilasciare il pulsante del mouse. Il controllo Button viene creato nella cella in cui è stata disegnata la struttura del controllo.

Inserimento di più controlli all'interno delle celle non consentito

Il controllo TableLayoutPanel può contenere solo un controllo figlio per cella.

Per dimostrare che non si possono inserire più controlli nelle celle

Trascinare un controllo Button dalla Casella degli strumenti nel controllo TableLayoutPanel rilasciandolo in una delle celle occupate. Il controllo TableLayoutPanel non consente il rilascio del controllo Button nella cella occupata.

Scambio di controlli

Il controllo TableLayoutPanel consente lo scambio dei controlli tra due differenti celle.

Per scambiare i controlli

Trascinare uno dei controlli Button da una cella occupata e rilasciarlo in un'altra cella occupata. Si noti come i due controlli si scambiano le celle.

Passaggi successivi

È possibile ottenere un layout complesso utilizzando i pannelli e i controlli di layout in combinazione. Per approfondire l'argomento, si consiglia di effettuare le seguenti operazioni:

Provare a ridimensionare uno dei controlli Button su una dimensione maggiore e notare l'effetto sul layout.
Incollare una selezione di più controlli in TableLayoutPanel e notare come vengono inseriti.
I pannelli layout possono contenere altri pannelli layout. Provare a rilasciare un controllo TableLayoutPanel nel controllo esistente.
Ancorare il controllo TableLayoutPanel al form padre. Ridimensionare il form e notare l'effetto sul layout.

Vedere anche

Condividi tramite