Esercitazione: Iniziare con il Designer di Windows Forms

Il Designer di Windows Forms offre molti strumenti per la creazione di applicazioni Windows Forms. Questo articolo illustra come creare un'app usando i vari strumenti forniti dalla finestra di progettazione, incluse le attività seguenti:

• Disporre i controlli usando le guide di allineamento.
• Eseguire attività progettuali utilizzando gli smart tag.
• Impostare margini e spaziatura interna per i controlli.
• Mettere in ordine i controlli con un controllo TableLayoutPanel.
• Partiziona il layout del controllo usando un controllo SplitContainer.
• Naviga nel layout con la finestra Struttura documento.
• Controlli per la posizione con visualizzazione delle informazioni su dimensioni e posizione.
• Impostare i valori delle proprietà usando la finestra Proprietà.

Al termine, avrai un controllo personalizzato che è stato composto usando molte delle funzionalità di layout disponibili nel Designer di Windows Forms. Questo controllo implementa l'interfaccia utente per una semplice calcolatrice. L'immagine seguente mostra il layout generale del controllo calcolatrice:

Il primo passaggio consiste nel creare il progetto di controllo DemoCalculator.

1. Aprire Visual Studio e creare un nuovo progetto Libreria di controlli Windows Form usando il modello .NET Framework per C# o Visual Basic. Denominare il progetto DemoCalculatorLib.

   

2. Per rinominare il file, in Esplora soluzioni fare clic con il pulsante destro del mouse su UserControl1.vb o UserControl1.csselezionare Rinominae modificare il nome del file in DemoCalculator.vb o DemoCalculator.cs. Selezionare Sì quando viene chiesto se si desidera rinominare tutti i riferimenti all'elemento di codice "UserControl1".

Il Designer di Windows Forms mostra la superficie del designer per il controllo DemoCalculator. In questa visualizzazione è possibile progettare graficamente l'aspetto del controllo selezionando controlli e componenti dalla casella degli strumenti e posizionandoli nell'area di progettazione. Per altre informazioni sui controlli personalizzati, vedere Varietà di controlli personalizzati.

Il controllo DemoCalculator contiene diversi controlli Windows Form. In questa procedura, verranno disposti i controlli usando la Progettazione di Windows Forms.

1. In Progettazione di Windows Form, modificare il controllo DemoCalculator a una dimensione maggiore selezionando il quadratino di ridimensionamento nell'angolo inferiore destro e trascinandolo per ridimensionarlo. Nell'angolo inferiore destro di Visual Studio trovare le informazioni sulle dimensioni e sulla posizione per i controlli. Impostare le dimensioni del controllo su larghezza 1000 e altezza 800 osservando le informazioni sulle dimensioni durante il ridimensionamento del controllo. È anche possibile scorrere verso il basso fino alla parte inferiore della finestra Proprietà, che in genere è ancorata nell'angolo inferiore destro, e immettere manualmente i valori nella proprietà dimensioni.

2. In Casella degli strumenti, selezionare il nodo Contenitori per aprirlo. Selezionare il controllo SplitContainer e trascinarlo nell'area di progettazione.

   Il SplitContainer viene posizionato nell'area di progettazione del controllo DemoCalculator.

   Suggerimento

   Il controllo SplitContainer si dimensiona per adattarsi alle dimensioni del controllo DemoCalculator. Guarda la finestra Proprietà per visualizzare le impostazioni delle proprietà per il controllo SplitContainer. Trova la proprietà Dock. Il valore è DockStyle.Fill, il che significa che il controllo SplitContainer si ridimensiona sempre fino ai limiti del controllo DemoCalculator. Ridimensionare il controllo DemoCalculator per verificare questo comportamento.

3. Nella finestra Proprietà , modificare il valore della proprietà Dock in None.

   Il controllo SplitContainer riduce le dimensioni predefinite e non segue più le dimensioni del controllo DemoCalculator.

