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

Articolo
10/09/2014

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

È 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.

Prerequisiti

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.

Creazione del progetto

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

Creare un progetto di applicazione per Windows denominato DemoDataEntryLayout. Per ulteriori informazioni, vedere Procedura: creare un nuovo progetto di applicazione Windows Form.

Creazione del pannello del layout

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

Per creare il pannello del layout

Selezionare il form in Progettazione form.
Trascinare un controllo TableLayoutPanel dalla Casella degli strumenti al form.
Nella finestra Proprietà modificare il valore della proprietà Dock del controllo TableLayoutPanel in Fill.
Modificare il valore della proprietà ColumnCount impostandolo su 4 e modificare il valore della proprietà RowCount impostandolo su 6.

Impostazione della griglia di layout

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

Fare clic sul glifo dello smart tag del controllo TableLayoutPanel () 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.
Selezionare Colonne dalla casella di riepilogo a discesa Mostra.
Selezionare la prima colonna e modificare il valore della proprietà SizeType in Percent. Impostare il valore del controllo Percent NumericUpDown su 25. La colonna includerà i controlli Label.
Selezionare la seconda colonna. Modificare il valore della proprietà SizeType su Percent. Impostare il valore del controllo Percent NumericUpDown su 50. La colonna includerà i controlli TextBox per i campi di immissione dati.
Selezionare la terza colonna. Modificare il valore della proprietà SizeType su Percent. Impostare il valore del controllo Percent NumericUpDown su 25. La colonna includerà i controlli Label.
Selezionare la quarta colonna. Modificare il valore della proprietà SizeType su Percent. Impostare il valore del controllo Percent NumericUpDown su 50. La colonna includerà i controlli TextBox per i campi di immissione dati.
Selezionare Righe dalla casella di riepilogo a discesa Mostra.
Per le prime cinque righe, impostare il valore della proprietà SizeType su Absolute e impostare il valore del controllo Absolute NumericUpDown su 28. Per la sesta riga, impostare il valore della proprietà SizeType su Percent e impostare il valore del controllo Percent NumericUpDown su 80.
Scegliere OK per confermare le modifiche.

Popolazione del layout con i controlli

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:

Campi Nome
Campi Indirizzo
Campi Numero di telefono
Campo Note

Creazione dei campi Nome

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

Trascinare un controllo Label dalla Casella degli strumenti nella prima cella sul controllo TableLayoutPanel.
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 Nome.
Trascinare un controllo TextBox dalla Casella degli strumenti nella seconda cella della prima riga accanto al controllo Label.
Impostare il valore della proprietà Anchor del controllo TextBox su Left, Right.
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.
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.

Creazione dei campi Indirizzo

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

Trascinare un controllo Label dalla Casella degli strumenti nella prima cella della seconda riga.
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.
Trascinare un controllo TextBox dalla Casella degli strumenti nella seconda cella della seconda riga accanto al controllo Label.
Impostare il valore della proprietà Anchor del controllo TextBox su Left, Right.
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.
Ripetere i passaggi da 1 a 5 per la terza riga. Impostare il valore della proprietà Text del controllo Label su Address2.
Trascinare un controllo Label dalla Casella degli strumenti nella prima cella della quarta 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 City.
Trascinare un controllo TextBox dalla Casella degli strumenti nella seconda cella della quarta riga accanto al controllo Label.
Impostare il valore della proprietà Anchor del controllo TextBox su Left, Right.
Trascinare un controllo Label dalla Casella degli strumenti nella terza cella della quarta 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 State.
Trascinare un controllo ComboBox dalla Casella degli strumenti nella quarta cella della quarta riga.
Impostare il valore della proprietà Anchor del controllo ComboBox su Left. Impostare il valore della proprietà FormattingEnabled su true.

Creazione dei campi Numero di telefono

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

Trascinare un controllo Label dalla Casella degli strumenti nella prima cella della quinta riga.
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).
Trascinare un controllo MaskedTextBox dalla Casella degli strumenti nella seconda cella della quinta riga.
Impostare il valore della proprietà Anchor del controllo MaskedTextBox su Left.
Fare clic sullo smart tag () nel controllo MaskedTextBox per aprire l'editor Mask.
Selezionare la maschera Numero di telefono nella finestra di dialogo Maschera input. Scegliere OK.
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).

Creazione dei campi Note

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

Trascinare un controllo Label dalla Casella degli strumenti nella prima cella della sesta riga.
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.
Trascinare un controllo RichTextBox dalla Casella degli strumenti nella seconda cella della sesta riga.
Impostare il valore di ColumnSpan su 3.
Impostare il valore della proprietà Dock del controllo RichTextBox su Fill.

Completamento dell'impostazione della griglia di layout

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

Selezionare il controllo TableLayoutPanel e fare clic sul glifo del relativo 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.
Selezionare Colonne dalla casella di riepilogo a discesa Mostra.
Selezionare la prima e la terza colonna e modificare il valore della proprietà SizeType in AutoSize.
Scegliere OK per confermare le modifiche.

Verifica

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

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

Passaggi successivi

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.