Procedura dettagliata: esplorare l'IDE di Visual Studio con C# o Visual Basic

Completando questa guida, acquisirete familiarità con molti degli strumenti, finestre di dialogo e delle finestre di progettazione che potrete utilizzare quando svilupperete applicazioni con Visual Studio.Creerete una semplice un'applicazione stile "Hello, World", progetterete l'interfaccia utente, aggiungerete codice ed eseguirete il debug di errori, mentre imparerete molto su come lavorare nell'ambiente di sviluppo integrato (IDE).

Di seguito sono elencate le diverse sezioni di questo argomento:

Configure the IDE

Create a simple application

Debug and test the application

[!NOTA]

Questa procedura dettagliata si basa sull'edizione Professional di Visual Studio 2012.È possibile che nella copia di Visual Studio in uso i nomi o i percorsi di alcuni elementi dell'interfaccia utente non corrispondano.Questi elementi sono determinati dall'edizione di Visual Studio in uso e dalle impostazioni utilizzate.Per ulteriori informazioni sulle impostazioni, vedere Impostazioni di Visual Studio.

Configurare l'IDE .

Quando si avvia Visual Studio per la prima volta, è necessario scegliere una combinazione di impostazioni che applica un set di personalizzazioni predefinite all'IDE.Ogni combinazione di impostazioni è stata progettata per rendervi più semplice sviluppare applicazioni.

Figura 1: Scegliere la finestra di dialogo Impostazioni di Ambiente Predefinite

Questa guida è stata scritta con le impostazioni Impostazioni Generali per lo Sviluppo applicate, che implementa la maggior quantità di personalizzazioni IDE.È possibile modificare la combinazione di impostazioni tramite Importazione/Esportazione Guidata delle Impostazioni.Per ulteriori informazioni, vedere Procedura: modificare determinate impostazioni.

Dopo avere aperto Visual Studio, è possibile individuare la finestre degli strumenti, i menu,le barre degli strumenti e lo spazio principale della finestra.Le finestre degli strumenti sono ancorate ai lati sinistro e destro della finestra dell'applicazione, con Avvio veloce, la barra dei menu e la barra degli strumenti standard in cima.Al centro della finestra dell'applicazione c'è Pagina iniziale.Quando una soluzione o un progetto vengono caricati, le finestre di editor e di progettazione vengono visualizzate in questo spazio.Quando si sviluppa un'applicazione, si passerà la maggiore parte del tempo in questa area centrale.

Figura 2: L'IDE di Visual Studio

È possibile apportare personalizzazioni aggiuntive a Visual Studio, come modificare il tipo di carattere e la dimensione del testo nell'editor o il tema di colore dell'IDE, la finestra di dialogo Opzioni.A seconda della combinazione di impostazioni applicata, alcuni elementi della finestra di dialogo potrebbero non essere visualizzati automaticamente.È possibile assicurarsi che tutte le possibili opzioni appaiano selezionando la casella di controllo Mostra tutte le impostazioni.

Figura 3: Opzioni della finestra di dialogo

In questo esempio, verrà modificato il colore del tema dell'IDE da chiaro a scuro.

Modificare il colore del tema dell'IDE.

1. Aprire la finestra di dialogo Opzioni.

   

2. Modificare Colore Tema in Scuro, quindi scegliere OK.

   

I colori in Visual Studio devono corrispondere all'immagine seguente:

Il colore del tema utilizzato nel resto di questa procedura dettagliata, è il tema chiaro.Per ulteriori informazioni sulla personalizzazione dell'IDE, vedere Personalizzazione dell’ambiente di sviluppo.

Creare una semplice applicazione.

Creazione del progetto.

Quando si crea un'applicazione in Visual Studio, creare innanzitutto un progetto e una soluzione.Per questo esempio, verrà creata una soluzione Windows Presentation Foundation.

Per creare il progetto WPF

1. Creare un nuovo progetto.Nella barra del menu, scegliere File, Nuovo, Progetto.

   

   È inoltre possibile digitare il nuovo progetto nella casella Avvio veloce per eseguire la stessa operazione.

   

2. Scegliere Visual Basic o il modello di applicazione WPF visual C# e quindi nominare il progetto HelloWPFApp.

   

   OR

   

Il progetto e la soluzione HelloWPFApp vengono creati e i file diversi vengono visualizzate in Esplora soluzioni.Il WPF Designer mostrata una vista di progettazione e una visualizzazione XAML di MainWindow.xaml, in una visualizzazione suddivisa.Per ulteriori informazioni, vedere WPF Designer per gli sviluppatori di Windows Form.Gli elementi seguenti appaiono in Esplora soluzioni:

Figura 5: Elementi di progetto

Dopo aver creato il progetto, è possibile personalizzarlo.Utilizzando la finestra Proprietà, è possibile visualizzare e modificare le opzioni per gli elementi del progetto, per i controlli e per altri elementi in un'applicazione.Utilizzando le proprietà del progetto e le proprietà della pagina , è possibile visualizzare e modificare le opzioni per i progetti e le soluzioni.

Per cambiare il nome di MainWindow.xaml

1. Nella seguente procedura, verranno assegnato a MainWindow un nome più specifico.In Esplora soluzioni, selezionare MainWindow.xaml.Verrà visualizzata la finestra Proprietà per il file al di sotto della finestra.Se non viene visualizzata la finestra Proprietà, selezionare MainWindow.xaml in Esplora soluzioni, scegliere dal menu di scelta rapida (facendo clic con il pulsante destro del mouse) e selezionare Proprietà.Cambiare il Nome File al progetto per Greetings.xaml.

   

   Esplora soluzioni visualizza il nome del file che è ora Greetings.xaml e che il nome di MainWindow.xaml.vb o MainWindow.xaml.cs è Greetings.xaml.vb o Greetings.xaml.cs.

2. In Esplora soluzioni, aprire Greetings.xaml nella finestra di progettazione e selezione la barra del titolo della finestra.

3. Nella finestra Proprietà modificare il valore della proprietà Titolo con Greetings.

   Attenzione
   Questa modifica comporta un errore che illustrerà come eseguire il debug e correggere l'errore successivamente.

La barra del titolo per MainWindow.xaml indica ora i saluti.

Progettare l'interfaccia utente (UI)

Verranno aggiunti tre tipi di controlli all'applicazione: un controllo TextBlock, due controlli RadioButton e controllo del pulsante.

Aggiungere un controllo TextBlock

1. Aprire la finestra Casella degli strumenti.Si dovrebbe trovare sulla sinistra nella finestra di progettazione.È inoltre possibile aprirlo dal menu Visualizza o digitando CTRL+ALT+X.

2. Nella Casella degli strumenti, cercare controllo TextBlock.

   

3. Aggiungere un controllo TextBlock nell'area di progettazione e allineare il controllo nella parte superiore della finestra.

La vostra finestra dovrebbe assomigliare alla figura seguente:

Figura 7: Finestra greetings con il controllo TextBlock

Il markup XAML dovrebbe essere analogo al seguente:

<TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Center" RenderTransformOrigin="4.08,2.312" Margin="237,57,221,238"><Run Text="TextBlock"/><InlineUIContainer><TextBlock TextWrapping="Wrap" Text="TextBlock"/>

Personalizzare il testo del text block

1. Nella visualizzazione XAML, individuare il markup di TextBlock e modificare l'attributo di testo: Text=”Select a message option and then choose the Display button.”

2. Se il TextBlock non si espande per adattarsi alla finestra di progettazione, ingrandire il controllo del TextBlock in modo da visualizzare tutto il testo.

3. Salvare le modifiche.

Successivamente, aggiungerete due controlli RadioButton al form.

Aggiungere un bottone radio

1. Nella Casella degli strumenti, cercare controllo del RadioButton.

   

