Posizione e layout dei controlli (Windows Form .NET)
Il posizionamento dei controlli in Windows Form viene determinato non solo dal controllo, ma anche dall'elemento padre del controllo. Questo articolo descrive le diverse impostazioni fornite dai controlli e i diversi tipi di contenitori padre che influiscono sul layout.
Posizione fissa e dimensioni
La posizione in cui viene visualizzato un controllo in un elemento padre è determinata dal valore della proprietà Location rispetto all'angolo superiore sinistro della superficie padre. La coordinata della posizione in alto a sinistra nell'elemento padre è (x0,y0). La dimensione del controllo è determinata dalla proprietà Size e rappresenta la larghezza e l'altezza del controllo.
Quando un controllo viene aggiunto a un elemento padre che applica il posizionamento automatico, la posizione e le dimensioni del controllo vengono modificate. In questo caso, la posizione e le dimensioni del controllo potrebbero non essere regolate manualmente, a seconda del tipo di elemento padre.
Le proprietà MaximumSize e MinimumSize consentono di impostare lo spazio minimo e massimo che un controllo può usare.
Margine e riempimento
Esistono due proprietà del controllo che consentono di posizionare in modo preciso i controlli: Margin e Padding.
La proprietà Margin definisce lo spazio intorno al controllo che mantiene gli altri controlli a una distanza specificata dai bordi del controllo.
La proprietà Padding definisce lo spazio all'interno di un controllo che mantiene il contenuto del controllo, ad esempio il valore della proprietà Text, a una distanza specificata dai suoi bordi.
Nella figura seguente vengono illustrate le proprietà Margin e Padding di un controllo.
Il Designer di Visual Studio rispetterà queste proprietà quando si posizionano e si ridimensionano i controlli. Le linee guida appaiono per aiutarti a rimanere al di fuori del margine specificato di un controllo. Ad esempio, Visual Studio visualizza lo snapline quando si trascina un controllo a fianco di un altro controllo.
Posizionamento e dimensioni automatiche
I controlli possono essere posizionati automaticamente all'interno del relativo elemento padre. Alcuni contenitori principali forzano il posizionamento mentre altri rispettano le impostazioni di controllo che guidano il posizionamento. Esistono due proprietà in un controllo che consentono il posizionamento automatico e le dimensioni all'interno di un elemento padre: Dock e Anchor.
L'ordine di disegno può influire sul posizionamento automatico. L'ordine in cui un controllo viene disegnato è determinato dall'indice del controllo nell'insieme padre Controls. Questo indice è noto come Z-order. Ogni controllo viene disegnato nell'ordine inverso in cui compaiono nella raccolta. Ciò significa che la raccolta è una raccolta disegnata per la prima volta e l'ultima raccolta disegnata.
Le proprietà MinimumSize e MaximumSize consentono di impostare lo spazio minimo e massimo che un controllo può usare.
Dock
La proprietà Dock imposta il bordo del controllo allineato al lato corrispondente dell'elemento padre e il modo in cui il controllo viene ridimensionato all'interno dell'elemento padre.
Quando un controllo è ancorato, il contenitore determina lo spazio che deve occupare, ridimensiona e posiziona il controllo. La larghezza e l'altezza del controllo vengono comunque rispettate in base allo stile di ancoraggio. Ad esempio, se il controllo è ancorato in alto, il Height del controllo viene rispettato, ma il Width viene regolato automaticamente. Se un controllo è ancorato a sinistra, il Width del controllo viene rispettato ma il Height viene regolato automaticamente.
Il Location del controllo non può essere impostato manualmente poiché il docking di un controllo ne controlla automaticamente la posizione.
Il Z-order del controllo influisce sull'ancoraggio. Man mano che i controlli ancorati vengono disposti, utilizzano lo spazio disponibile. Ad esempio, se un controllo viene disegnato per primo e ancorato in alto, occupa l'intera larghezza del contenitore. Se un controllo successivo è ancorato a sinistra, ha meno spazio verticale disponibile.
Se il Z-order del controllo viene invertito, il controllo ancorato a sinistra ora ha più spazio iniziale disponibile. Il controllo usa l'intera altezza del contenitore. Il controllo ancorato alla parte superiore ha meno spazio orizzontale disponibile.
Man mano che il contenitore aumenta e si riduce, i controlli ancorati al contenitore vengono riposizionati e ridimensionati per mantenere le posizioni e le dimensioni applicabili.
Se più controlli sono ancorati allo stesso lato del contenitore, vengono impilati in base al relativo Z-order.
Ancora
L'ancoraggio di un controllo consente di collegare il controllo a uno o più lati del contenitore padre. Quando il contenitore cambia dimensioni, qualsiasi controllo figlio manterrà la sua distanza rispetto al lato ancorato.
Un controllo può essere ancorato a uno o più lati, senza restrizioni. L'ancoraggio viene impostato con la proprietà Anchor.
Ridimensionamento automatico
La proprietà AutoSize consente a un controllo di modificarne le dimensioni, se necessario, in base alle dimensioni specificate dalla proprietà PreferredSize. Modifichi il comportamento di ridimensionamento per controlli specifici impostando la proprietà AutoSizeMode.
Solo alcuni controlli supportano la proprietà AutoSize. Inoltre, alcuni controlli che supportano la proprietà AutoSize supportano anche la proprietà AutoSizeMode.
| Comportamento sempre vero | Descrizione |
|---|---|
| Il ridimensionamento automatico è una funzionalità di runtime. | Ciò significa che non crea né riduce un controllo e quindi non produce più alcun effetto. |
| Se un controllo modifica le dimensioni, il valore della relativa proprietà Location rimane sempre costante. | Quando il contenuto di un controllo aumenta, il controllo cresce verso destra e verso il basso. I controlli non si estendono a sinistra. |
Le proprietà Dock e Anchor vengono rispettate quando AutoSize è true. |
Il valore della proprietà Location del controllo viene modificato in base al valore corretto. Il controllo Label è l'eccezione a questa regola. Quando si imposta il valore della proprietà AutoSize di un controllo Label ancorato su true, il controllo Label non si espanderà. |
| Le proprietà MaximumSize e MinimumSize di un controllo vengono sempre rispettate, indipendentemente dal valore della relativa proprietà AutoSize. | Le proprietà MaximumSize e MinimumSize non sono interessate dalla proprietà AutoSize. |
| Nessuna dimensione minima impostata per impostazione predefinita. | Ciò significa che se un controllo è impostato per ridursi in AutoSize e non ha contenuto al suo interno, il valore della relativa proprietà Size è (0x,0y). In questo caso, il controllo si ridurrà a un punto e non sarà facilmente visibile. |
| Se un controllo non implementa il metodo GetPreferredSize, il metodo GetPreferredSize restituisce l'ultimo valore assegnato alla proprietà Size. | Ciò significa che l'impostazione di AutoSize su true non avrà alcun effetto. |
| Un controllo in una cella TableLayoutPanel si riduce sempre in modo da adattarsi alla cella fino a quando non viene raggiunto il MinimumSize. | Questa dimensione viene applicata come dimensione massima. Non è il caso quando la cella è parte di una riga o colonna AutoSize. |
Proprietà AutoSizeMode
La proprietà AutoSizeMode offre un controllo più granulare sul comportamento AutoSize predefinito. La proprietà AutoSizeMode specifica il modo in cui un controllo si adatta al relativo contenuto. Il contenuto, ad esempio, potrebbe essere il testo di un controllo Button o dei controlli figlio per un contenitore.
L'elenco seguente mostra i valori AutoSizeMode e il relativo comportamento.
-
Il controllo si espande o si riduce per includere il suo contenuto.
I valori MinimumSize e MaximumSize vengono rispettati, ma il valore corrente della proprietà Size viene ignorato.
Si tratta dello stesso comportamento dei controlli dotati della proprietà AutoSize e privi della proprietà
AutoSizeMode. -
Il controllo si espande quanto necessario per contenere i suoi contenuti, ma non si ridurrà a una dimensione inferiore a quella specificata dalla sua proprietà Size.
Questo è il valore predefinito per
AutoSizeMode.
Controlli che supportano la proprietà AutoSize
Nella tabella seguente viene descritto il livello di supporto per il ridimensionamento automatico in base al controllo:
| Controllo |
AutoSize supportato |
AutoSizeMode supportato |
|---|---|---|
| Button | ✔️ | ✔️ |
| CheckedListBox | ✔️ | ✔️ |
| FlowLayoutPanel | ✔️ | ✔️ |
| Form | ✔️ | ✔️ |
| GroupBox | ✔️ | ✔️ |
| Panel | ✔️ | ✔️ |
| TableLayoutPanel | ✔️ | ✔️ |
| CheckBox | ✔️ | ❌ |
| DomainUpDown | ✔️ | ❌ |
| Label | ✔️ | ❌ |
| LinkLabel | ✔️ | ❌ |
| MaskedTextBox | ✔️ | ❌ |
| NumericUpDown | ✔️ | ❌ |
| RadioButton | ✔️ | ❌ |
| TextBox | ✔️ | ❌ |
| TrackBar | ✔️ | ❌ |
| CheckedListBox | ❌ | ❌ |
| ComboBox | ❌ | ❌ |
| DataGridView | ❌ | ❌ |
| DateTimePicker | ❌ | ❌ |
| ListBox | ❌ | ❌ |
| ListView | ❌ | ❌ |
| MaskedTextBox | ❌ | ❌ |
| MonthCalendar | ❌ | ❌ |
| ProgressBar | ❌ | ❌ |
| PropertyGrid | ❌ | ❌ |
| RichTextBox | ❌ | ❌ |
| SplitContainer | ❌ | ❌ |
| TabControl | ❌ | ❌ |
| TabPage | ❌ | ❌ |
| TreeView | ❌ | ❌ |
| WebBrowser | ❌ | ❌ |
| ScrollBar | ❌ | ❌ |
Ridimensionamento automatico nell'ambiente di progettazione
Nella tabella seguente viene descritto il comportamento di ridimensionamento di un controllo in fase di progettazione, in base al valore delle relative proprietà AutoSize e AutoSizeMode.
Eseguire l'override della proprietà SelectionRules per determinare se un determinato controllo si trova in uno stato ridimensionabile dall'utente. Nella tabella seguente "non è possibile ridimensionare" significa solo Moveable, "può ridimensionare" significa AllSizeable e Moveable.
impostazione AutoSize |
impostazione AutoSizeMode |
Comportamento |
|---|---|---|
true |
Proprietà non disponibile. | L'utente non può ridimensionare il controllo in fase di progettazione, ad eccezione dei controlli seguenti: - TextBox - MaskedTextBox - RichTextBox - TrackBar |
true |
GrowAndShrink | L'utente non può ridimensionare il controllo in fase di progettazione. |
true |
GrowOnly | L'utente può ridimensionare il controllo in fase di progettazione. Quando la proprietà Size è impostata, l'utente può aumentare solo le dimensioni del controllo. |
false o AutoSize è nascosto |
Non applicabile. | L'utente può ridimensionare il controllo in fase di progettazione. |
Nota
Per ottimizzare la produttività, il Designer di Windows Forms in Visual Studio oscura la proprietà AutoSize per la classe Form. In fase di progettazione, il form si comporta come se la proprietà AutoSize sia impostata su false, indipendentemente dall'impostazione effettiva. In fase di esecuzione, non viene effettuata alcuna sistemazione speciale e la proprietà AutoSize viene applicata come specificato dall'impostazione della proprietà.
Contenitore: modulo
Il Form è l'oggetto principale di Windows Form. Un'applicazione Windows Form in genere avrà un modulo visualizzato in qualsiasi momento. I moduli contengono controlli e rispettano, per il posizionamento manuale, le proprietà Location e Size del controllo. I moduli rispondono anche alla proprietà Dock per il posizionamento automatico.
Nella maggior parte dei casi, un modulo avrà delle maniglie sui bordi che consentono all'utente di ridimensionare il modulo. La proprietà Anchor di un controllo consentirà di aumentare e ridurre il controllo man mano che il form viene ridimensionato.
Contenitore: Pannello
Il controllo Panel è simile a un modulo in quanto raggruppa semplicemente i controlli. Supporta gli stessi stili di posizionamento manuali e automatici che un modulo esegue. Per altre informazioni, vedere la sezione Container: Form.
Un pannello si integra perfettamente con l'elemento padre e elimina qualsiasi area di un controllo che cade al di fuori dei limiti del pannello. Se un controllo non rientra nei limiti del pannello e AutoScroll è impostato su true, vengono visualizzate le barre di scorrimento e l'utente può scorrere il pannello.
A differenza del controllo della casella di gruppo e del controllo, un pannello non ha un titolo e un bordo.
L'immagine precedente include un pannello con la proprietà BorderStyle impostata per illustrare i limiti del pannello.
Contenitore: Casella di gruppo
Il controllo GroupBox fornisce un raggruppamento identificabile per altri controlli. In genere, si usa una casella di gruppo per suddividere un modulo per funzione. Ad esempio, potrebbe essere presente un modulo che rappresenta le informazioni personali e i campi correlati a un indirizzo verranno raggruppati. In fase di progettazione, è facile spostare la casella di gruppo insieme ai controlli che essa contiene.
La casella di gruppo supporta gli stessi stili di posizionamento manuali e automatici esistente in un modulo. Per altre informazioni, vedere la sezione Container: Form. Una casella di gruppo taglia anche qualsiasi parte di un controllo che non rientra nei limiti del pannello.
A differenza del pannello di controllo , una casella di gruppo non ha la capacità di scorrere il contenuto e visualizzare le barre di scorrimento.
Contenitore: Layout a flusso
Il controllo FlowLayoutPanel dispone i propri contenuti in un flusso orizzontale o verticale. È possibile avvolgere i contenuti del controllo da una riga a quella successiva o da una colonna a quella successiva. In alternativa, è possibile ritagliare anziché avvolgere i contenuti.
È possibile specificare la direzione del flusso impostando il valore della proprietà FlowDirection. Il controllo FlowLayoutPanel inverte correttamente la direzione del flusso nei layout da destra a sinistra (RTL). È anche possibile specificare se i contenuti del controllo FlowLayoutPanel vengano effettuati il wrapping o il ritaglio impostando il valore della proprietà WrapContents.
Il controllo FlowLayoutPanel si ridimensiona automaticamente in base ai propri contenuti quando imposti la proprietà AutoSize su true. Fornisce inoltre una proprietà FlowBreak ai controlli figlio. Se si imposta il valore della proprietà FlowBreak su true, il controllo FlowLayoutPanel interrompe la disposizione dei controlli nella direzione corrente del flusso e passa alla riga o alla colonna successiva.
L'immagine precedente include due controlli FlowLayoutPanel con la proprietà BorderStyle impostata per illustrare i limiti del controllo.
Contenitore: disposizione della tabella
Il controllo TableLayoutPanel dispone il relativo contenuto in una griglia. Poiché il layout viene eseguito sia in fase di progettazione che in fase di esecuzione, può cambiare in modo dinamico man mano che cambia l'ambiente dell'applicazione. In questo modo i controlli nel pannello possono essere ridimensionati in modo proporzionale, in modo da poter rispondere alle modifiche, ad esempio il ridimensionamento del controllo padre o la modifica della lunghezza del testo a causa della localizzazione.
Qualsiasi controllo Windows Forms può essere figlio del controllo TableLayoutPanel, incluse altre istanze di TableLayoutPanel. In questo modo è possibile creare layout sofisticati che si adattano alle modifiche in fase di esecuzione.
È anche possibile gestire la direzione di espansione (orizzontale o verticale) dopo che il controllo TableLayoutPanel è stato riempito di controlli figlio. Per impostazione predefinita, il controllo TableLayoutPanel si espande verso il basso aggiungendo righe.
È possibile controllare le dimensioni e lo stile delle righe e delle colonne usando le proprietà RowStyles e ColumnStyles. È possibile impostare singolarmente le proprietà delle righe o delle colonne.
Il controllo TableLayoutPanel aggiunge le proprietà seguenti ai relativi controlli figlio: Cell, Column, Row, ColumnSpane RowSpan.
L'immagine precedente include una tabella con la proprietà CellBorderStyle impostata per illustrare i limiti di ogni cella.
Contenitore: Contenitore diviso
Il controllo SplitContainer Windows Form può essere considerato come un controllo composito; si tratta di due pannelli separati da una barra mobile. Quando il puntatore del mouse si trova sulla barra, il puntatore cambia forma per indicare che la barra è mobile.
Con il controllo SplitContainer è possibile creare interfacce utente complesse; spesso, una selezione in un pannello determina quali oggetti vengono visualizzati nell'altro pannello. Questa disposizione è efficace per la visualizzazione e l'esplorazione delle informazioni. La presenza di due pannelli consente di aggregare le informazioni nelle aree e la barra o "splitter", semplifica il ridimensionamento dei pannelli da parte degli utenti.
L'immagine precedente ha un contenitore diviso per creare un riquadro sinistro e destro. Il riquadro destro contiene un secondo contenitore suddiviso con il Orientation impostato su Vertical. La proprietà BorderStyle è impostata per illustrare i limiti di ogni pannello.
Contenitore: controllo a schede
Il TabControl visualizza più schede, ad esempio i divisori in un notebook o le etichette in un set di cartelle in un archivio. Le schede possono contenere immagini e altri controlli. Utilizzare il controllo scheda per creare il tipo di finestra di dialogo a più pagine che appare in varie parti del sistema operativo Windows, ad esempio nel Pannello di Controllo e nelle Proprietà di Visualizzazione. Inoltre, il TabControl può essere usato per creare pagine delle proprietà, che vengono usate per impostare un gruppo di proprietà correlate.
La proprietà più importante di TabControl è TabPages, che contiene le schede individuali. Ogni singola scheda è un oggetto TabPage.
.NET Desktop feedback