Procedura dettagliata: Disporre i controlli su Windows Form usando le guide di allineamento

  • Articolo

Per molte applicazioni è estremamente importante la sistemazione precisa dei controlli nel form. Progettazione Windows Form offre numerosi strumenti di layout per eseguire questa operazione. Una delle più importanti è la SnapLine funzionalità.

Le linee di allineamento mostrano esattamente dove allineare i controlli con altri controlli. Mostrano anche le distanze consigliate per i margini tra i controlli, come specificato dalle linee guida dell'interfaccia utente di Windows.

Le linee di allineamento semplificano l'allineamento dei controlli, per aspetto e comportamento nitidi e professionali (aspetto e aspetto).

Creare il progetto

  1. In Visual Studio creare un progetto di applicazione basato su Windows denominato "SnaplineExample".

  2. Selezionare il form in Progettazione form.

Spaziatura e allineamento dei controlli

Le linee di allineamento offrono un modo accurato e intuitivo per allineare i controlli nel form. Vengono visualizzati quando si sposta un controllo o un controllo selezionato vicino a una posizione allineata a un altro controllo o set di controlli. La selezione verrà "agganciato" alla posizione suggerita mentre la si sposta oltre gli altri controlli.

Per disporre i controlli usando le guide di allineamento

  1. Trascinare un controllo Button dalla Casella degli strumenti al form.

  2. Spostare il Button controllo nell'angolo inferiore destro del form. Si notino le linee di allineamento visualizzate mentre il Button controllo si avvicina ai bordi inferiore e destro del form. Queste linee di allineamento visualizzano la distanza consigliata tra i bordi del controllo e il form.

  3. Spostare il Button controllo intorno ai bordi del form e notare dove vengono visualizzate le linee di allineamento. Al termine, spostare il Button controllo vicino al centro del form.

  4. Trascinare un altro Button controllo dalla casella degli strumenti nel form.

  5. Spostare il secondo Button controllo fino a quando non è quasi di livello con il primo. Si noti la linea di allineamento visualizzata nella linea di base del testo di entrambi i pulsanti e si noti che il controllo che si sta spostando in una posizione esattamente a livello con l'altro controllo.

  6. Spostare il secondo Button controllo fino a quando non viene posizionato direttamente sopra il primo. Si notino le linee di allineamento visualizzate lungo i bordi sinistro e destro di entrambi i pulsanti e si noti che il controllo che si sta spostando in una posizione esattamente allineata con l'altro controllo.

  7. Selezionare uno dei Button controlli e spostarlo vicino all'altro fino a quando non vengono quasi toccati. Prendere nota della linea di allineamento visualizzata tra di esse. Questa distanza è la distanza consigliata tra i bordi dei controlli. Si noti anche che il controllo che si sta spostando in questa posizione.

  8. Trascinare due Panel controlli dalla casella degli strumenti nel form.

  9. Spostare uno dei Panel controlli fino a quando non è quasi di livello con il primo. Si notino le linee di allineamento visualizzate lungo i bordi superiore e inferiore di entrambi i controlli e si noti che il controllo che si sta spostando in una posizione esattamente a livello con l'altro controllo.

Allinea ai margini del modulo e del contenitore

Le linee di allineamento consentono di allineare i controlli ai margini del modulo e del contenitore in modo coerente.

  1. Selezionare uno dei Button controlli e spostarlo vicino al bordo destro della maschera fino a quando non viene visualizzata una linea di allineamento. La distanza della linea di allineamento dal bordo destro è la somma della proprietà del Margin controllo e dei valori delle proprietà della Padding maschera.

    Nota

    Se la proprietà della Padding maschera è impostata su 0,0,0,0, la finestra di progettazione Windows Form assegna al modulo un valore ombreggiato Padding pari a 9,9,9,9. Per eseguire l'override di questo comportamento, assegnare un valore diverso da 0,0,0,0.

  2. Modificare il valore della Button proprietà del Margin controllo espandendo la Margin voce nella finestra Proprietà e impostando la All proprietà su 0. Per informazioni dettagliate, vedere Procedura dettagliata: Layout dei controlli Windows Form con spaziatura interna, margini e proprietà AutoSize.

  3. Spostare il Button controllo vicino al bordo destro della maschera fino a quando non viene visualizzata una linea di allineamento. Questa distanza viene ora assegnata dal valore della proprietà della Padding maschera.

  4. Trascinare un controllo GroupBox dalla Casella degli strumenti al form.

  5. Modificare il valore della GroupBox proprietà del Padding controllo espandendo la Padding voce nella finestra Proprietà e impostando la All proprietà su 10.

  6. Trascinare un Button controllo dalla casella degli strumenti nel GroupBox controllo .

  7. Spostare il Button controllo vicino al bordo destro del GroupBox controllo fino a quando non viene visualizzata una linea di allineamento. Spostare il Button controllo all'interno del GroupBox controllo e notare dove vengono visualizzate le guide di allineamento.