4. Selezionare il glifo smart tag () nell'angolo superiore destro del controllo SplitContainer. Seleziona Dock nel contenitore padre per impostare la proprietà Dock su Fill.

   Il controllo SplitContainer si aggancia ai margini del controllo DemoCalculator.

   Nota

   Diversi controlli offrono smart tag per facilitare la progettazione. Per altre informazioni, vedere Procedura dettagliata: Eseguire attività comuni usando Smart Tag nei controlli Windows Forms.

5. Selezionare il bordo verticale tra i pannelli e trascinarlo a destra, in modo che il pannello sinistro prenda la maggior parte dello spazio.

   Il SplitContainer divide il controllo DemoCalculator in due pannelli con un bordo mobile che li separa. Il pannello a sinistra contiene i pulsanti e la visualizzazione del calcolatore e il pannello a destra mostra un record delle operazioni aritmetiche eseguite dall'utente.

6. Nella finestra Proprietà, modificare il valore della proprietà BorderStyle in Fixed3D.

7. In casella degli strumentiselezionare il nodo controlli comuni per aprirlo. Selezionare il controllo ListView e trascinarlo nel pannello destro del controllo SplitContainer.

8. Selezionare il glifo smart tag del controllo ListView. Nel pannello smart tag modificare l'impostazione View su Details.

9. Nel pannello smart tag selezionare Modifica colonne.

   La finestra di dialogo ColumnHeader Collection Editor si apre.

10. Nella finestra di dialogo Editor raccolta ColumnHeader, selezionare Aggiungi per aggiungere una colonna al controllo ListView. Modificare il valore della proprietà Text della colonna in Cronologia. Selezionare OK per creare la colonna.

11. Nel pannello smart tag selezionare Dock in Parent Containere quindi selezionare il glifo smart tag per chiudere il pannello smart tag.

12. Dal nodo contenitori, casella degli strumenti, trascinare un controllo TableLayoutPanel nel pannello sinistro del controllo SplitContainer.

    Il controllo TableLayoutPanel viene visualizzato nell'area di progettazione con il pannello smart tag aperto. Il controllo TableLayoutPanel dispone i relativi controlli figlio in una griglia. Il controllo TableLayoutPanel contiene la visualizzazione e i pulsanti del controllo DemoCalculator. Per ulteriori informazioni, vedere Procedura dettagliata: Disporre i controlli utilizzando un TableLayoutPanel.

13. Selezionare Modifica righe e colonne nel pannello smart tag.

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

14. Selezionare il pulsante "Aggiungi" finché non vengono visualizzate cinque colonne. Seleziona tutte e cinque le colonne, quindi seleziona Percent nella casella Tipo di dimensione. Impostare il valore percentuale su 20. Questa azione imposta ogni colonna sulla stessa larghezza.

15. In Mostraselezionare Righe.

16. Selezionare Aggiungi finché non vengono visualizzate cinque righe. Selezionare tutte e cinque le righe e selezionare Percentuale nella casella Tipo di dimensione. Impostare il valore percentuale su 20. Questa azione imposta ogni riga alla stessa altezza.

17. Selezionare OK accettare le modifiche e quindi selezionare il glifo smart tag per chiudere il pannello smart tag.

18. Nella finestra Proprietà , modificare il valore della proprietà Dock in Fill.

Ora che il layout del controllo è configurato, è possibile popolare il controllo DemoCalculator con pulsanti e uno schermo.

1. In Casella degli strumenti, selezionare l'icona di controllo TextBox.

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

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

   Il controllo TextBox si sposta in una posizione centrata nella riga.

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

   Il controllo TextBox si espande orizzontalmente per estendersi su tutte e cinque le colonne.

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

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

6. Selezionare il controllo TableLayoutPanel.

7. In Casella degli strumenti, selezionare l'icona Button.

   Un controllo Button viene inserito nella cella aperta successiva del controllo TableLayoutPanel.

8. In Casella degli strumenti, selezionare l'icona Button altre quattro volte per popolare la seconda riga del controllo TableLayoutPanel.

9. Seleziona tutti e cinque i controlli Button tenendo premuto il tasto Shift mentre li selezioni. Premere CTRL+C per copiare i controlli Button negli Appunti.

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

11. Selezionare tutti i 20 controlli Button tenendo premuto il tasto Maiusc mentre li si seleziona.

