Procedura dettagliata: disposizione dei controlli in Windows Form utilizzando SnapLine
Aggiornamento: novembre 2007
Per molte applicazioni è estremamente importante la sistemazione precisa dei controlli nel form. A tale scopo, Progettazione Windows Form offre diversi strumenti di layout. Uno dei più importanti è la funzionalità SnapLine.
La funzionalità visualizza delle guide di allineamento che mostrano precisamente dove allineare i controlli con altri controlli e visualizzano le distanze consigliate tra i margini dei controlli, in base alle indicazioni dell'interfaccia utente di Windows. Per informazioni dettagliate, vedere User Interface Design and Development (informazioni in lingua inglese).
Le guide di allineamento semplificano l'allineamento dei controlli per un aspetto e un comportamento professionale e nitido.
Di seguito sono elencate le attività illustrate nella procedura dettagliata:
Creazione di un progetto Windows Form
Spaziatura e allineamento dei controlli utilizzando le guide di allineamento
Allineamento ai margini di un form e di un contenitore
Allineamento a controlli raggruppati
Utilizzo delle guide di allineamento per inserire un controllo definendo la dimensione
Utilizzo delle guide di allineamento durante il trascinamento di un controllo dalla Casella degli strumenti
Ridimensionamento dei controlli utilizzando le guide di allineamento
Allineamento di un'etichetta al testo di un controllo
Utilizzo delle guide di allineamento con l'esplorazione da tastiera
Pannelli layout e guide di allineamento
Disattivazione delle guide di allineamento
Al termine, si saranno acquisite le informazioni circa il ruolo di layout delle guide di allineamento.
.gif "Nota") 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 "SnaplineExample". Per informazioni dettagliate, vedere Procedura: creare un progetto applicazione Windows.
Selezionare il form in Progettazione form.
Spaziatura e allineamento dei controlli utilizzando le guide di allineamento
Le guide di allineamento forniscono un metodo accurato e intuitivo per allineare i controlli nel form. Le guide di allineamento vengono visualizzate quando si sposta uno o più controlli selezionati accanto a un altro controllo o gruppo di controlli per l'allineamento. La selezione verrà bloccata nella posizione suggerita quando la si sposta oltre gli altri controlli.
Per disporre i controlli utilizzando le guide di allineamento
Trascinare un controllo Button dalla Casella degli strumenti al form.
Spostare il controllo Button nell'angolo inferiore destro del form. Le guide di allineamento vengono visualizzate quando il controllo Button si avvicina ai bordi inferiore e destro del form. Le guide di allineamento visualizzano la distanza consigliata tra i bordi del controllo e del form.
Spostare il controllo Button intorno ai bordi del form e notare dove vengono visualizzate le guide di allineamento. Una volta terminato, spostare il controllo Button al centro del form.
Trascinare un altro controllo Button dalla Casella degli strumenti nel form.
Spostare il secondo controllo Button in modo che sia quasi allineato al primo. Si noti la guida di allineamento che viene visualizzata sulla linea di base del testo di entrambi i pulsanti mentre il controllo che si sta spostando si blocca in una posizione perfettamente allineata con l'altro controllo.
Spostare il secondo controllo Button in modo che si trovi direttamente sopra il primo. Le guide di allineamento vengono visualizzate lungo i bordi sinistro e destro di entrambi i pulsanti mentre il controllo che si sta spostando si blocca in una posizione perfettamente allineata con l'altro controllo.
Selezionare uno dei controlli Button e spostarlo accanto all'altro fino quasi a farli toccare. Si noti la guida di allineamento che viene visualizzata tra i controlli indicante la distanza consigliata tra i bordi dei controlli. Si noti inoltre che il controllo che si sta spostando si blocca in questa posizione.
Trascinare due controlli Panel dalla Casella degli strumenti nel form.
Spostare uno dei controlli Panel in modo che sia quasi allineato al primo. Le guide di allineamento vengono visualizzate lungo i bordi superiore e inferiore di entrambi i controlli mentre il controllo che si sta spostando si blocca in una posizione perfettamente allineata con l'altro controllo.
Allineamento ai margini di un form e di un contenitore
Le guide di allineamento consentono di allineare i controlli ai margini del form e del contenitore in modo coerente.
Per allineare i controlli ai margini del form e del contenitore
- Selezionare uno dei controlli Button e spostarlo vicino al bordo destro del form fino a visualizzare una guida di allineamento. La distanza della guida di allineamento dal bordo destro è costituita dalla somma dei valori della proprietà Margin del controllo e della proprietà Padding del form.
| Nota: |
|---|
Se la proprietà Padding del form è impostata su 0,0,0,0, in Progettazione Windows Form viene assegnato al form un valore Padding ombreggiato di 9,9,9,9. Per eseguire l'override di questo comportamento, assegnare un valore diverso da 0,0,0,0. |
Modificare il valore della proprietà Margin del controllo Button espandendo la voce Margin nella finestra Proprietà e impostando la proprietà All su 0. Per informazioni dettagliate, vedere Procedura dettagliata: disposizione di controlli Windows Form utilizzando spaziatura, margini e la proprietà AutoSize.
Spostare il controllo Button vicino al bordo destro del form fino a visualizzare una guida di allineamento. La distanza è ora stabilita dal valore della proprietà Padding del form.
Trascinare un controllo GroupBox dalla Casella degli strumenti al form.
Modificare il valore della proprietà Padding del controllo GroupBox espandendo la voce Padding nella finestra Proprietà e impostando la proprietà All su 10.
Trascinare un controllo Button dalla Casella degli strumenti nel controllo GroupBox.
Spostare il controllo Button vicino al bordo destro del controllo GroupBox fino a visualizzare una guida di allineamento. Spostare il controllo Button nel controllo GroupBox e osservare dove vengono visualizzate le guide di allineamento.
Allineamento a controlli raggruppati
È possibile utilizzare le guide di allineamento per allineare controlli raggruppati e non, in un controllo GroupBox.
Per allineare controlli raggruppati
Selezionare nel form due controlli. Spostare la selezione e notare le guide di allineamento che vengono visualizzate tra la selezione e gli altri controlli.
Trascinare un controllo GroupBox dalla Casella degli strumenti al form.
Trascinare un controllo Button dalla Casella degli strumenti nel controllo GroupBox.
Selezionare uno dei controlli Button e spostarlo intorno al controllo GroupBox. Le guide di allineamento vengono visualizzate ai bordi del controllo GroupBox. Vengono inoltre visualizzate le guide di allineamento sui bordi del controllo Button contenuto nel controllo GroupBox. Anche i controlli figlio di un controllo contenitore supportano le guide di allineamento.
Utilizzo delle guide di allineamento per inserire un controllo definendo la dimensione
Le guide di allineamento consentono di allineare i controlli quando vengono inseriti per la prima volta in un form.
Per utilizzare le guide di allineamento per inserire un controllo definendone la dimensione
Nella Casella degli strumenti fare clic sull'icona del controllo Button. Non trascinare nel form.
Spostare il puntatore del mouse sull'area di progettazione del form. Il puntatore assumerà la forma di una croce (selezione di precisione) associata all'icona del controllo Button. Inoltre, vengono visualizzate le guide di allineamento per indicare le posizioni allineate per il controllo Button.
Fare clic e tenere premuto il pulsante del mouse.
Trascinare il puntatore del mouse sul form. Viene disegnata una struttura indicante la posizione e la dimensione del controllo.
Trascinare il puntatore fino ad allinearlo con un altro controllo del form. Viene visualizzata una guida per indicare l'allineamento.
Rilasciare il pulsante del mouse. Il controllo viene creato utilizzando la posizione e la dimensione indicate dalla struttura.
Utilizzo delle guide di allineamento durante il trascinamento di un controllo dalla Casella degli strumenti
Le guide di allineamento consentono di allineare i controlli quando vengono trascinati dalla Casella degli strumenti nel form.
Per utilizzare le guide di allineamento durante il trascinamento di un controllo dalla Casella degli strumenti
Trascinare un controllo Button dalla Casella degli strumenti nel form, senza rilasciare il pulsante del mouse.
Spostare il puntatore del mouse sull'area di progettazione del form. Il puntatore cambia per indicare la posizione in cui il nuovo controlloButton verrà creato.
Trascinare il puntatore del mouse sul form. Vengono visualizzate le guide di allineamento per indicare le posizioni allineate per il controllo Button. Trovare una posizione allineata ad altri controlli.
Rilasciare il pulsante del mouse. Il controllo viene creato utilizzando la posizione indicata dalle guide di allineamento.
Ridimensionamento dei controlli utilizzando le guide di allineamento
Le guide di allineamento consentono di allineare i controlli durante il ridimensionamento.
Per ridimensionare un controllo utilizzando le guide di allineamento
Trascinare un controllo Button dalla Casella degli strumenti al form.
Ridimensionare il controllo Button agganciando uno dei quadratini di ridimensionamento presenti negli angoli del controllo e trascinandolo. Per informazioni dettagliate, vedere Procedura: ridimensionare i controlli di un Windows Form.
Trascinare il quadratino di ridimensionamento fino ad allineare uno dei bordi del controllo Button a un altro controllo. Viene visualizzata una guida di allineamento. Il quadratino di ridimensionamento si blocca nella posizione indicata dalla guida di allineamento.
Ridimensionare il controllo Button in altre direzioni e allineare il quadratino di ridimensionamento ad altri controlli. Si noti come le guide di allineamento vengano visualizzate in diverse direzioni per indicare l'allineamento.
Allineamento di un'etichetta al testo di un controllo
Alcuni controlli prevedono una guida per l'allineamento di altri controlli al testo visualizzato.
Per allineare un'etichetta al testo di un controllo
Trascinare un controllo TextBox da TextBox nel form. Quando si rilascia il controllo TextBox nel form, fare clic sull'icona dello smart tag e selezionare l'opzione Usa textBox1 come testo. Per informazioni dettagliate, vedere Procedura dettagliata: esecuzione di attività comuni utilizzando gli smart tag nei controlli Windows Form.
Modificare il valore della proprietà AutoSize del controllo Label su true. I bordi del controllo vengono modificati in base al testo da visualizzare.
Spostare il controllo Labela sinistra del controllo TextBox in modo che sia allineato al bordo inferiore del controllo TextBox. Si noti la guida di allineamento che viene visualizzata lungo i bordi inferiori dei due controlli.
Spostare il controllo Labelleggermente in avanti fino ad allineare il testo di Labele il testo di TextBox. Viene visualizzata una guida di allineamento in uno stile differente che indica quando i campi testo di entrambi i controlli sono allineati.
Utilizzo delle guide di allineamento con l'esplorazione da tastiera
Le guide di allineamento consentono di allineare i controlli quando vengono disposti utilizzando i tasti di direzione della tastiera.
Per utilizzare le guide di allineamento con l'esplorazione da tastiera
Trascinare un controllo Button dalla Casella degli strumenti al form. Posizionarlo nell'angolo superiore sinistro del form.
Premere CTRL + freccia GIÙ. Il controllo viene spostato nel form verso il basso, nella prima posizione disponibile per l'allineamento orizzontale.
Premere CTRL + freccia GIÙ finché il controllo non raggiunge la fine del form. Si notino le posizioni occupate dal controllo mentre si sposta verso il basso all'interno del form.
Premere CTRL + freccia DESTRA. Il controllo viene spostato nel form, nella prima posizione disponibile per l'allineamento verticale.
Premere CTRL + freccia DESTRA finché il controllo non raggiunge il lato destro del form. Si notino le posizioni occupate dal controllo mentre si sposta all'interno del form.
Spostare il controllo nel form con una combinazione di tasti di direzione. Si notino le posizioni occupate dal controllo e le relative guide di allineamento.
Premere MAIUSC + un tasto di direzione per ridimensionare il controllo Button in incrementi di un pixel.
Premere CTRL + MAIUSC + un tasto di direzione per ridimensionare il controllo Button in incrementi della guida di allineamento.
Pannelli layout e guide di allineamento
Le guide di allineamento sono disattivate nei pannelli layout.
Per disattivare selettivamente le guide di allineamento
Trascinare un controllo TableLayoutPanel dalla Casella degli strumenti al form.
Fare doppio clic sull'icona del controllo Button nella Casella degli strumenti. Viene visualizzato un nuovo controllo pulsante nella prima cella del controllo TableLayoutPanel.
Fare doppio clic sull'icona del controllo Button nella Casella degli strumenti altre due volte. In tal modo viene lasciata una cella vuota nel controllo TableLayoutPanel.
Trascinare un controllo Button dalla Casella degli strumenti nella cella vuota del controllo TableLayoutPanel. Non viene visualizzata alcuna guida di allineamento.
Trascinare il controllo Button fuori dal controllo TableLayoutPanel e spostarlo all'interno del controllo TableLayoutPanel. Vengono di nuovo visualizzate le guide di allineamento.
Disattivazione delle guide di allineamento
Per impostazione predefinita le guide di allineamento sono attivate. È possibile disattivarle selettivamente oppure nell'ambiente di progettazione.
Per disattivare selettivamente le guide di allineamento
Premere ALT mentre si sposta un controllo all'interno del form.
Si noti che non viene visualizzata alcuna guida di allineamento e il controllo non si blocca in alcuna posizione di allineamento potenziale.
Per disattivare le guide di allineamento nell'ambiente di progettazione
Aprire la finestra di dialogo Opzioni dal menu Strumenti. Aprire la finestra di dialogo Progettazione Windows Form. Per informazioni dettagliate, vedere Generale, Progettazione Windows Form, finestra di dialogo Opzioni.
Scegliere il nodo Generale. Nella sezione Modalità layout, cambiare la selezione da SnapLines a SnapToGrid.
Scegliere OK per applicare le impostazioni.
Selezionare un controllo nel form e spostarlo intorno agli altri controlli. Le guide di allineamento non vengono visualizzate.
Passaggi successivi
Le guide di allineamento offrono modalità intuitive per l'allineamento dei controlli nel form. Per approfondire l'argomento, si consiglia di effettuare le seguenti operazioni:
Provare a nidificare un controllo GroupBox in un altro controllo GroupBox. Inserire un controllo Button in un controllo figlio GroupBox e un altro all'interno del controllo padre GroupBox. Spostare i controlli Button per vedere come le guide di allineamento attraversano i limiti del contenitore.
Creare una colonna di controlli TextBox e una corrispondente colonna di controlli Label. Impostare il valore della proprietà AutoSize del controllo Label su true. Utilizzare le guide di allineamento per spostare i controlli Labelin modo che il testo visualizzato sia allineato al testo dei controlli TextBox.
Per informazioni sulla progettazione di interfacce utente Windows, vedere Microsoft Windows User Experience, Official Guidelines for User Interface Developers and Designers Redmond, WA: Microsoft Press, 1999. (USBN: 0-7356-0566-1) sul sito Web MSDN (). (informazioni in lingua inglese).
Vedere anche
Attività
Procedura dettagliata: disposizione dei controlli in Windows Form utilizzando FlowLayoutPanel
Procedura dettagliata: disposizione dei controlli in Windows Form utilizzando TableLayoutPanel