Procedura dettagliata: disposizione dei controlli in Windows Form utilizzando FlowLayoutPanel

Articolo
09/12/2008

Aggiornamento: novembre 2007

Per alcune applicazioni è richiesto un form con un layout in grado di adattarsi automaticamente in caso di modifica delle dimensioni del form o della quantità di informazioni contenute. Nel caso in cui si renda necessario un layout dinamico, è possibile utilizzare un pannello layout invece di gestire gli eventi Layout in modo esplicito nel codice.

I controlli FlowLayoutPanel e TableLayoutPanel forniscono procedure intuitive per disporre i controlli nel form. Entrambi forniscono una funzionalità automatica e configurabile per controllare le relative posizioni dei controlli figlio contenuti e funzionalità di layout dinamico in fase di esecuzione che consentono di ridimensionare e riposizionare i controlli figlio quando le dimensioni del form padre cambiano. I pannelli layout possono essere nidificati in altri pannelli layout per consentire la realizzazione di interfacce utente sofisticate.

Il contenuto di TableLayoutPanel viene disposto in una griglia, fornendo funzionalità simili all'elemento <table> HTML. Le celle sono disposte in righe e colonne e possono avere dimensioni differenti. Per ulteriori informazioni, vedere Procedura dettagliata: disposizione dei controlli in Windows Form utilizzando TableLayoutPanel.

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. Di seguito sono elencate le attività illustrate nella procedura dettagliata:

Creazione di un progetto Windows Form
Disposizione dei controlli orizzontalmente e verticalmente
Modifica della direzione di flusso
Inserimento delle interruzioni del flusso
Disposizione dei controlli utilizzando spaziatura e margini
Inserimento dei controlli tramite doppio clic nella Casella degli strumenti
Inserimento di un controllo tramite il trascinamento della struttura
Inserimento dei controlli utilizzando l'accento circonflesso
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 di applicazione basata su Windows chiamato "FlowLayoutPanelExample". Per ulteriori informazioni, vedere Procedura: creare un progetto applicazione Windows.
Selezionare il form in Progettazione form.

Disposizione dei controlli orizzontalmente e verticalmente

Il controllo FlowLayoutPanel consente l'inserimento dei controlli lungo righe o colonne senza dover specificare precisamente 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 utilizzando FlowLayoutPanel

Trascinare un controllo FlowLayoutPanel dalla Casella degli strumenti al form.
Trascinare un controllo Button dalla Casella degli strumenti in FlowLayoutPanel. Si noti come viene automaticamente spostato nell'angolo superiore sinistro del controllo FlowLayoutPanel.
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 è in grado di contenere i due controlli nella stessa riga in quanto è troppo piccolo, il nuovo controllo Button viene automaticamente spostato nella riga successiva.
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.
Modificare il valore della proprietà WrapContents del controllo FlowLayoutPanel su false. Si noti che i controlli figlio non scorrono più nella riga successiva, ma vengono spostati nella prima riga e troncati.
Modificare il valore della proprietà WrapContents del controllo FlowLayoutPanel su true. Si noti come i controlli figlio vadano di nuovo a capo nella riga successiva.
Diminuire la larghezza del controllo FlowLayoutPanel in modo che tutti i controlli Button vengano spostati nella prima colonna.
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 di 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

Modificare il valore della proprietà FlowDirection del controllo FlowLayoutPanel su TopDown. Si noti come i controlli figlio vengano ridisposti in una o più colonne, a seconda dell'altezza del controllo.
Ridimensionare FlowLayoutPanel in modo che l'altezza sia inferiore alla colonna dei controlli Button. Si noti come FlowLayoutPanel ridisponga 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à FlowDirection del controllo FlowLayoutPanel su RightToLeft. Si noti come le posizioni dei controlli figlio siano invertite. Si osservi il layout quando si cambia il valore della proprietà FlowDirection in BottomUp.

Inserimento delle interruzioni del flusso

Il controllo FlowLayoutPanel fornisce la proprietà FlowBreak per i controlli figlio. Impostando il valore della proprietà FlowBreak su true, il controllo FlowLayoutPanel smette di disporre i controlli secondo la direzione di flusso corrente ed esegue il ritorno a capo nella riga o colonna successiva.

