Condividi tramite

Procedura dettagliata: Disposizione dei controlli in Windows Form tramite FlowLayoutPanel

  • Articolo

Alcune applicazioni richiedono un modulo con un layout che si dispone in modo appropriato quando il modulo viene ridimensionato o in base alla modifica delle dimensioni del contenuto. Quando è necessario un layout dinamico e non si vuole gestire Layout eventi in modo esplicito nel codice, è consigliabile usare un pannello di layout.

Il controllo FlowLayoutPanel e il controllo TableLayoutPanel forniscono modi intuitivi per disporre i controlli nel form. Entrambi offrono una possibilità automatica e configurabile di controllare le posizioni relative dei controlli figlio contenuti all'interno di essi e offrono entrambe funzionalità di layout dinamico in fase di esecuzione, in modo che possano ridimensionare e riposizionare i controlli figlio durante la modifica delle dimensioni del modulo padre. È possibile annidare pannelli di layout all'interno di altri pannelli per consentire la realizzazione di interfacce utente sofisticate.

Il TableLayoutPanel dispone il proprio contenuto in una griglia, fornendo funzionalità simili all'elemento HTML tabella <>. Le celle sono disposte in righe e colonne e possono avere dimensioni diverse. Per ulteriori informazioni, vedere Guida passo passo: Disposizione di controlli in Windows Forms con TableLayoutPanel.

Il FlowLayoutPanel dispone il contenuto in una direzione di flusso specifica: orizzontale o verticale. Il contenuto può essere avvolto da una riga all'altra o da una colonna all'altra. In alternativa, è possibile ritagliare il contenuto anziché avvolgerlo. Le attività illustrate in questa procedura dettagliata includono:

  • Creazione di un progetto Windows Form

  • Disposizione dei controlli orizzontalmente e verticalmente

  • Modifica della direzione del flusso

  • Inserimento di interruzioni di flusso

  • Disposizione dei controlli utilizzando spaziatura interna e margini

  • Inserimento di controlli facendo doppio clic su di essi nella casella degli strumenti

  • Inserimento di un controllo disegnandone il contorno

  • Inserimento di controlli tramite il cursore

  • Reindirizzare i controlli esistenti a un diverso elemento padre

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