2. Aggiungere due controlli RadioButton all'area di progettazione e spostarli in modo che vengano visualizzati "fianco a fianco" sotto il controllo del TextBlock.

   La finestra dovrebbe risultare simile a questa:

   Figura 8: RadioButtons nella finestra Greetings.

   

3. Nella finestra Proprietà per il controllo del RadioButton sinistro, modificare la proprietà Nome (la proprietà nella parte superiore della finestra Proprietà ) a RadioButton1.

4. Nella finestra Proprietà per controllo destro di RadioButton, modificare la proprietà Nome in RadioButton2, quindi salvare le modifiche.

È ora possibile aggiungere il testo visualizzato per ogni controllo RadioButton.La seguente procedura aggiorna la proprietà Contenuto per un controllo RadioButton.

Aggiungere testo visualizzato per ogni pulsante di opzione

1. Nell'area di progettazione, aprire il menu di scelta rapida per RadioButton1, scegliere Modifica testoquindi immettere Hello.

2. Aprire il menu di scelta rapida per RadioButton2, scegliere Modifica testoquindi immettere Goodbye.

L'elemento dell'interfaccia utente finale che avete aggiunto è un controllo Button.

Aggiungere il controllo pulsante.

1. Nella Casella degli strumenti, cercare il controllo Button , quindi aggiungerlo all'area di progettazione, nei controlli RadioButton.

2. In visualizzazione XAML, sostituire il valore di Contenuto per il controllo pulsante da Content=”Button” a Content=”Display”, quindi salvare le modifiche.

   L'aspetto del markup dovrebbe essere simile all'esempio seguente: <Button Content="Display" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="215,204,0,0"/>

La vostra finestra dovrebbe assomigliare alla figura seguente.

Figura 9: Interfaccia utente Greetings finale

Aggiungere codice al Pulsante Visualizza.

Quando questa applicazione viene eseguita appare una finestra di messaggio successivamente alla scelta di un pulsante d'opzione da parte dell'utente, quindi sceglie il pulsante Visualizza.Apparirà una finestra di messaggio per Hello e una per Goodbye.Per creare questo comportamento, dovrete aggiungere del codice all'evento Button_Clic in Greetings.xaml.vb o in Greetings.xaml.cs.

Aggiungere il codice per visualizzare le finestre di messaggio

1. Nell'area di progettazione fare doppio clic sul pulsante Display.

   Greetings.xaml.vb o Greetings.xaml.cs si apriranno, con il cursore nell'evento Button_Clic.È inoltre possibile aggiungere un gestore per gli eventi Click come segue:

   Per Visual Basic, il gestore eventi deve essere analogo al seguente:

   Private Sub Button_Click_1(sender As Object, e As RoutedEventArgs)
   
   End Sub
   

   Per Visual C#, il gestore eventi deve essere analogo al seguente:

   private void Button_Click_1(object sender, RoutedEventArgs e)
   {
   
   }
   

2. In caso di codice Visual Basic utilizzare:

   If RadioButton1.IsChecked = True Then
       MessageBox.Show("Hello.")
   Else RadioButton2.IsChecked = True
       MessageBox.Show("Goodbye.")
   End If
   

   In caso di codice Visual C# utilizzare:

   if (RadioButton1.IsChecked == true)
   {
       MessageBox.Show("Hello.");
   }
   else
   {
       RadioButton2.IsChecked = true;
       MessageBox.Show("Goodbye.");
   }
   

3. Salvare l'applicazione.

Eseguire il debug e il test dell'applicazione.

Successivamente, si eseguirà il debug dell'applicazione per rilevare eventuali errori e assicurarsi che entrambe le finestre di messaggio vengano visualizzate correttamente.Per ulteriori informazioni, vedere Compilazione di un'applicazione WPF (WPF) e Debug di WPF.

Trovare e correggere gli errori

In questo passaggio troverete l'errore causato dalla modifica fatta precedentemente, nella finestra principale, al file XAML.

Per avviare il debug e individuare l'errore

