Procedura dettagliata: disposizione dei controlli in Windows Form utilizzando TableLayoutPanel

  • Articolo

Alcune applicazioni richiedono che il form abbia un layout che possa adattarsi automaticamente alle eventuali modifiche alle dimensioni del form o del contenuto del form. Per usare un layout dinamico senza gestire gli eventi Layout in modo esplicito nel codice è possibile usare un pannello di 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 annidati in altri pannelli layout per consentire la realizzazione di interfacce utente sofisticate.

FlowLayoutPanel dispone i contenuti in una direzione di flusso specifica: 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 usare il ritorno a capo. Per altre informazioni, vedere Procedura dettagliata: Disposizione dei controlli su Windows Form uso di flowLayoutPanel.

Dispone TableLayoutPanel il relativo contenuto in una griglia, fornendo funzionalità simili all'elemento tabella> HTML<. Il TableLayoutPanel controllo consente di posizionare i controlli in un layout griglia senza che sia necessario specificare con precisione la posizione di ogni singolo controllo. Le celle vengono disposte in righe e colonne, e queste possono avere dimensioni diverse. Le celle possono essere unite tra righe e colonne. Le celle possono contenere qualsiasi elemento che un modulo può contenere e comportarsi nella maggior parte degli altri aspetti come contenitori.

Il TableLayoutPanel controllo fornisce anche una funzionalità di ridimensionamento proporzionale in fase di esecuzione, in modo che il layout possa cambiare senza problemi man mano che il modulo viene ridimensionato. In questo modo il TableLayoutPanel controllo è particolarmente adatto per scopi quali moduli di immissione dati e applicazioni localizzate. Per altre informazioni, vedere Procedura dettagliata: Creazione di un Windows Form ridimensionabile per immissione dati e procedura dettagliata: Creazione di un Windows Form localizzabile.

In generale, non è consigliabile usare un TableLayoutPanel controllo come contenitore per l'intero layout. Usare TableLayoutPanel i controlli per fornire funzionalità di ridimensionamento proporzionali alle parti del layout.

Le attività illustrate nella procedura dettagliata sono le seguenti:

  • Creazione di un progetto Windows Forms

  • Disposizione dei controlli in righe e colonne

  • Impostazione delle proprietà riga e colonna

  • Spanning Rows and Columns with a Control

  • Gestione automatica degli overflow

  • Inserimento di controlli con doppio clic nella casella degli strumenti

  • Inserimento di un controllo disegnandone il contorno

  • Riassegnazione dei controlli esistenti a un padre diverso

Al termine, si avrà una migliore comprensione del ruolo svolto da queste importanti funzionalità di layout.

Creazione del progetto

Il primo passaggio consiste nella creazione del progetto e nella configurazione del form.

Per creare il progetto

  1. Creare un progetto di applicazione Windows denominato "TableLayoutPanelExample". Per altre informazioni, vedere Procedura: Creare un progetto di applicazione Windows Form .

  2. Selezionare il modulo in Progettazione WindowsForm.

Disposizione dei controlli in righe e colonne

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

Per disporre i controlli in righe e colonne tramite TableLayoutPanel

  1. Trascinare un controllo TableLayoutPanel dalla Casella degli strumenti al form. Si noti che, per impostazione predefinita, il TableLayoutPanel controllo ha quattro celle.

  2. Trascinare un Button controllo dalla casella degli strumenti nel TableLayoutPanel controllo e rilasciarlo in una delle celle. Si noti che il Button controllo viene creato all'interno della cella selezionata.

  3. Trascinare altri tre Button controlli dalla casella degli strumenti nel TableLayoutPanel controllo, in modo che ogni cella contenga un pulsante.

  4. Afferrare il quadratino di ridimensionamento verticale tra le due colonne e spostarlo a sinistra. Si noti che i Button controlli nella prima colonna vengono ridimensionati a una larghezza inferiore, mentre le dimensioni dei Button controlli nella seconda colonna sono invariate.

  5. Afferrare il punto di manipolazione di ridimensionamento verticale tra le due colonne e spostarlo a destra. Si noti che i Button controlli nella prima colonna tornano alle dimensioni originali, mentre i Button controlli nella seconda colonna vengono spostati a destra.

  6. Spostare il quadratino di ridimensionamento orizzontale verso l'alto e verso il basso per visualizzare l'effetto sui controlli nel pannello.

Posizionamento di controlli all'interno di celle tramite ancoraggio e ancoraggio

Il comportamento di ancoraggio dei controlli figlio in un TableLayoutPanel oggetto differisce dal comportamento in altri controlli contenitore. Il comportamento di ancoraggio dei controlli figlio è identico a quello degli altri controlli contenitore.

Posizionamento di controlli all'interno di celle

  1. Selezionare il primo Button controllo. Modificare il valore della proprietà Dock in Fill. Si noti che il Button controllo si espande per riempire la cella.

  2. Selezionare uno degli altri Button controlli. Modificare il valore della proprietà Anchor in Right. Si noti che viene spostato in modo che il bordo destro si trova vicino al bordo destro della cella. La distanza tra i bordi è la somma della Button proprietà del Margin controllo e della proprietà del Padding pannello.

  3. Modificare il valore della Button proprietà del Anchor controllo in Right e Left. Si noti che il controllo viene ridimensionato in base alla larghezza della cella, con i Margin valori e Padding presi in considerazione.

  4. Ripetere i passaggi 2 e 3 con gli Top stili e Bottom .

Impostazione delle proprietà riga e colonna

È possibile impostare singole proprietà di righe e colonne usando le RowStyles raccolte e ColumnStyles .

Per impostare le proprietà di riga e colonna

  1. Selezionare il TableLayoutPanel controllo nella finestra di progettazione Windows Form.

  2. Nelle finestre Proprietà aprire l'insieme ColumnStyles facendo clic sul pulsante con i puntini di sospensione (The Ellipsis button (...) in the Properties window of Visual Studio.) accanto alla voce Colonne.

  3. Selezionare la prima colonna e modificare il valore della relativa SizeType proprietà in AutoSize. Fare clic su OK per accettare la modifica. Si noti che la larghezza della prima colonna viene ridotta per adattarsi al Button controllo . Si noti anche che la larghezza della colonna non è ridimensionabile.

  4. Nella finestra Proprietà aprire la ColumnStyles raccolta e selezionare la prima colonna. Modificare il valore della proprietà SizeType in Percent. Fare clic su OK per accettare la modifica. Ridimensionare il TableLayoutPanel controllo a una larghezza maggiore e notare che la larghezza della prima colonna si espande. Ridimensionare il TableLayoutPanel controllo in una larghezza inferiore e notare che i pulsanti nella prima colonna vengono ridimensionati per adattarsi alla cella. Si noti anche che la larghezza della colonna è ridimensionabile.

  5. Nella finestra Proprietà aprire la ColumnStyles raccolta e selezionare tutte le colonne elencate. Impostare il valore di ogni SizeType proprietà su Percent. Fare clic su OK per accettare la modifica. Ripetere con la RowStyles raccolta.

  6. Afferrare uno dei quadratini di ridimensionamento degli angoli e ridimensionare sia la larghezza che l'altezza del TableLayoutPanel controllo. Si noti che le righe e le colonne vengono ridimensionate man mano che cambiano le TableLayoutPanel dimensioni del controllo. Si noti anche che le righe e le colonne sono ridimensionabili con gli handle di ridimensionamento orizzontale e verticale.

Spanning Rows and Columns with a Control

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

Per estendere righe e colonne con un controllo

  1. Selezionare il Button controllo nella prima riga e nella prima colonna.

  2. Nelle finestre Proprietà modificare il valore della ColumnSpan proprietà impostandola su 2. Si noti che il Button controllo riempie la prima colonna e la seconda colonna. Si noti anche che è stata aggiunta una riga aggiuntiva per supportare questa modifica.

  3. Ripetere il passaggio 2 per la RowSpan proprietà .

Inserimento di controlli con doppio clic nella casella degli strumenti

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

Per inserire i controlli facendo doppio clic nella Casella degli strumenti

  1. Trascinare un controllo TableLayoutPanel dalla Casella degli strumenti al form.

  2. Fare doppio clic sull'icona del controllo Button nella Casella degli strumenti. Si noti che nella prima cella del controllo viene visualizzato TableLayoutPanel un nuovo controllo pulsante.

  3. Fare doppio clic su diversi altri controlli nella Casella degli strumenti. Si noti che i nuovi controlli vengono visualizzati successivamente nelle celle non occupato del TableLayoutPanel controllo. Si noti inoltre che il TableLayoutPanel controllo si espande per contenere i nuovi controlli se non sono disponibili celle aperte.

Gestione automatica degli overflow

Quando si inseriscono controlli nel TableLayoutPanel controllo, è possibile che si esauriscano celle vuote per i nuovi controlli. Il TableLayoutPanel controllo gestisce automaticamente questa situazione aumentando il numero di celle.

Per osservare la gestione automatica degli overflow

  1. Se nel controllo sono ancora presenti celle TableLayoutPanel vuote, continuare a inserire nuovi Button controlli fino a quando il TableLayoutPanel controllo non è pieno.

  2. Quando il TableLayoutPanel controllo è pieno, fare doppio clic sull'icona Button nella casella degli strumenti per inserire un altro Button controllo. Si noti che il TableLayoutPanel controllo crea nuove celle per contenere il nuovo controllo. Inserire altri controlli e osservare il comportamento di ridimensionamento.

  3. Modificare il valore della proprietà del controllo TableLayoutPanel , GrowStyle , su FixedSize. Fare doppio clic sull'icona Button nella casella degli strumenti per inserire Button i controlli fino a quando il TableLayoutPanel controllo non è pieno. Fare doppio clic sull'icona Button nella casella degli strumenti . Si noti che viene visualizzato un messaggio di errore da Progettazione Windows Form che informa che non è possibile creare righe e colonne aggiuntive.

Inserimento di un controllo disegnandone il contorno

È possibile inserire un controllo in TableLayoutPanel e determinarne la dimensione disegnandone il contorno in una cella.

Per inserire un controllo disegnandone il contorno

  1. Trascinare un controllo TableLayoutPanel dalla Casella degli strumenti al form.

  2. Nella Casella degli strumentifare clic sull'icona del controllo Button . Non trascinarla nel form.

  3. Spostare il puntatore del mouse sul controllo TableLayoutPanel . Osservare che il puntatore assume la forma di un mirino con l'icona del controllo Button associata.

  4. Fare clic e tenere premuto il pulsante del mouse.

  5. Trascinare il puntatore del mouse per disegnare la struttura del controllo Button . Una volta ottenuta la dimensione desiderata, rilasciare il pulsante del mouse. Si noti che il Button controllo viene creato nella cella in cui è stato disegnato il contorno del controllo.

Non sono consentiti più controlli all'interno di celle

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

Per dimostrare che non sono consentiti più controlli all'interno di celle

  • Trascinare un Button controllo dalla casella degli strumenti nel TableLayoutPanel controllo e rilasciarlo in una delle celle occupate. Si noti che il TableLayoutPanel controllo non consente di rilasciare il Button controllo nella cella occupata.

Scambio di controlli

Il TableLayoutPanel controllo consente di scambiare i controlli che occupano due celle diverse.

Per scambiare i controlli

  • Trascinare uno dei Button controlli da una cella occupata e rilasciare in un'altra cella occupata. Si noti che i due controlli vengono spostati da una cella all'altra.

Passaggi successivi

È possibile ottenere un layout complesso usando i pannelli e i controlli di layout in combinazione. Alcuni suggerimenti per un'analisi più ampia dell'argomento includono:

  • Provare a ridimensionare uno dei Button controlli con dimensioni maggiori e notare l'effetto sul layout.

  • Incollare una selezione di più controlli nel TableLayoutPanel controllo e notare come vengono inseriti i controlli.

  • 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.

Vedi anche