Procedura dettagliata: Disporre i controlli con spaziatura interna, margini e proprietà AutoSize

Articolo
10/19/2023

Per molte applicazioni è estremamente importante la sistemazione precisa dei controlli nel form. Progettazione Windows Form in Visual Studio offre numerosi strumenti di layout per eseguire questa operazione. Tre delle proprietà più importanti sono le Marginproprietà , Paddinge AutoSize , presenti in tutti i controlli Windows Form.

La proprietà Margin definisce lo spazio intorno al controllo per mantenere gli altri controlli a una specifica distanza dai bordi del controllo stesso.

La proprietà Padding definisce lo spazio all'interno di un controllo per mantenere il contenuto del controllo, ad esempio il valore della proprietà Text, a una specifica distanza dai bordi del controllo stesso.

L'illustrazione seguente mostra le proprietà Padding e Margin in un controllo.

Padding And Margin for Windows Forms Controls

La AutoSize proprietà indica a un controllo di ridimensionarsi automaticamente al relativo contenuto. Non verrà ridimensionato in modo da essere inferiore al valore della proprietà originale Size e verrà tenuto conto del valore della relativa Padding proprietà.

Prerequisiti

Per completare questa procedura dettagliata, è necessario Visual Studio.

Creare il progetto

In Visual Studio creare un progetto di applicazione Windows denominato LayoutExample.
Selezionare il modulo nella finestra di progettazione Windows Form.

Impostare i margini per i controlli

È possibile impostare la distanza predefinita tra i controlli usando la Margin proprietà . Quando si sposta un controllo abbastanza vicino a un altro controllo, verrà visualizzata una linea di allineamento che mostra i margini per i due controlli. Il controllo che si sta spostando si blocca anche sulla distanza definita dai margini.

Disporre i controlli nel form usando la proprietà Margin

Trascinare due Button controlli dalla casella degli strumenti nel form.
Selezionare uno dei Button controlli e spostarlo vicino all'altro fino a quando non vengono quasi toccati.

Osservare la linea di allineamento visualizzata tra di esse. Questa distanza è la somma dei valori dei due controlli Margin . Il controllo che si sta spostando su questa distanza. Per informazioni dettagliate, vedere Procedura dettagliata: Disposizione dei controlli su Windows Form uso di snapline.
Modificare la Margin proprietà di uno dei controlli espandendo la Margin voce nella finestra Proprietà e impostando la All proprietà su 20.
Selezionare uno dei Button controlli e spostarlo vicino all'altro.

La linea di allineamento che definisce la somma dei valori del margine è più lunga e che il controllo si blocca a una distanza maggiore dall'altro controllo.
Modificare la Margin proprietà del controllo selezionato espandendo la Margin voce nella finestra Proprietà e impostando la Top proprietà su 5.
Spostare il controllo selezionato sotto l'altro controllo e osservare che la linea di allineamento è più breve. Spostare il controllo selezionato a sinistra dell'altro controllo e osservare che la linea di allineamento mantiene il valore osservato nel passaggio 4.
È possibile impostare ognuno degli aspetti della Margin proprietà , Left, Top Right, , Bottom, su valori diversi oppure impostarli tutti sullo stesso valore con la All proprietà .

Impostare la spaziatura interna per i controlli

Per ottenere il layout preciso necessario per l'applicazione, i controlli contengono spesso controlli figlio. Quando si desidera specificare la prossimità del bordo del controllo figlio al bordo del controllo padre, utilizzare la proprietà del Padding controllo padre insieme alla proprietà del Margin controllo figlio. La Padding proprietà viene utilizzata anche per controllare la prossimità del contenuto di un controllo , ad esempio la proprietà di Text un Button controllo, ai relativi bordi.

Disporre i controlli nel form usando la spaziatura interna

Trascinare un controllo Button dalla Casella degli strumenti al form.
Modificare il valore della Button proprietà del AutoSize controllo su true.
Modificare la Padding proprietà espandendo la Padding voce nella finestra Proprietà e impostando la All proprietà su 5.

Il controllo si espande per fornire spazio per la nuova spaziatura interna.
Trascinare un controllo GroupBox dalla Casella degli strumenti al form. Trascinare un Button controllo dalla casella degli strumenti nel GroupBox controllo . Posizionare il Button controllo in modo che sia scaricato con l'angolo inferiore destro del GroupBox controllo.

Osservare le linee di allineamento visualizzate quando il Button controllo si avvicina ai bordi inferiore e destro del GroupBox controllo. Queste linee di allineamento corrispondono alla Margin proprietà dell'oggetto Button.
Modificare la GroupBox proprietà del Padding controllo espandendo la Padding voce nella finestra Proprietà e impostando la All proprietà su 20.
Selezionare il Button controllo all'interno del GroupBox controllo e spostarlo verso il centro di GroupBox.

