Procedura dettagliata: Guida introduttiva a Progettazione Windows Form

La finestra Progettazione Windows Form fornisce vari strumenti per lo sviluppo di applicazioni Windows Form. La presente procedura dettagliata illustra come creare un'applicazione utilizzando i vari strumenti forniti dalla finestra di progettazione. Di seguito sono elencate le attività illustrate nella procedura dettagliata:

• Creazione di un progetto Windows Form

• Disposizione dei controlli utilizzando le guide di allineamento.

• Svolgimento di attività di progettazione utilizzando gli smart tag.

• Impostazione dei margini e della spaziatura interna nei controlli.

• Disposizione dei controlli utilizzando un controllo TableLayoutPanel.

• Divisione del layout del controllo utilizzando un controllo SplitContainer.

• Spostamento all'interno del layout con la finestra Struttura documento.

• Posizionamento dei controlli con la visualizzazione delle informazioni su dimensioni e percorso.

• Impostazione dei valori delle proprietà utilizzando la finestra Proprietà.

Al termine si otterrà un controllo personalizzato assemblato utilizzando molte delle funzionalità del layout disponibili in Progettazione Windows Form. Questo controllo implementa l'interfaccia utente (UI) per una semplice calcolatrice. Nella seguente schermata viene illustrato il layout generale del controllo calcolatrice.

Interfaccia utente della calcolatrice

Prerequisiti

Per completare questa procedura dettagliata è necessario:

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

Creazione di un progetto di controllo personalizzato

Il primo passaggio consiste nella creazione di un progetto di controllo DemoCalculator.

Per creare il progetto di controllo personalizzato

1. Scegliere Nuovo dal menu File, quindi fare clic su Progetto. Verrà visualizzata la finestra di dialogo Nuovo progetto.

2. Dall'elenco di progetti di Visual Basic o di Visual C# nella categoria Windows selezionare il modello di progetto Libreria di controlli Windows Form.

3. Nella casella Nome digitare DemoCalculatorLib, quindi fare clic su OK.

4. In Esplora soluzioni fare clic con il pulsante destro del mouse sul file UserControl1.vb o UserControl1.cs, quindi scegliere Rinomina.

5. Modificare il nome del file in DemoCalculator.vb o DemoCalculator.cs. Scegliere il pulsante Sì quando richiesto per rinominare tutti i riferimenti all'elemento di codice "UserControl1".

   In Progettazione Windows Form è attualmente visualizzata l'area di progettazione per il controllo DemoCalculator. In questa vista, è possibile progettare graficamente l'aspetto del controllo selezionando controlli e componenti dalla Casella degli strumenti e collocandoli nell'area di progettazione. Per ulteriori informazioni sui controlli personalizzati, vedere Tipi di controlli personalizzati.

Progettazione del layout del controllo

Il controllo DemoCalculator include vari controlli Windows Form. Nella procedura corrente si procederà a disporre i controlli utilizzando alcune delle funzioni di sviluppo rapido applicazioni (RAD) di Progettazione Windows Form.

Per progettare il layout del controllo

1. In Progettazione Windows Form modificare il controllo DemoCalculator aumentandone le dimensioni, facendo clic sul punto di ridimensionamento nell'angolo inferiore destro e trascinando verso il basso e verso destra. Nell'angolo inferiore destro di Visual Studio individuare le informazioni relative a dimensioni e posizione dei controlli. Impostare le dimensioni del controllo su una larghezza di 500 e un'altezza di 400 consultando le informazioni sulle dimensioni mentre si esegue il ridimensionamento.

2. Nella Casella degli strumenti fare clic sul nodo Contenitori per aprirlo. Selezionare il controllo SplitContainer e trascinarlo nell'area di progettazione.

   L'oggetto SplitContainer viene collocato nell'area di progettazione del controllo DemoCalculator.

   Nota

   Il controllo SplitContainer assume le dimensioni necessarie ad adattarsi al controllo DemoCalculator. Esaminare la finestra Proprietà per visualizzare le impostazioni delle proprietà del controllo SplitContainer. Individuare la proprietà Dock. Il suo valore è Fill, che indica che il controllo SplitContainer assumerà sempre le dimensioni adeguate ai limiti del controllo DemoCalculator. Ridimensionare il controllo DemoCalculator per verificare questo comportamento.

