Per visualizzare l'articolo in inglese, selezionare la casella di controllo Inglese. È possibile anche visualizzare il testo inglese in una finestra popup posizionando il puntatore del mouse sopra il testo.
Traduzione
Inglese
Informazioni
L'argomento richiesto è visualizzato di seguito, ma non è incluso in questa libreria.

Procedura dettagliata: creazione di un Windows Form ridimensionabile per l'inserimento di dati

Un form che viene ridimensionato in modo corretto può migliorare l'utilizzabilità dell'interfaccia utente.

Questa procedura dettagliata illustra come creare un layout che si adatti in modo proporziale quando l'utente ridimensiona il form. Verrà implementato un form per l'inserimento di dati per recapiti utilizzando il controllo TableLayoutPanel.

Di seguito vengono elencate le attività illustrate nella procedura dettagliata:

  • Creazione del progetto

  • Creazione del pannello del layout

  • Impostazione della griglia di layout

  • Creazione dei campi Nome

  • Creazione dei campi Indirizzo

  • Creazione dei campi Numero di telefono

  • Creazione dei campi Note

Al termine, il form dovrebbe risultare simile al seguente:

Form di inserimento dati di base con TableLayoutPanel

Per copiare il codice nell'argomento corrente come un elenco singolo, vedere Procedura: creare Windows Form ridimensionabile per immissione dati.

Nota Nota

È possibile che le finestre di dialogo e i comandi di menu visualizzati siano diversi da quelli descritti nella Guida 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.

Per completare questa procedura dettagliata, è necessario disporre di quanto segue:

  • Disporre di autorizzazioni sufficienti per creare ed eseguire progetti di applicazioni Windows Form nel computer dove è installato Visual Studio.

Il primo passaggio consiste nella creazione del progetto di applicazione, Il progetto verrà utilizzato per compilare l'applicazione che mostra il form di immissione dati.

Per creare il progetto

Il passaggio successivo consiste nel creare il pannello del layout che include il layout ridimensionabile.

Per creare il pannello del layout

  1. Selezionare il form in Progettazione form.

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

  3. Nella finestra Proprietà modificare il valore della proprietà Dock del controllo TableLayoutPanel in Fill.

  4. Modificare il valore della proprietà ColumnCount impostandolo su 4 e modificare il valore della proprietà RowCount impostandolo su 6.

Il passaggio successivo consiste nella specificazione della griglia di layout. Impostare le proprietà nelle raccolte ColumnStyles e RowStyles per determinare come verranno ridimensionate colonne e righe quando si modificano le dimensioni del form.

Per impostare la griglia di layout

  1. Fare clic sul glifo dello smart tag del controllo TableLayoutPanel (Glifo Smart Tag) e selezionare Modifica righe e colonne per aprire la finestra di dialogo Stili di riga e colonna. Per ulteriori informazioni, vedere Procedura: modificare colonne e righe in un controllo TableLayoutPanel.

  2. Selezionare Colonne dalla casella di riepilogo a discesa Mostra.

  3. Selezionare la prima colonna e modificare il valore della proprietà SizeType in Percent. Impostare il valore del controllo PercentNumericUpDown su 25. La colonna includerà i controlli Label.

  4. Selezionare la seconda colonna. Modificare il valore della proprietà SizeType su Percent. Impostare il valore del controllo PercentNumericUpDown su 50. La colonna includerà i controlli TextBox per i campi di immissione dati.

  5. Selezionare la terza colonna. Modificare il valore della proprietà SizeType su Percent. Impostare il valore del controllo PercentNumericUpDown su 25. La colonna includerà i controlli Label.

  6. Selezionare la quarta colonna. Modificare il valore della proprietà SizeType su Percent. Impostare il valore del controllo PercentNumericUpDown su 50. La colonna includerà i controlli TextBox per i campi di immissione dati.

  7. Selezionare Righe dalla casella di riepilogo a discesa Mostra.

  8. Per le prime cinque righe, impostare il valore della proprietà SizeType su Absolute e impostare il valore del controllo AbsoluteNumericUpDown su 28. Per la sesta riga, impostare il valore della proprietà SizeType su Percent e impostare il valore del controllo PercentNumericUpDown su 80.

  9. Scegliere OK per confermare le modifiche.

A questo punto è possibile popolare il layout con i controlli. Il form di immissione dati è pensato per i recapiti, quindi include un campo per il nome, il cognome, l'indirizzo, il numero di telefono e le note. Nel seguente elenco viene indicato l'ordine in cui creare questi controlli:

  1. Campi Nome

  2. Campi Indirizzo

  3. Campi Numero di telefono

  4. Campo Note

I campi di immissione Nome vengono collocati sulla prima riga del controllo TableLayoutPanel. Sono composti da un controllo Label e da un controllo TextBox per il nome, e da un controllo Label e un controllo TextBox per il cognome.

Per creare i campi Nome

  1. Trascinare un controllo Label dalla Casella degli strumenti nella prima cella sul controllo TableLayoutPanel.

  2. Nella finestra Proprietà impostare il valore della proprietà Anchor del controllo Label impostandolo su Right.

  3. Impostare il valore della proprietà AutoSize su true.

  4. Impostare il valore della proprietà Text su Nome.

  5. Trascinare un controllo TextBox dalla Casella degli strumenti nella seconda cella della prima riga accanto al controllo Label.

  6. Impostare il valore della proprietà Anchor del controllo TextBox su Left, Right.

  7. Trascinare un controllo Label dalla Casella degli strumenti nella terza cella della prima riga. Impostare il valore della proprietà Anchor del controllo Label su Right. Impostare il valore della proprietà AutoSize su true. Impostare il valore della proprietà Text su Cognome.

  8. Trascinare un controllo TextBox dalla Casella degli strumenti nella quarta cella della prima riga. Impostare il valore della proprietà Anchor del controllo TextBox su Left, Right.