Allinea ai controlli raggruppati

È possibile utilizzare le linee di allineamento per allineare i controlli raggruppati e i controlli all'interno di un GroupBox controllo .

  1. Selezionare due dei controlli nel form. Spostare la selezione e prendere nota delle linee di allineamento visualizzate tra la selezione e gli altri controlli.

  2. Trascinare un controllo GroupBox dalla Casella degli strumenti al form.

  3. Trascinare un Button controllo dalla casella degli strumenti nel GroupBox controllo .

  4. Selezionare uno dei Button controlli e spostarlo all'interno del GroupBox controllo. Si notino le linee di allineamento visualizzate ai bordi del GroupBox controllo. Si notino anche le linee di allineamento visualizzate ai bordi del Button controllo contenuto nel GroupBox controllo . I controlli figlio di un controllo contenitore supportano anche le guide di allineamento.

Usare le linee di allineamento per posizionare un controllo delineandone le dimensioni

  1. Nella Casella degli strumentifare clic sull'icona del controllo Button . Non trascinarla nel form.

  2. Spostare il puntatore del mouse sull'area di progettazione della maschera. Osservare che il puntatore assume la forma di un mirino con l'icona del controllo Button associata. Si notino anche le linee di allineamento che appaiono per suggerire posizioni allineate per il Button controllo.

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

  4. Trascinare il puntatore del mouse intorno al form. Si noti che viene disegnato un contorno, che indica la posizione e le dimensioni del controllo.

  5. Trascinare il puntatore fino a quando non viene allineato con un altro controllo nel form. Si noti che viene visualizzata una linea di allineamento per indicare l'allineamento.

  6. Rilasciare il pulsante del mouse. Il controllo viene creato in corrispondenza della posizione e delle dimensioni indicate dalla struttura.

Usare le linee di allineamento quando si trascina un controllo dalla casella degli strumenti

  1. Trascinare un Button controllo dalla casella degli strumenti nel form, ma non rilasciare il pulsante del mouse.

  2. Spostare il puntatore del mouse sull'area di progettazione della maschera. Si noti che il puntatore cambia per indicare la posizione in cui verrà creato il nuovo Button controllo.

  3. Trascinare il puntatore del mouse intorno al form. Si notino le linee di allineamento visualizzate per suggerire posizioni allineate per il Button controllo. Trovare una posizione allineata ad altri controlli.

  4. Rilasciare il pulsante del mouse. Il controllo viene creato nella posizione indicata dalle guide di allineamento.

Ridimensionare un controllo usando le guide di allineamento

  1. Trascinare un controllo Button dalla Casella degli strumenti al form.

  2. Ridimensionare il Button controllo afferrando uno dei quadratini di ridimensionamento degli angoli e trascinando. Per informazioni dettagliate, vedere Procedura: Ridimensionare i controlli in Windows Form.

  3. Trascinare il quadratino di ridimensionamento fino a quando uno dei Button bordi del controllo non è allineato a un altro controllo. Si noti che viene visualizzata una linea di allineamento. Si noti anche che il punto di manipolazione di ridimensionamento viene agganciato alla posizione indicata dalla linea di allineamento.

  4. Ridimensionare il Button controllo in direzioni diverse e allineare l'handle di ridimensionamento a controlli diversi. Si noti che le linee di allineamento vengono visualizzate in vari orientamenti per indicare l'allineamento.