3. Nella finestra Proprietà modificare il valore della proprietà Dock impostandolo su None.

   Il controllo SplitContainer si ridurrà alle dimensioni predefinite. Le sue dimensioni non saranno più dipendenti dalle dimensioni del controllo DemoCalculator.

4. Fare clic sul glifo dello smart tag () nell'angolo superiore destro del controllo SplitContainer. Fare clic su Ancora nel contenitore padre per impostare la proprietà Dock su Fill.

   Il controllo SplitContainer viene ancorato ai limiti del controllo DemoCalculator.

   Nota

   Numerosi controlli dispongono di smart tag per facilitare la progettazione. Per ulteriori informazioni, vedere Procedura dettagliata: esecuzione di attività comuni utilizzando gli smart tag nei controlli Windows Form.

5. Fare clic sul bordo verticale tra i pannelli e trascinarlo verso destra, in modo che la maggior parte dello spazio sia occupato dal riquadro di sinistra.

   L'oggetto SplitContainer divide il controllo DemoCalculator in due pannelli, con un bordo mobile che li separa. Il pannello a sinistra includerà i pulsanti e il display della calcolatrice, mentre nel pannello a destra sarà visualizzato un record delle operazioni matematiche eseguite dall'utente.

6. Nella finestra Proprietà modificare il valore della proprietà BorderStyle impostandolo su Fixed3D.

7. Nella Casella degli strumenti fare clic sul nodo Controlli comuni per aprirlo. Selezionare il controllo ListView e trascinarlo nel pannello destro del controllo SplitContainer.

8. Fare clic sul glifo dello smart tag del controllo ListView. Nel pannello smart tag modificare l'impostazione di View in Details.

9. Nel pannello smart tag fare clic su Modifica colonne.

   Verrà visualizzata la finestra di dialogo Editor dell'insieme ColumnHeader

10. Nella finestra di dialogo Editor dell'insieme ColumnHeader fare clic sul pulsante Aggiungi per aggiungere una colonna al controllo ListView. Modificare il valore della proprietà Text della colonna in Cronologia. Fare clic su OK per creare la colonna.

11. Nel pannello smart tag fare clic su Ancora nel contenitore padre, quindi scegliere il glifo dello smart tag per chiudere il pannello smart tag.

12. Dal nodo Contenitori nella Casella degli strumenti, trascinare un controllo TableLayoutPanel nel pannello di sinistra del controllo SplitContainer.

    Il controllo TableLayoutPanel viene visualizzato nell'area di progettazione con il relativo pannello smart tag aperto. I controlli figlio del controllo TableLayoutPanel vengono disposti su una griglia. Per ulteriori informazioni, vedere Procedura dettagliata: disposizione dei controlli in Windows Form utilizzando TableLayoutPanel. Il controllo TableLayoutPanel includerà la visualizzazione e i pulsanti del controllo DemoCalculator.

13. Fare clic su Modifica righe e colonne nel pannello smart tag.

    Verrà visualizzata la finestra di dialogo Stili di riga e colonna.

14. Fare clic sul pulsante Aggiungi fino a visualizzare cinque colonne. Selezionare tutte le cinque colonne e quindi scegliere il pulsante di opzione Percentuale nella casella Tipo dimensione. Impostare il valore di Percentuale su 20. Questo imposta la stessa larghezza per ogni colonna.

15. Nella casella di riepilogo a discesa Mostra fare clic su Righe.

16. Fare clic sul pulsante Aggiungi fino a visualizzare cinque righe. Selezionare tutte le cinque righe e quindi scegliere il pulsante di opzione Percentuale nella casella Tipo dimensione. Impostare il valore di Percentuale su 20. Questo imposta la stessa altezza per ogni riga.

17. Fare clic su OK per accettare le modifiche e quindi fare clic sul glifo dello smart tag per chiudere il pannello smart tag.

18. Nella finestra Proprietà modificare il valore della proprietà Dock impostandolo su Fill.

Compilazione del controllo

Ora che il layout del controllo è impostato, è possibile popolare il controllo DemoCalculator con pulsanti e una visualizzazione.

Per popolare il controllo

1. Nella Casella degli strumenti fare doppio clic sull'icona del controllo TextBox.

   Un controllo TextBox viene posizionato nella prima cella del controllo TableLayoutPanel.

2. Nella finestra Proprietà modificare il valore della proprietà ColumnSpan del controllo TextBox impostandolo su 5.

   Il controllo TextBox si sposta in posizione centrata sulla riga.

3. Modificare il valore della proprietà Anchor del controllo TextBox su Left, Right.

   Il controllo TextBox si amplia in orizzontale fino a occupare tutte e cinque le colonne.

4. Modificare il valore della proprietà TextAlign del controllo TextBox su Right.

5. Nella finestra Proprietà espandere il nodo della proprietà Font. Impostare Size su 14 e impostare Bold su true per il controllo TextBox.

6. Selezionare il controllo TableLayoutPanel.

7. Nella Casella degli strumenti fare doppio clic sull'icona Button.

   Un controllo Button viene posizionato nella prima cella aperta del controllo TableLayoutPanel.

8. Nella Casella degli strumenti fare doppio clic sull'icona Button altre quattro volte per popolare la seconda riga del controllo TableLayoutPanel.

9. Selezionare tutti i cinque controlli Button facendo clic su di essi tenendo premuto il tasto MAIUSC. Premere CTRL+C per copiare i controlli Button negli Appunti.

10. Premere CTRL+V tre volte per incollare copie dei controlli Button nelle righe restanti del controllo TableLayoutPanel.

11. Selezionare tutti i 20 controlli Button facendo clic su di essi tenendo premuto il tasto MAIUSC.

12. Nella finestra Proprietà, modificare il valore della proprietà Dock impostandolo su Fill.

    Tutti i controlli Button vengono ancorati in modo da riempire le celle che li contengono.

13. Nella finestra Proprietà espandere il nodo della proprietà Margin. Impostare il valore di All su 5.

    Le dimensioni di tutti i controlli Button vengono ridotte per creare un margine più ampio tra di essi.

14. Selezionare button10 e button20 e quindi premere CANC per rimuoverli dal layout.

15. Selezionare button5 e button15 e quindi modificare il valore della relativa proprietà RowSpan impostandolo su 2. Saranno i pulsanti Cancella e = per il controllo DemoCalculator.

Spostamento all'interno del controllo utilizzando la finestra Struttura documento

Quando il controllo o form è popolato da vari controlli, potrebbe essere più semplice spostarsi all'interno del layout utilizzando la finestra Struttura documento.

Per spostarsi utilizzando la finestra Struttura documento

1. Scegliere Altre finestre dal menu Visualizza, e quindi scegliere Struttura documento.

   La finestra Struttura documento mostra un visualizzazione struttura ad albero del controllo DemoCalculator e dei suoi controlli costitutivi. I controlli contenitore come SplitContainer mostrano i relativi controlli figli come sottonodi della struttura ad albero. È inoltre possibile rinominare i controlli sul posto utilizzando la finestra Struttura documento.

2. Nella finestra Struttura documento fare clic con il pulsante destro del mouse su button1 e quindi scegliere Rinomina. Cambiare il nome in sevenButton.

3. Utilizzando la finestra Struttura documento, rinominare i controlli Button sostituendo il nome generato nella finestra di progettazione con il nome di produzione, in base al seguente elenco:

   • button1 in sevenButton

   • button2 in eightButton

   • button3 in nineButton

   • button4 in divisionButton

   • button5 in clearButton

   • button6 in fourButton

   • button7 in fiveButton

   • button8 in sixButton

   • button9 in multiplicationButton

   • button11 in oneButton

   • button12 in twoButton

   • button13 in threeButton

   • button14 in subtractionButton

   • button15 in equalsButton

   • button16 in zeroButton

   • button17 in changeSignButton

   • button18 in decimalButton

   • button19 in additionButton

4. Utilizzando le finestra Struttura documento e Proprietà, cambiare il valore della proprietà Text per ciascun nome di controllo Button in base al seguente elenco:

   • Impostare la proprietà Text del controllo sevenButton su 7

   • Impostare la proprietà Text del controllo eightButton su 8

   • Impostare la proprietà Text del controllo nineButton su 9

   • Impostare la proprietà Text del controllo divisionButton su /

   • Impostare la proprietà Text del controllo clearButton su Clear

   • Impostare la proprietà Text del controllo fourButton su 4

   • Impostare la proprietà Text del controllo fiveButton su 5

   • Impostare la proprietà Text del controllo sixButton su 6

   • Impostare la proprietà Text del controllo multiplicationButton su *

   • Impostare la proprietà Text del controllo oneButton su 1

   • Impostare la proprietà Text del controllo twoButton su 2

   • Impostare la proprietà Text del controllo threeButton su 3

   • Impostare la proprietà Text del controllo subtractionButton su -

   • Impostare la proprietà Text del controllo equalsButton su =

   • Impostare la proprietà Text del controllo zeroButton su 0

   • Impostare la proprietà Text del controllo changeSignButton su +/-

   • Impostare la proprietà Text del controllo decimalButton su .

   • Impostare la proprietà Text del controllo additionButton su +

5. Nell'area di progettazione selezionare tutti i controlli Button facendo clic su di essi tenendo premuto il tasto MAIUSC.

6. Nella finestra Proprietà espandere il nodo della proprietà Font. Impostare Size su 14 e impostare Bold su true per tutti i controlli Button.

   Questo completa la progettazione del controllo DemoCalculator. Rimane solo da fornire la logica della calcolatrice.

Implementazione dei gestori eventi

I pulsanti sul controllo DemoCalculator dispongono di gestori eventi che possono essere utilizzati per implementare gran parte della logica della calcolatrice. Progettazione Windows Form consente di implementare gli stub di tutti i gestori eventi per tutti i pulsanti con un doppio clic del mouse.

Per implementare i gestori eventi

1. Nell'area di progettazione, selezionare tutti i controlli Button facendo clic su di essi tenendo premuto il tasto MAIUSC.

2. Fare doppio clic su uno dei controlli Button.

   L'editor di codice verrà aperto sui gestori eventi generati dalla finestra di progettazione.

Test del controllo

Poiché il controllo DemoCalculator eredita dalla classe UserControl, è possibile verificarne il comportamento tramite UserControl Test Container. Per ulteriori informazioni, vedere Procedura: eseguire il test del comportamento in fase di esecuzione di UserControl.

Per eseguire il test del controllo

1. Per compilare ed eseguire il controllo DemoCalculator in UserControl Test Container, premere F5.

2. Fare clic sul bordo tra i pannelli SplitContainer e trascinarlo verso sinistra e verso destra. Il controllo TableLayoutPanel e tutti i relativi controlli figli vengono ridimensionati per adattarsi allo spazio disponibile.

3. Al termine del test del controllo, fare clic su Chiudi.

Utilizzo del controllo in un form

Il controllo DemoCalculator può essere utilizzato in altri controlli composti o in un form. Nel seguente esempio ne viene illustrato l'utilizzo.

Creazione del progetto

Il primo passaggio consiste nella creazione del progetto di applicazione. Il progetto verrà utilizzato per compilare l'applicazione che mostra il controllo personalizzato.

Per creare il progetto

1. Scegliere Aggiungi dal menu File, quindi fare clic su Nuovo progetto. Verrà visualizzata la finestra di dialogo Nuovo progetto.