12. Nella finestra Proprietà modificare il valore della proprietà Dock in Fill.

    Tutti i controlli Button si agganciano per riempire le celle che li contengono.

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

    Tutti i controlli Button vengono ridimensionati in modo da creare un margine più ampio tra di essi.

14. Selezionare il pulsante 10 e il pulsante 20, quindi premere il pulsante Elimina per rimuoverli dal layout.

15. Selezionare pulsante5 e pulsante 15, quindi modificare il valore della proprietà RowSpan in 2. Questi pulsanti rappresentano i pulsanti Cancella e = per il controllo DemoCalculator.

Quando il controllo o il modulo viene popolato con diversi controlli, è possibile che sia più semplice spostarsi nel layout con la finestra Struttura documento.

1. Sulla barra dei menu, scegliere Visualizza>Altre finestre>Struttura documento. In alternativa, sulla tastiera premere CTRL+ALT+T.

   La finestra Struttura documento mostra una visualizzazione ad albero del controllo DemoCalculator e dei controlli che lo costituiscono. I controlli contenitore come il SplitContainer visualizzano i controlli figli come sottonodi nell'albero. È anche possibile rinominare i controlli direttamente usando la finestra Struttura documento.

2. Nella finestra Struttura documento, fare clic con il pulsante destro del mouse su button1, e quindi selezionare Rinomina (tastiera: F2). Modificare il nome in sevenButton.

3. Usando la finestra Struttura documento, rinominare i controlli Button dal nome generato dal designer al nome di produzione in base all'elenco seguente.

   • button1 per sevenButton

   • button2 per eightButton

   • button3 per nineButton

   • button4 per divisionButton

   • button5 per clearButton

   • button6 per fourButton

   • button7 per fiveButton

   • da button8 a sixButton

   • pulsante9 per pulsanteMoltiplicazione

   • button11 per oneButton

   • button12 per twoButton

   • pulsante13 per pulsanteTre

   • pulsante14 per sottrazionePulsante

   • button15 per pulsanteUguale

   • button16 to zeroButton

   • button17 per changeSignButton

   • button18 a decimalButton

   • tasto19 per aggiungiPulsante

4. Utilizzando le finestre Struttura documento e proprietà , modificare il valore della proprietà Text per ogni nome di controllo Button in base all'elenco seguente:

   • Modificare la proprietà text del controllo sevenButton in 7

   • Modificare la proprietà di testo del controllo eightButton in 8

   • Modificare la proprietà text del controllo nineButton in 9

   • Modificare la proprietà di testo del controllo divisionButton in / (barra obliqua)

   • Modificare la proprietà del testo del controllo clearButton in Clear

   • Modificare la proprietà di testo del controllo fourButton in 4

   • Modificare la proprietà text del controllo fiveButton in 5

   • Modificare la proprietà di testo del controllo sixButton in 6

   • Modificare la proprietà TEXT del pulsante di controllo multiplicationButton in * (asterisco).

   • Modificare la proprietà di testo del controllo oneButton in 1

   • Modificare la proprietà del testo del controllo twoButton in 2

   • Modificare la proprietà di testo del controllo threeButton in 3

   • Modificare la proprietà testo del controllo subtractionButton in "- (trattino)"

   • Modificare la proprietà di testo del controllo equalsButton in = (segno di uguale)

   • Modificare la proprietà di testo del controllo zeroButton in 0

   • Modificare la proprietà di testo del controllo changeSignButton in +/-

   • Modificare la proprietà di testo del controllo decimalButton in . (periodo)

   • Modificare la proprietà di testo del controllo addButton in + (segno più)

5. Nell'area di progettazione, selezionare tutti i controlli Button tenendo premuto al contempo il tasto MAIUSC.

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

Questo set di istruzioni completa la progettazione del controllo DemoCalculator. Tutto ciò che rimane consiste nel fornire la logica della calcolatrice.

I pulsanti nel controllo DemoCalculator hanno gestori eventi che possono essere usati per implementare gran parte della logica della calcolatrice. La Progettazione di Windows Forms consente di implementare gli stub di tutti i gestori eventi per tutti i pulsanti con una sola selezione.