Creare il progetto

  1. In Visual Studio, crea un progetto di applicazione basato su Windows denominato "FlowLayoutPanelExample" (File>Nuovo>Progetto>Visual C# o Visual Basic>Desktop classico>Applicazione Windows Form).

  2. Selezionare il modulo nel Designer di moduli .

Disposizione dei controlli orizzontalmente e verticalmente

Il controllo FlowLayoutPanel consente di posizionare controlli lungo righe o colonne senza che sia necessario specificare con precisione la posizione di ogni singolo controllo.

Il controllo FlowLayoutPanel può ridimensionare o riallineare i controlli figlio quando cambiano le dimensioni del modulo padre.

Per disporre i controlli orizzontalmente e verticalmente usando FlowLayoutPanel

  1. Trascina un controllo FlowLayoutPanel dalla Toolbox sul tuo modulo.

  2. Trascina un controllo Button dalla casella degli strumenti nel FlowLayoutPanel. Si noti che l'elemento viene spostato automaticamente nell'angolo superiore sinistro del controllo FlowLayoutPanel.

  3. Trascina un altro controllo Button dalla casella degli strumenti nel FlowLayoutPanel. Si noti che il controllo Button viene automaticamente spostato in una posizione accanto al primo controllo Button. Se la FlowLayoutPanel è troppo stretta per contenere entrambi i controlli nella stessa riga, il nuovo controllo Button viene spostato automaticamente nella riga successiva.

  4. Trascinare altri controlli Button dalla casella degli strumenti nel FlowLayoutPanel. Continuare a posizionare i controlli Button fino a quando passano alla riga successiva.

  5. Modificare il valore della proprietà WrapContents del controllo FlowLayoutPanel in false. Si noti che i controlli figlio non passano più alla riga successiva. Invece, vengono spostati nella prima riga e ritagliati.

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

  7. Ridurre la larghezza del controllo FlowLayoutPanel fino a quando tutti i controlli Button non vengono spostati nella prima colonna.

  8. Aumentare la larghezza del controllo FlowLayoutPanel fino a quando tutti i controlli Button non vengono spostati nella prima riga. Potrebbe essere necessario ridimensionare il modulo per adattarlo alla maggiore larghezza.

Modifica della direzione del flusso

La proprietà FlowDirection consente di modificare la direzione in cui sono disposti i controlli. È 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à FlowDirection del controllo FlowLayoutPanel in TopDown. Si noti che i controlli figlio vengono riorganizzati in una o più colonne, a seconda dell'altezza del controllo.

  2. Ridimensionare il FlowLayoutPanel in modo che l'altezza sia inferiore alla colonna dei controlli Button. Si noti che il FlowLayoutPanel riorganizza i controlli figlio per fluire nella colonna successiva. Continua a ridurre l'altezza e nota che i controlli figlio fluiscono in colonne consecutive. Modificare il valore della proprietà FlowDirection del controllo FlowLayoutPanel in RightToLeft. Si noti che le posizioni dei controlli figlio sono invertite. Osserva il layout quando modifichi il valore della proprietà FlowDirection in BottomUp.

Inserimento di interruzioni di flusso

Il controllo FlowLayoutPanel fornisce una proprietà FlowBreak ai relativi controlli figlio. Se si imposta il valore della proprietà FlowBreak su true, il controllo FlowLayoutPanel interrompe la disposizione dei controlli nella direzione del flusso corrente e passa alla riga o alla colonna successiva.

Per inserire interruzioni di flusso

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

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

  3. Impostare il valore della proprietà FlowBreak del controllo Button su true. Si noti che la colonna è interrotta e i controlli successivi al controllo Button selezionato proseguono nella colonna successiva. Impostare il valore della proprietà FlowBreak del controllo Button su false per tornare al comportamento originale.

Posizionamento di controlli tramite ancoraggio e aggancio

I comportamenti di aggancio e ancoraggio dei controlli figli differiscono dai comportamenti in altri controlli contenitore. Sia l'attracco che l'ancoraggio sono relativi al controllo più grande nella direzione del flusso.

Per posizionare i controlli usando il docking e l'ancoraggio

  1. Aumentare le dimensioni del FlowLayoutPanel fino a quando i controlli Button vengono disposti in una colonna.

  2. Selezionare il controllo Button superiore. Aumentarne la larghezza in modo che sia circa il doppio di quella degli altri controlli Button.

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

  4. Modificare il valore della proprietà Anchor in Right e Left. Si noti che viene ridimensionata alla stessa larghezza del primo controllo Button.

  5. Selezionare il terzo controllo Button. Modificare il valore della proprietà Dock in Fill. Si noti che è dimensionato alla stessa larghezza del primo controllo Button.

Disposizione dei controlli tramite riempimento e margini

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

La proprietà Padding consente di controllare la posizione dei controlli all'interno di una cella del controllo FlowLayoutPanel. Specifica la spaziatura tra i controlli figlio e il bordo del controllo FlowLayoutPanel.

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

Per disporre i controlli utilizzando le proprietà Padding e Margin

  1. Modificare il valore della proprietà Dock del controllo FlowLayoutPanel in Fill. Se la maschera è sufficientemente grande, i controlli Button verranno spostati nella prima colonna del controllo FlowLayoutPanel.

  2. Modificare il valore della proprietà Padding del controllo FlowLayoutPanel espandendo la voce Padding nella finestra delle proprietà e impostando la proprietà All su 20. Per ulteriori informazioni, vedere Procedura dettagliata: Disposizione dei controlli sui moduli Windows Forms con spaziatura interna, margini e proprietà AutoSize. Si noti che i controlli figlio vengono spostati verso il centro del controllo FlowLayoutPanel. Il valore aumentato per la proprietà Padding consente di allontanare i controlli figlio dai bordi del controllo FlowLayoutPanel.

  3. Selezionare tutti i controlli Button nel FlowLayoutPanel e impostare il valore della proprietà Margin su 20. Si noti che la spaziatura tra i controlli Button aumenta, quindi vengono spostati più distanti. Potrebbe essere necessario ridimensionare il controllo FlowLayoutPanel in modo che sia più grande per visualizzare tutti i controlli figlio.

Inserimento di controlli facendo doppio clic su di essi nella casella degli strumenti

È possibile popolare il controllo FlowLayoutPanel 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 . Si noti che nel controllo FlowLayoutPanel viene visualizzato un nuovo controllo Button.

  2. Fare doppio clic su altri controlli nella casella degli strumenti . Si noti che i nuovi controlli vengono visualizzati successivamente nel controllo FlowLayoutPanel.

Inserimento di un controllo disegnandone il contorno

È possibile inserire un controllo in un controllo FlowLayoutPanel e specificarne le dimensioni disegnandone il contorno in una cella.

Per inserire un controllo disegnandone il contorno

  1. Nella casella degli strumenti , fare clic sull'icona del controllo Button. Non trascinarlo nel modulo.

  2. Spostare il puntatore del mouse sul controllo FlowLayoutPanel. Si noti che il puntatore diventa un mirino con l'icona del controllo Button collegata.

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

  4. Trascinare il puntatore del mouse per disegnare il contorno del controllo Button. Quando si è soddisfatti delle dimensioni, rilasciare il pulsante del mouse. Si noti che il controllo Button viene creato nella posizione aperta successiva del controllo FlowLayoutPanel.

Inserimento di controlli tramite la barra di inserimento

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

Per inserire un controllo utilizzando il cursore

  1. Trascinare un controllo Button dalla casella degli strumenti nel controllo FlowLayoutPanel e puntare allo spazio tra due controlli Button. Si noti che viene disegnata una barra di inserimento, che indica dove verrà posizionata la Button quando viene rilasciata nel controllo FlowLayoutPanel. Prima di rilasciare il nuovo controllo Button nel controllo FlowLayoutPanel, spostare il puntatore del mouse per osservare come si sposta la barra di inserimento.

  2. Inserire il nuovo controllo Button nel controllo FlowLayoutPanel. Si noti che il nuovo controllo Button non è allineato con gli altri, perché la relativa proprietà Margin ha un valore diverso.

Riassegnazione di controlli esistenti a un elemento padre diverso

È possibile assegnare controlli esistenti nel modulo a un nuovo controllo FlowLayoutPanel.

Per aggiornare i controlli esistenti

  1. Trascinare tre controlli Button dalla casella degli strumenti sul form. Posizionarli vicino l'uno all'altro, ma lasciarli non allineati.

  2. Nella casella degli strumenti fare clic sull'icona del controllo FlowLayoutPanel. Non trascinarlo sul modulo.

  3. Spostare il puntatore del mouse vicino ai tre controlli Button. Osservare che il puntatore cambia in un mirino a croce con l'icona di controllo FlowLayoutPanel collegata.

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

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

  6. Rilasciare il pulsante del mouse. Si noti che i tre controlli Button vengono inseriti nel controllo FlowLayoutPanel.

Passaggi successivi

È possibile ottenere un layout complesso usando una combinazione di pannelli di layout e controlli. I suggerimenti per altre esplorazioni includono:

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

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

  • Ancorare il controllo FlowLayoutPanel al modulo padre. Ridimensionare il modulo e annotare l'effetto sul layout.

  • Impostare la proprietà Visible di uno dei controlli su false e osservare il modo in cui FlowLayoutPanel si riorganizza in risposta.

Vedere anche