I campi Indirizzo occupano la seconda, terza e quarta riga. Poiché gli indirizzi postali possono essere lunghi, i campi Address1 e Address2 occupano tre colonne.

Per creare i campi Indirizzo

  1. Trascinare un controllo Label dalla Casella degli strumenti nella prima cella della seconda riga.

  2. Nella finestra Proprietà impostare il valore della proprietà Anchor del controllo Label impostandolo su Right. Impostare il valore della proprietà AutoSize su true. Impostare il valore della proprietà Text su Address1.

  3. Trascinare un controllo TextBox dalla Casella degli strumenti nella seconda cella della seconda riga accanto al controllo Label.

  4. Impostare il valore della proprietà Anchor del controllo TextBox su Left, Right.

  5. Impostare il valore di ColumnSpan su 3. La proprietà è fornita dal controllo TableLayoutPanel. Per ulteriori informazioni sulle proprietà fornite, vedere Cenni preliminari sul provider di estensione.

  6. Ripetere i passaggi da 1 a 5 per la terza riga. Impostare il valore della proprietà Text del controllo Label su Address2.

  7. Trascinare un controllo Label dalla Casella degli strumenti nella prima cella della quarta riga.

  8. Impostare il valore della proprietà Anchor del controllo Label su Right. Impostare il valore della proprietà AutoSize su true. Impostare il valore della proprietà Text su City.

  9. Trascinare un controllo TextBox dalla Casella degli strumenti nella seconda cella della quarta riga accanto al controllo Label.

  10. Impostare il valore della proprietà Anchor del controllo TextBox su Left, Right.

  11. Trascinare un controllo Label dalla Casella degli strumenti nella terza cella della quarta riga.

  12. Impostare il valore della proprietà Anchor del controllo Label su Right. Impostare il valore della proprietà AutoSize su true. Impostare il valore della proprietà Text su State.

  13. Trascinare un controllo ComboBox dalla Casella degli strumenti nella quarta cella della quarta riga.

  14. Impostare il valore della proprietà Anchor del controllo ComboBox su Left. Impostare il valore della proprietà FormattingEnabled su true.

I campi Numero di telefono occupano la quinta riga. Per assicurarsi che l'utente inserisca solo numeri di telefono validi, implementarli nel controllo MaskedTextBox.

Per creare i campi Numero di telefono

  1. Trascinare un controllo Label dalla Casella degli strumenti nella prima cella della quinta riga.

  2. Nella finestra Proprietà impostare il valore della proprietà Anchor del controllo Label impostandolo su Right. Impostare il valore della proprietà AutoSize su true. Impostare il valore della proprietà Text su Telefono (Lav).

  3. Trascinare un controllo MaskedTextBox dalla Casella degli strumenti nella seconda cella della quinta riga.

  4. Impostare il valore della proprietà Anchor del controllo MaskedTextBox su Left.

  5. Fare clic sullo smart tag (Glifo Smart Tag) nel controllo MaskedTextBox per aprire l'editor Mask.

  6. Selezionare la maschera Numero di telefono nella finestra di dialogo Maschera input. Scegliere OK.

  7. Ripetere i passaggi da 1 a 5 per il campo relativo al numero di telefono abitazione. asImpostare il valore della proprietà Text su Telefono (Cas).

L'ultimo campo occupa la sesta riga. È pensato per l'immissione di note e consente di inserire testo in forma libera.

Per creare i campi Note

  1. Trascinare un controllo Label dalla Casella degli strumenti nella prima cella della sesta riga.

  2. Nella finestra Proprietà impostare il valore della proprietà Anchor del controllo Label impostandolo su Top, Right. Impostare il valore della proprietà AutoSize su true. Impostare il valore della proprietà Text su Note.

  3. Trascinare un controllo RichTextBox dalla Casella degli strumenti nella seconda cella della sesta riga.

  4. Impostare il valore di ColumnSpan su 3.

  5. Impostare il valore della proprietà Dock del controllo RichTextBox su Fill.

L'ultimo passaggio consiste nel completare l'impostazione della griglia di layout. La prima e la terza colonna devono essere impostate su AutoSize. Poiché in queste colonne sono stati inseriti controlli, le colonne saranno visibili in fase di progettazione.

Per impostare la griglia di layout

  1. Selezionare il controllo TableLayoutPanel e fare clic sul glifo del relativo smart tag (Glifo Smart Tag). Selezionare Modifica righe e colonne per aprire la finestra di dialogo Stili di riga e colonna. Per ulteriori informazioni, vedere Procedura: modificare colonne e righe in un controllo TableLayoutPanel.

  2. Selezionare Colonne dalla casella di riepilogo a discesa Mostra.

  3. Selezionare la prima e la terza colonna e modificare il valore della proprietà SizeType in AutoSize.

  4. Scegliere OK per confermare le modifiche.

A questo punto, è possibile eseguire l'applicazione per verificare il layout dinamico del form.

Per verificare il layout del form

  • Compilare ed eseguire il progetto. Quando il form viene visualizzato, ridimensionarlo riducendolo e ampliandolo.

Nota Nota

I controlli vengono ridimensionati in modo proporzionali per riempire lo spazio disponibile.

Ora che è possibile creare un form che implement il layout dinamico, si consideri la possibilità di prepararlo per la localizzazione. Per ulteriori informazioni, vedere Procedura dettagliata: creazione di un layout dalle proporzioni adattabili per la localizzazione.

Mostra: