Procedura dettagliata: disposizione dei controlli in Windows Form utilizzando FlowLayoutPanel

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

Dispone TableLayoutPanel il relativo contenuto in una griglia, fornendo funzionalità simili all'elemento tabella> HTML<. Le celle vengono disposte in righe e colonne, e queste possono avere dimensioni diverse. Per altre informazioni, vedere Walkthrough: Arranging Controls on Windows Forms Using a TableLayoutPanel.

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. Le attività illustrate nella procedura dettagliata sono le seguenti:

  • Creazione di un progetto Windows Forms

  • Disposizione dei controlli in orizzontale e in verticale

  • Modifica della direzione del flusso

  • Inserimento di interruzioni di flusso

  • Disposizione dei controlli con spaziatura e margini

  • Inserimento di controlli con doppio clic nella casella degli strumenti

  • Inserimento di un controllo disegnandone il contorno

  • Inserimento di controlli con il cursore

  • Riassegnazione dei controlli esistenti a un padre diverso

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

Creare il progetto

  1. In Visual Studio creare un progetto di applicazione basato su Windows denominato "FlowLayoutPanelExample" (File>New>Project>Visual C# o Visual Basic>Classic Desktop> Windows Form Application).

  2. Selezionare il form in Progettazione form.

Disposizione dei controlli in orizzontale e in verticale

Il controllo FlowLayoutPanel consente di posizionare i controlli lungo righe o colonne senza dover specificare in modo preciso la posizione di ogni singolo controllo.

FlowLayoutPanel consente l'adattamento delle dimensioni o del flusso dei controlli figlio quando cambiano le dimensioni del form padre.

Per disporre i controlli orizzontalmente e verticalmente usando FlowLayoutPanel

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

  2. Trascinare un controllo Button dalla Casella degli strumenti in FlowLayoutPanel. Si noti come viene automaticamente spostato nell'angolo superiore sinistro del controllo FlowLayoutPanel .

  3. Trascinare un altro controllo Button dalla Casella degli strumenti in FlowLayoutPanel. Si noti come il controllo Button viene automaticamente spostato nella posizione accanto al primo controllo Button . Se FlowLayoutPanel non riesce a contenere i due controlli nella stessa riga perché è troppo piccolo, il nuovo controllo Button viene automaticamente spostato nella riga successiva.

  4. Trascinare diversi altri controlli Button dalla Casella degli strumenti in FlowLayoutPanel. Continuare a inserire controlli Button finché uno non va a capo nella riga successiva.

  5. Modificare il valore della proprietà del controllo FlowLayoutPanel , WrapContents , su false. Si noti che i controlli figlio non scorrono più nella riga successiva, ma vengono spostati nella prima riga e troncati.

  6. Modificare il valore della proprietà del controllo FlowLayoutPanel , WrapContents , su true. Si noti che i controlli figlio vanno di nuovo a capo alla riga successiva.

  7. Diminuire la larghezza del controllo FlowLayoutPanel in modo che tutti i controlli Button vengano spostati nella prima colonna.

  8. Aumentare la larghezza del controllo FlowLayoutPanel in modo che tutti i controlli Button vengano spostati nella prima riga. Per poter inserire il controllo più largo, potrebbe essere necessario ridimensionare il form.

Modifica della direzione del flusso

La proprietà FlowDirection consente di modificare la direzione secondo cui i controlli vengono disposti. È possibile disporre i controlli figlio da sinistra a destra, da destra a sinistra, dall'alto verso il basso o dal basso verso l'alto.

Per modificare la direzione del flusso in FlowLayoutPanel

  1. Modificare il valore della proprietà del controllo FlowLayoutPanel , FlowDirection , su TopDown. Si noti che i controlli figlio vengono riorganizzati in una o più colonne, a seconda dell'altezza del controllo.

  2. Ridimensionare FlowLayoutPanel in modo che l'altezza sia inferiore alla colonna dei controlli Button . Si noti che FlowLayoutPanel riorganizza i controlli figlio in modo che scorrano nella colonna successiva. Continuare a diminuire l'altezza in modo da far scorrere i controlli figlio nelle colonne consecutive. Modificare il valore della proprietà del controllo FlowLayoutPanel , FlowDirection , su RightToLeft. Si noti che le posizioni dei controlli figlio sono invertite. Si osservi il layout quando si cambia il valore della proprietà FlowDirection in BottomUp.

Inserimento di interruzioni di flusso

Il controllo FlowLayoutPanel fornisce la proprietà FlowBreak per i controlli figlio. Impostando il valore della proprietà FlowBreak su true , il controllo FlowLayoutPanel interrompe il layout dei controlli nella direzione di flusso corrente ed esegue il wrapping alla riga o colonna successiva.

Per inserire le interruzioni del flusso

  1. Modificare il valore della proprietà del controllo FlowLayoutPanel , FlowDirection , su TopDown.

  2. Selezionare uno dei controlli Button presenti al centro della colonna più a sinistra.

  3. Impostare il valore della proprietà FlowBreak del controllo Button su true. Si noti che la colonna viene interrotta e i controlli susseguenti al controllo Button selezionato scorrono nella colonna successiva. Impostare il valore della proprietà FlowBreak del controllo Button su false per ripristinare il comportamento originale.

Posizionamento dei controlli usando l'ancoraggio e l'aggancio

Il comportamento dell'ancoraggio e dell'aggancio dei controlli figlio è differente rispetto a quello di altri controlli contenitore. Sia l'ancoraggio che l'aggancio sono relativi al controllo più largo nella direzione del flusso.

Per posizionare i controlli usando l'ancoraggio e l'aggancio

  1. Aumentare la dimensione di FlowLayoutPanel finché tutti i controlli Button non vengono disposti in una colonna.

  2. Selezionare il primo controllo Button . Aumentarne la larghezza in modo che diventi circa il doppio dell'ampiezza degli altri controlli Button .

  3. Selezionare il secondo controllo Button . Modificare il valore della proprietà Anchor in Right. Si noti che è stato spostato in modo che il bordo destro sia allineato con il bordo destro del primo controllo Button .

  4. Modificare il valore della proprietà Anchor su Right e Left. Si noti come la dimensione diventi uguale all'ampiezza del primo controllo Button .

  5. Selezionare il terzo controllo Button . Modificare il valore della proprietà Dock in Fill. Si noti come la dimensione diventi uguale all'ampiezza del primo controllo Button .

Disposizione dei controlli con spaziatura e margini

È anche possibile disporre i controlli in FlowLayoutPanel modificando le proprietà Padding e Margin .

La proprietà Padding consente di determinare il posizionamento dei controlli in una cella del controllo FlowLayoutPanel . Specifica la spaziatura tra i controlli figlio e il bordo del controllo FlowLayoutPanel .

La proprietà Margin consente di determinare la spaziatura tra i controlli.

Per disporre i controlli usando le proprietà per spaziatura e margini

  1. Modificare il valore della proprietà del controllo FlowLayoutPanel , Dock , su Fill. Se il form è sufficientemente ampio, i controlli Button verranno spostati nella prima colonna del controllo FlowLayoutPanel .

  2. Modificare il valore della proprietà FlowLayoutPanel del controllo Padding espandendo la voce Padding nella finestra Proprietà e impostando la proprietà All su 20. Per altre informazioni, vedere Procedura dettagliata: Layout dei controlli Windows Form con riempimento, margini e proprietà AutoSize. Si noti come i controlli figlio vengano spostati verso il centro del controllo FlowLayoutPanel . L'aumento del valore della proprietà Padding provoca l'allontanamento dei controlli figlio dai bordi del controllo FlowLayoutPanel .

  3. Selezionare tutti i controlli Button in FlowLayoutPanel e impostare il valore della proprietà Margin su 20. La spaziatura tra i controlli Button aumenta in modo da allontanarli tra loro. Potrebbe essere necessario ingrandire il controllo FlowLayoutPanel in modo da vedere tutti i controlli figlio.

Inserimento di controlli con doppio clic nella casella degli strumenti

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

Per inserire i controlli facendo doppio clic nella Casella degli strumenti

  1. Fare doppio clic sull'icona del controllo Button nella Casella degli strumenti. Un nuovo controllo Button viene visualizzato nel controllo FlowLayoutPanel .

  2. Fare doppio clic su diversi altri controlli nella Casella degli strumenti. Si noti come nel controllo FlowLayoutPanel vengano visualizzati in successione i nuovi controlli.

Inserimento di un controllo disegnandone il contorno

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

Per inserire un controllo disegnandone il contorno

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

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

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

  4. 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 controllo Button viene creato nella prima posizione aperta del controllo FlowLayoutPanel .

Inserimento dei controlli con la barra di inserimento

In un controllo FlowLayoutPanel , è possibile inserire i controlli in una posizione specifica. Quando si trascina un controllo in un'area client del controllo FlowLayoutPanel , viene visualizzata una barra di inserimento per indicare dove il controllo verrà inserito.

Per inserire un controllo usando il cursore

  1. Trascinare un controllo Button dalla Casella degli strumenti nel controllo FlowLayoutPanel e puntare sullo spazio tra i due controlli Button . Si noti che viene disegnata una barra di inserimento, che indica dove verrà inserito quando Button viene rilasciato nel FlowLayoutPanel controllo . Prima di rilasciare il nuovo controllo Button in FlowLayoutPanel , spostare il puntatore del mouse per osservare come si muove la barra di inserimento.

  2. Rilasciare il nuovo controllo Button in FlowLayoutPanel . Si noti che il nuovo controllo Button non è allineato agli altri perché è specificato un valore differente per la proprietà Margin .

Riassegnazione dei controlli esistenti a un padre diverso

È possibile assegnare i controlli presenti nel form a un nuovo controllo FlowLayoutPanel .

Per assegnare un nuovo elemento padre ai controlli esistenti

  1. Trascinare i tre controlli Button dalla Casella degli strumenti al form. Posizionarli uno accanto a altro, ma lasciarli non allineati.

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

  3. Spostare il puntatore del mouse accanto ai tre controlli Button . Osservare che il puntatore assume la forma di un mirino con l'icona del controllo FlowLayoutPanel associata.

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

  5. Trascinare il puntatore del mouse per disegnare la struttura del controllo FlowLayoutPanel . Disegnare la struttura intorno ai tre controlli Button .

  6. Rilasciare il pulsante del mouse. I tre controlli Button vengono inseriti nel controllo FlowLayoutPanel .

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:

  • Ridimensionare un controllo Button per una dimensione più grande e notare l'effetto sul layout.

  • I pannelli layout possono contenere altri pannelli layout. Provare a rilasciare un controllo TableLayoutPanel nel controllo esistente.

  • Ancorare il controllo FlowLayoutPanel al form padre. Ridimensionare il form e notare l'effetto sul layout.

  • Impostare la proprietà Visible di un controllo su false e notare come FlowLayoutPanel adatta il flusso in risposta.

Vedi anche