2. Dall'elenco di progetti di Visual Basic o di Visual C# selezionare il modello di progetto Applicazione Windows Form.

3. Nella casella Nome digitare DemoCalculatorTest, quindi fare clic su OK.

4. In Esplora soluzioni fare clic con il pulsante destro del mouse sul progetto DemoCalculatorTest, quindi scegliere Aggiungi riferimento per aprire la finestra di dialogo Aggiungi riferimento.

5. Fare clic sulla scheda Progetti, quindi fare doppio clic sul progetto DemoCalculatorLib per aggiungere il riferimento al progetto di test.

6. In Esplora soluzioni fare clic con il pulsante destro del mouse su DemoCalculatorTest e quindi fare clic su Imposta come progetto di avvio

7. In Progettazione Windows Form aumentare le dimensioni del form impostandole su 700 X 500 circa.

Utilizzo del controllo nel layout del form

Per utilizzare il controllo DemoCalculator in un'applicazione, è necessario collocarlo in un form.

Per utilizzare il controllo nel layout del form

1. Nella Casella degli strumenti espandere il nodo Componenti DemoCalculatorLib.

2. Trascinare il controllo DemoCalculator dalla Casella degli strumenti nel form. Spostare il controllo verso l'angolo superiore sinistro del form. Quando il controllo si trova vicino ai bordi del form, verranno visualizzate le guide di allineamento. Esse indicano la distanza della proprietà Padding del form e la proprietà Margin del controllo. Posizionare il controllo nel punto indicato dalle guide di allineamento.

   Per ulteriori informazioni, vedere Procedura dettagliata: disposizione dei controlli in Windows Form utilizzando guide di allineamento.

3. Trascinare un controllo Button dalla Casella degli strumenti e rilasciarlo sul form.

4. Spostare il controllo Button all'interno del controllo DemoCalculator e osservare dove vengono visualizzate le guide di allineamento. Questa funzionalità consente di allineare i controlli in modo preciso e semplice. Eliminare il controllo Button al termine dell'operazione.

5. Fare clic con il pulsante destro del mouse sul controllo DemoCalculator, quindi scegliere Proprietà.

6. Modificare il valore della proprietà Dock impostandolo su Fill.

7. Selezionare il form ed espandere il nodo della proprietà Padding. Modificare il valore di Tutti impostandolo su 20.

   Le dimensioni del controllo DemoCalculator si riducono per adattarsi al nuovo valore della proprietà Padding del form.

8. Ridimensionare il form trascinando i vari quadratini di ridimensionamento nelle diverse posizioni. Osservare come il controllo DemoCalculator viene ridimensionato di conseguenza.

Passaggi successivi

Questa procedura guidata mostra come creare l'interfaccia utente per una semplice calcolatrice. Potrebbe essere necessario ampliarne le funzionalità nei modi seguenti:

• Implementare la logica della calcolatrice. Può sembrare un'operazione semplice, ma alle transizioni di stato della calcolatrice sono associati aspetti interessanti.

• Creare un package dell'applicazione calcolatrice per la distribuzione. Per ulteriori informazioni, vedere Procedura: pubblicare un'applicazione ClickOnce mediante la Pubblicazione guidata.

Vedere anche

Attività

Procedura dettagliata: disposizione dei controlli in Windows Form utilizzando TableLayoutPanel

Procedura dettagliata: aggiunta di smart tag a un componente Windows Form

Procedura dettagliata: disposizione dei controlli in Windows Form utilizzando guide di allineamento

Procedura dettagliata: compilare automaticamente la casella degli strumenti con componenti personalizzati

Procedura: eseguire il test del comportamento in fase di esecuzione di UserControl

Risoluzione dei problemi relativi alla modifica di controlli e componenti

Risoluzione dei problemi relativi allo sviluppo in fase di progettazione

Concetti

Tipi di controlli personalizzati

Altre risorse

Creazione di un nuovo Windows Form

Cronologia delle modifiche