Le linee di allineamento vengono visualizzate a una distanza maggiore dai bordi del GroupBox controllo. Questa distanza è la somma della Button proprietà del Margin controllo e della GroupBox proprietà del Padding controllo.

Controlli dimensioni automaticamente

In alcune applicazioni, le dimensioni di un controllo non saranno uguali in fase di esecuzione in fase di progettazione. Il testo di un Button controllo, ad esempio, può essere tratto da un database e la relativa lunghezza non è nota in anticipo.

Quando la AutoSize proprietà è impostata su true, il controllo verrà ridimensionato sul relativo contenuto. Per altre informazioni, vedere Panoramica della proprietà AutoSize.

Disporre i controlli nel form usando la proprietà AutoSize

Trascinare un controllo Button dalla Casella degli strumenti al form.
Modificare il valore della Button proprietà del AutoSize controllo su true.
Modificare la Button proprietà del Text controllo in Questo pulsante ha una stringa lunga per la relativa proprietà Text.

Quando si esegue il commit della modifica, il Button controllo viene ridimensionato per adattarsi al nuovo testo.
Trascinare un altro Button controllo dalla casella degli strumenti nel form.
Modificare la Button proprietà del Text controllo su "This button has a long string for its Text property".

Quando si esegue il commit della modifica, il Button controllo non viene ridimensionato e il testo viene ritagliato dal bordo destro del controllo.
Modificare la Padding proprietà espandendo la Padding voce nella finestra Proprietà e impostando la All proprietà su 5.

Il testo nell'interno del controllo viene ritagliato su tutti e quattro i lati.
Modificare la Button proprietà del AutoSize controllo su true.

Il Button controllo viene ridimensionato in modo da includere l'intera stringa. Inoltre, la spaziatura interna è stata aggiunta intorno al testo, causando l'espansione del Button controllo in tutte e quattro le direzioni.
Trascinare un controllo Button dalla Casella degli strumenti al form. Posizionarlo nell'angolo inferiore destro del form.
Modificare il valore della Button proprietà del AutoSize controllo su true.
Impostare la Button proprietà del Anchor controllo su Right, Bottom.
Modificare la Button proprietà del Text controllo su "This button has a long string for its Text property".

Quando si esegue il commit della modifica, il Button controllo viene ridimensionato verso sinistra. In generale, il ridimensionamento automatico aumenterà le dimensioni di un controllo nella direzione opposta all'impostazione della Anchor proprietà.

Proprietà AutoSize e AutoSizeMode

Alcuni controlli supportano la AutoSizeMode proprietà , che offre un controllo più granulare sul comportamento di ridimensionamento automatico di un controllo.

Utilizzare la proprietà AutoSizeMode

Trascinare un controllo Panel dalla Casella degli strumenti al form.
Impostare il valore della Panel proprietà del AutoSize controllo su true.
Trascinare un Button controllo dalla casella degli strumenti nel Panel controllo .
Posizionare il Button controllo nell'angolo inferiore destro del Panel controllo.
Selezionare il Panel controllo e afferrare il quadratino di ridimensionamento inferiore destro. Ridimensionare il Panel controllo in modo che sia più grande e più piccolo.

Nota

È possibile ridimensionare liberamente il Panel controllo, ma non è possibile ridimensionarlo più piccolo della posizione dell'angolo inferiore destro del Button controllo. Questo comportamento viene specificato dal valore predefinito della AutoSizeMode proprietà , ovvero GrowOnly.
Impostare il valore della Panel proprietà del AutoSizeMode controllo su GrowAndShrink.

Dimensioni del Panel controllo stesso per racchiudere il Button controllo. Non è possibile ridimensionare il Panel controllo.
Trascinare il Button controllo verso l'angolo superiore sinistro del Panel controllo.

Il Panel controllo viene ridimensionato in base alla Button nuova posizione del controllo.

Passaggi successivi

Esistono molte altre funzionalità di layout per la disposizione dei controlli nelle applicazioni Windows Form. Ecco alcune combinazioni che è possibile provare:

Compilare un modulo usando un TableLayoutPanel controllo . Per informazioni dettagliate, vedere Procedura dettagliata: Disposizione dei controlli su Windows Form Uso di tableLayoutPanel. Provare a modificare i valori della TableLayoutPanel proprietà del Padding controllo, nonché la Margin proprietà nei relativi controlli figlio.
Provare lo stesso esperimento usando un FlowLayoutPanel controllo . Per informazioni dettagliate, vedere Procedura dettagliata: Disposizione dei controlli in Windows Form Uso di flowLayoutPanel.
Sperimentare l'ancoraggio dei controlli figlio in un Panel controllo . La Padding proprietà è una realizzazione più generale della DockPadding proprietà ed è possibile soddisfare se stessi in questo caso inserendo un controllo figlio in un Panel controllo e impostando la proprietà del Dock controllo figlio su Fill. Impostare la Panel proprietà del Padding controllo su vari valori e prendere nota dell'effetto.