Allineare un'etichetta al testo di un controllo

  1. Trascinare un controllo TextBox dalla Casella degli strumenti al form. Quando si rilascia il TextBox controllo nel modulo, fare clic sul glifo smart tag e selezionare l'opzione Imposta testo su textBox1 . Per informazioni dettagliate, vedere Procedura dettagliata: Eseguire attività comuni usando le azioni della finestra di progettazione.

  2. Trascinare un controllo Label dalla Casella degli strumenti al form.

  3. Modificare il valore della proprietà del controllo Label , AutoSize , su true. Si noti che i bordi del controllo vengono modificati in base al testo visualizzato.

  4. Spostare il Label controllo a sinistra del TextBox controllo, in modo che sia allineato al bordo inferiore del TextBox controllo. Si noti la linea di allineamento visualizzata lungo i bordi inferiori dei due controlli.

  5. Spostare leggermente il controllo verso l'alto Label fino a quando il Label testo e il TextBox testo non sono allineati. Si noti la linea di allineamento in stile diversa visualizzata, che indica quando i campi di testo di entrambi i controlli sono allineati.

Usare le linee di allineamento con lo spostamento tramite tastiera

  1. Trascinare un controllo Button dalla Casella degli strumenti al form. Posizionarlo nell'angolo superiore sinistro del form.

  2. Premere CTRL+FRECCIA GIÙ. Si noti che il controllo sposta il form verso il basso fino alla prima posizione di allineamento orizzontale disponibile.

  3. Premere CTRL+freccia giù finché il controllo non raggiunge la parte inferiore del form. Si notino le posizioni che occupa durante lo spostamento verso il basso del form.

  4. Premere CTRL+freccia destra. Si noti che il controllo passa attraverso il form alla prima posizione di allineamento verticale disponibile.

  5. Premere CTRL+freccia destra finché il controllo non raggiunge il lato del form. Si notino le posizioni che occupa mentre si sposta attraverso il form.

  6. Spostare il controllo intorno al form con una combinazione di tasti di direzione. Si notino le posizioni che il controllo occupa e le linee di allineamento che le accompagnano.

  7. Premere MAIUSC+per ridimensionare il Button controllo in base agli incrementi di un pixel.

  8. Premere CTRL+MAIUSC+per ridimensionare il Button controllo in incrementi di allineamento.

Disabilitare selettivamente le linee di allineamento

  1. Trascinare un controllo TableLayoutPanel dalla Casella degli strumenti al form.

  2. Fare doppio clic sull'icona del controllo Button nella Casella degli strumenti. Si noti che nella prima cella del controllo viene visualizzato TableLayoutPanel un nuovo controllo pulsante.

  3. Fare doppio clic sull'icona del Button controllo nella Casella degli strumenti due volte di più. In questo modo viene lasciato una cella vuota nel TableLayoutPanel controllo .

  4. Trascinare un Button controllo dalla casella degli strumenti nella cella vuota del TableLayoutPanel controllo. Si noti che non vengono visualizzate linee di allineamento.

  5. Trascinare il Button controllo all'esterno TableLayoutPanel del controllo e spostarlo intorno al TableLayoutPanel controllo. Si noti che le linee di ancoraggio vengono visualizzate di nuovo.

Disabilitare le linee di allineamento

Premere ALT e durante lo spostamento di un controllo intorno al form.

Non vengono visualizzate linee di allineamento e il controllo non si blocca in alcuna posizione di allineamento potenziale.

Per disabilitare le guide di allineamento nell'ambiente di progettazione

  1. Dal menu Strumenti aprire la finestra di dialogo Opzioni. Selezionare Windows Form Designer.

  2. Selezionare il nodo Generale . Nella sezione Modalità layout modificare la selezione da SnapLines a SnapToGrid.

  3. Selezionare OK per applicare l'impostazione.

  4. Selezionare un controllo nel form e spostarlo negli altri controlli. Si noti che le linee di allineamento non vengono visualizzate.

Passaggi successivi

Le linee di allineamento offrono un mezzo intuitivo per allineare i controlli nel form. Alcuni suggerimenti per un'analisi più ampia dell'argomento includono:

  • Provare a annidare un GroupBox controllo all'interno di un altro GroupBox controllo. Posizionare un Button controllo all'interno del controllo figlio GroupBox e un altro all'interno del controllo padre GroupBox . Spostare i Button controlli per vedere in che modo le linee di allineamento superano i limiti del contenitore.

  • Creare una colonna di TextBox controlli e una colonna corrispondente di Label controlli. Impostare il valore della proprietà dei LabelAutoSize controlli su true. Usare le linee di allineamento per spostare i Label controlli in modo che il testo visualizzato sia allineato al testo nei TextBox controlli.

Vedi anche