1. Avviare il debugger selezionando Debug, quindi Avvia debug.

   

   Verrà visualizzata una finestra di dialogo in cui è indicato che si è verificata un'eccezione IOException: Impossibile individuare la risorsa "mainwindow.xaml".

2. Scegliere il pulsante OK, quindi arrestare il debugger.

   

Il file Mainwindow.xaml è stato rinominato in Greetings.xaml all'inizio di questa procedura dettagliata, ma la soluzione punta ancora a Mainwindow.xaml come URI di avvio per l'applicazione. Il progetto non può pertanto essere avviato.

Per specificare Greetings.xaml come l'URI di avvio

1. In Esplora soluzioni, aprire il file App.xaml (nel progetto C#) o il file Application.xaml (in un progetto Visual Basic) nella visualizzazione XAML (non può essere aperto nella Finestra di progettazione).

2. Modificare StartupUri="MainWindow.xaml" in StartupUri="Greetings.xaml"e salvare le modifiche.

Avviare il debugger di nuovo.Verrà visualizzata la finestra Greetings dell'applicazione.

Per eseguire il debug con i punti di interruzione

Aggiungendo alcuni punti di interruzione, è possibile testare il codice durante il debug.È possibile aggiungere punti di interruzione selezionando Debug, Attiva/disattiva punto di interruzione sulla barra dei menu o facendo clic sul margine sinistro dell'editor accanto alla riga di codice in cui si desidera impostare l'interruzione.

Aggiungere punti di interruzione.

1. Aprire Greetings.xaml.vb o Greetings.xaml.cs e selezionare la riga seguente: MessageBox.Show("Hello.")

2. Aggiungere un punto di interruzione dal menu selezionando Debug, quindi Imposta/Rimuovi punto di interruzione.

   

   Un cerchio rosso verrà visualizzato accanto alla riga di codice nel margine di estrema sinistra della finestra dell'editor.

3. Selezionare la seguente riga: MessageBox.Show("Goodbye.").

4. Premete il tasto F9 per aggiungere un punto di interruzione e quindi il tasto F5 per avviare il debug.

5. Nella finestra Greetings, scegliere il pulsante di opzione Hello quindi scegliere il pulsante Visualizza.

   La riga MessageBox.Show("Hello.") viene evidenziata in giallo.Nella parte inferiore dell'IDE, le finestre Auto, Locali e le Espressioni di controllo sono ancorate al lato sinistro e lo Stack di chiamate, i Punti di interruzione, il comando e le Finestre di output sono ancorati insieme al lato destro.

6. Scegliere Istruzione in uscita dal menu Debug.

   L'applicazione riprende l'esecuzione; apparirà una finestra di messaggio con la parola "Hello".

7. Scegliere il pulsante OK per chiudere la finestra del messaggio.

8. Nella finestra Greetings, scegliere il pulsante di opzione Goodbye quindi scegliere il pulsante Visualizza.

   La riga MessageBox.Show("Goodbye.") viene evidenziata in giallo.

9. Scegliere il tasto F5 per continuare il debug.Quando viene visualizzata la finestra del messaggio, scegliere il pulsante OK per chiuderla.

10. Premere i tasti MAIUSC + F5 per interrompere il debug.

11. Scegliere Disabilita tutti i punti di interruzione dalla barra dei menu Debug.

Compilare una versione finale dell'applicazione

Dopo avere verificato che tutto funziona, è possibile preparare una build di rilascio dell'applicazione.

Pulire i file della soluzione e compilare una versione finale

1. Selezionare Compila, quindi Pulisci soluzione per eliminare i file intermedi e di output creati durante le compilazioni precedenti.

   

2. Modificare la configurazione di compilazione per HelloWPFApp da Debug a Release.

   

3. Compilare la soluzione.

   

Congratulazioni, avete completato questa guida!Se si desidera visualizzare ulteriori esempi, vedere Esempi di Visual Studio.

Vedere anche

Concetti

Novità di Visual Studio 2012

Guida introduttiva a Visual Studio

Suggerimenti relativi alla produttività per Visual Studio