Per inserire le interruzioni del flusso

Modificare il valore della proprietà FlowDirection del controllo FlowLayoutPanel su TopDown.
Selezionare uno dei controlli Button presenti al centro della colonna più a sinistra.
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 utilizzando 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 utilizzando l'ancoraggio e l'aggancio

Aumentare la dimensione di FlowLayoutPanel finché tutti i controlli Button non vengano disposti in una colonna.
Selezionare il primo controllo Button. Aumentarne la larghezza in modo che diventi circa il doppio dell'ampiezza degli altri controlli Button.
Selezionare il secondo controllo Button. Modificare il valore della proprietà Anchor su Right. Si noti che è stato spostato in modo che il bordo destro sia allineato con il bordo destro del primo controllo Button.
Modificare il valore della proprietà Anchor su Right e Left. Si noti come la dimensione diventi uguale all'ampiezza del primo controllo Button.
Selezionare il terzo controllo Button. Modificare il valore della proprietà Dock su Fill. Si noti come la dimensione diventi uguale all'ampiezza del primo controllo Button.

Disposizione dei controlli utilizzando 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 utilizzando le proprietà per spaziatura e margini

Modificare il valore della proprietà Dock del controllo FlowLayoutPanel su Fill. Se il form è sufficientemente ampio, i controlli Button verranno spostati nella prima colonna del controllo FlowLayoutPanel.
Modificare il valore della proprietà Padding del controllo FlowLayoutPanel espandendo la voce Padding nella finestra Proprietà e impostando la proprietà All su 20. Per ulteriori informazioni, vedere Procedura dettagliata: disposizione di controlli Windows Form utilizzando spaziatura, margini e la 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.
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 dei controlli tramite 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

Nella Casella degli strumenti, fare doppio clic sull'icona del controllo Button. Un nuovo controllo Button viene visualizzato nel controllo FlowLayoutPanel.
Fare doppio clic su più controlli nella Casella degli strumenti. Si noti come nel controllo FlowLayoutPanel vengano in successione visualizzati i nuovi controlli.

Inserimento di un controllo tramite il trascinamento della struttura

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

Per inserire un controllo tramite il trascinamento della struttura

Nella Casella degli strumenti fare clic sull'icona del controllo Button. Non trascinare nel form.
Spostare il puntatore del mouse sul controllo FlowLayoutPanel. 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. Si noti che il controllo Button viene creato nella prima posizione aperta del controllo FlowLayoutPanel.

Inserimento dei controlli tramite 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 utilizzando l'accento circonflesso

Dalla Casella degli strumenti trascinare un controllo Button nel controllo FlowLayoutPanel e puntare sullo spazio tra i due controlli Button. Viene disegnata una barra di inserimento indicante dove Button verrà inserito una volta rilasciato nel controllo FlowLayoutPanel. Prima di rilasciare il nuovo controllo Button in FlowLayoutPanel, spostare il puntatore del mouse intorno per osservare come si muove la barra di inserimento.
Rilasciare il nuovo controllo Button in FlowLayoutPanel. Si noti che il nuovo controllo Button non è allineato agli altri perché un valore differente è specificato per la proprietà Margin.

Riassegnazione dei controlli esistenti a un differente padre

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

Per assegnare un nuovo elemento padre ai controlli esistenti

Trascinare tre controlli Button dalla Casella degli strumenti nel form. Posizionarli uno accanto all'altro senza allinearli.
Nella Casella degli strumenti fare clic sull'icona del controllo FlowLayoutPanel. Non trascinare nel form.
Spostare il puntatore del mouse accanto ai tre controlli Button. Il puntatore assumerà la forma di una croce (selezione di precisione) associata all'icona del controllo FlowLayoutPanel.
Fare clic e tenere premuto il pulsante del mouse.
Trascinare il puntatore del mouse per disegnare la struttura del controllo FlowLayoutPanel. Disegnare la struttura intorno ai tre controlli Button.
Rilasciare il pulsante del mouse. I tre controlli Button vengono inseriti in FlowLayoutPanel.

Passaggi successivi

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

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.

Vedere anche

Condividi tramite