1. Nell'area di progettazione selezionare tutti i controlli Button selezionandoli tenendo premuto il tasto MAIUSC.

2. Selezionare uno dei controlli Button.

   L'editor di codice si apre sui gestori di eventi generati dalla finestra di progettazione.

Poiché questa esercitazione è incentrata sul progettista, vengono omessi i dettagli di implementazione della funzionalità del calcolatore.

Poiché il controllo DemoCalculator eredita dalla classe UserControl, è possibile testarne il comportamento con il contenitore di test usercontrol . Per altre informazioni, vedere Procedura: Testare il comportamento di runtime di un oggetto UserControl.

1. Premere F5 per compilare ed eseguire il controllo DemoCalculator nel Contenitore di test UserControl.

2. Selezionare il bordo tra i pannelli SplitContainer e trascinarlo a sinistra e a destra. Il TableLayoutPanel e tutti i suoi controlli secondari vengono ridimensionati per adattarsi allo spazio disponibile.

3. Al termine del test del controllo, selezionare Chiudi.

Il controllo DemoCalculator può essere utilizzato in altri controlli compositi o in un modulo. Nella procedura seguente viene descritto come usarlo.

Il primo passaggio consiste nel creare il progetto dell'applicazione. Questo progetto verrà usato per compilare l'applicazione che mostra il controllo personalizzato.

1. Aggiungere un nuovo progetto di Windows Forms App (.NET Framework) alla soluzione esistente e denominarlo DemoCalculatorTest.

2. In Esplora soluzioni, fare clic con il pulsante destro del mouse sul progetto DemoCalculatorTest, e quindi selezionare Aggiungi>Riferimento per aprire la finestra di dialogo Gestione Riferimenti.

3. Passare alla scheda Progetti e quindi selezionare il progetto DemoCalculatorLib per aggiungere il riferimento al progetto di test.

4. Fare clic con il pulsante destro del mouse su DemoCalculatorTestin Esplora Soluzionie quindi selezionare Imposta come progetto di avvio.

5. Nella Progettazione di Windows Form, aumentare le dimensioni del form a circa 1400 x 1000.

Per usare il controllo DemoCalculator in un'applicazione, è necessario inserirlo in un modulo.

1. Nella Casella degli strumenti, espandi il nodo Componenti DemoCalculatorLib.

2. Trascina il controllo DemoCalculator dalla barra degli strumenti sul form. Spostare il controllo nell'angolo superiore sinistro del form. Quando il controllo è vicino ai bordi della maschera, vengono visualizzate delle linee di allineamento. Le linee di ancoraggio indicano la distanza della proprietà Padding della maschera e della proprietà Margin del controllo. Posizionare il controllo in corrispondenza della posizione indicata dalle guide di allineamento.

   Per ulteriori informazioni, vedere Procedura dettagliata: Disporre i controlli usando le guide di allineamento.

3. Trascinare un controllo Button dalla casella degli strumenti e rilasciarlo sul modulo.

4. Spostare il controllo Button attorno al controllo DemoCalculator e osservare dove vengono visualizzate le guide di allineamento. È possibile allineare i controlli in modo preciso e semplice usando questa funzionalità. Elimina il controllo Button al termine.

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

6. Modificare il valore della proprietà Dock in Fill.

7. Selezionare il modulo e quindi espandere il nodo della proprietà Padding. Modificare il valore di All in 20.

   Le dimensioni del controllo DemoCalculator vengono ridotte per contenere il nuovo valore Padding del modulo.

8. Ridimensionare il modulo trascinando le varie maniglie di ridimensionamento in posizioni differenti. Osservare il modo in cui il controllo DemoCalculator viene ridimensionato per adattarsi.

Questo articolo ha illustrato come costruire l'interfaccia utente per una semplice calcolatrice. Per continuare, è possibile estendere la funzionalità implementando la logica della calcolatrice, quindi pubblicare l'app usando ClickOnce. In alternativa, passare a un'esercitazione diversa in cui è creare un visualizzatore di immagini usando Windows Form.

• controlli Windows Forms
• l'accessibilità per i controlli Windows Form
• Pubblica con ClickOnce