Esercitazione: Creare una semplice applicazione WPF con C#

Completando questa esercitazione, si acquisisce familiarità con molti strumenti, finestre di dialogo e finestre di progettazione che è possibile usare quando si sviluppano applicazioni con Visual Studio. Si crea un'applicazione "Hello, World", si progetta l'interfaccia utente, si aggiungono codice ed errori di debug, mentre si apprende come lavorare nell'ambiente di sviluppo integrato (IDE).

Prerequisiti

• Se non è ancora stato installato Visual Studio, accedere alla pagina Download di Visual Studio per installarlo gratuitamente.
• Assicurarsi che sia installato il carico di lavoro Sviluppo di applicazioni desktop .NET. È possibile verificare questa configurazione nel Programma di installazione di Visual Studio.
• Per questa esercitazione è possibile usare .NET Framework o .NET Core. .NET Core è il framework più recente e più moderno. .NET Core richiede Visual Studio 2019 versione 16.3 o successiva.

Cos'è WPF?

WPF o Windows Presentation Foundation è un framework dell'interfaccia utente (interfaccia utente) che crea applicazioni client desktop. La piattaforma di sviluppo WPF supporta un'ampia serie di funzionalità di sviluppo di applicazioni, inclusi un modello applicativo, risorse, controlli, elementi grafici, layout, data binding, documenti e sicurezza.

WPF fa parte di .NET, quindi se sono state compilate in precedenza applicazioni con .NET usando ASP.NET o Windows Form, l'esperienza di programmazione dovrebbe essere familiare. WPF usa xaml extensible application markup language per fornire un modello dichiarativo per la programmazione delle applicazioni. Per altre informazioni, vedere Panoramica di WPF .NET.

Configurare IDE

Quando si avvia Visual Studio, si apre la finestra iniziale. Selezionare Continua senza codice per aprire l'ambiente di sviluppo. Vengono visualizzate le finestre degli strumenti, i menu e le barre degli strumenti e lo spazio della finestra principale. Le finestre degli strumenti sono ancorate sui lati sinistro e destro della finestra dell'applicazione. La casella di ricerca, la barra dei menu e la barra degli strumenti standard si trovano nella parte superiore. Quando si carica una soluzione o un progetto, gli editor e le finestre di progettazione vengono visualizzati nell'area al centro della finestra dell'applicazione. Quando si sviluppa un'applicazione, si passa la maggior parte del tempo in questa area centrale.

Creare il progetto

Quando si crea un'applicazione in Visual Studio, è innanzitutto necessario creare un progetto e una soluzione. Per questo esempio, si crea un progetto Windows Presentation Foundation (WPF).

1. Aprire Visual Studio.

2. Nella finestra iniziale scegliere Crea un nuovo progetto.

   

3. Nella schermata Crea un nuovo progetto cercare "WPF", scegliere Applicazione WPF e quindi scegliere Avanti.

   

4. Nella schermata successiva assegnare al progetto un nome, HelloWPFApp e scegliere Avanti.

   

5. Nella finestra Informazioni aggiuntive verificare che .NET 8.0 sia selezionato per il framework di destinazione. Scegliere Crea.

   

Visual Studio crea il progetto e la soluzione HelloWPFApp e in Esplora soluzioni vengono visualizzati i vari file. WPF Designer include una doppia visualizzazione con una visualizzazione Progettazione e una visualizzazione XAML di MainWindow.xaml. È possibile far scorrere la barra di divisione in modo da mostrare più o meno elementi in ciascuna visualizzazione. È possibile scegliere di visualizzare solo la visualizzazione degli elementi visivi o solo la visualizzazione XAML.

Nota

Per altre informazioni su XAML (eXtensible Application Markup Language), vedere la panoramica di XAML per WPF.

Dopo aver creato il progetto, sarà possibile personalizzarlo. A tale scopo, scegliere Finestra Proprietà dal menu Visualizza o premere F4. È quindi possibile visualizzare e modificare le opzioni per elementi di progetto, controlli e altri elementi in un'applicazione.

Progettare l'interfaccia utente

Se la finestra di progettazione non è aperta, selezionare MainWindow.xaml e premere MAIUSC+F7 per aprire la finestra di progettazione.

A questa applicazione vengono aggiunti tre tipi di controlli: un TextBlock controllo, due RadioButton controlli e un Button controllo .

Aggiungere un controllo TextBlock

1. Premere CTRL+Q per attivare la casella di ricerca e digitare Casella degli strumenti. Scegliere Visualizza > casella degli strumenti dall'elenco dei risultati.

2. Nella casella degli strumenti espandere il nodo Controlli WPF comuni per visualizzare il controllo TextBlock.

   

3. Aggiungere un controllo TextBlock all'area di progettazione scegliendo l'elemento TextBlock e trascinandolo nell'area di progettazione nella finestra. Centrare il controllo nella parte superiore della finestra. È possibile usare le linee guida per centrare il controllo.

   La finestra dovrebbe essere simile all'immagine seguente:

   

   Il markup XAML sarà simile all'esempio seguente:

   <Grid>
       <TextBlock HorizontalAlignment="Left" Margin="387,60,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
   </Grid>
   

Personalizzare il testo nel blocco di testo

1. Nella visualizzazione XAML individuare il markup di TextBlock e modificare l'attributo Text da TextBox a Select a message option and then choose the Display button.

   Il markup XAML sarà simile all'esempio seguente:

   <Grid>
       <TextBlock HorizontalAlignment="Left" Margin="387,60,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
   </Grid>
   

2. Se si vuole, riallineare al centro il controllo TextBlock e quindi salvare le modifiche premendo CTRL+S o usando la voce di menu File.

Aggiungere quindi due controlli RadioButton al form.

Aggiungere pulsanti di opzione

1. Nella casella degli strumenti cercare il controllo RadioButton.

   

2. Aggiungere due controlli RadioButton all'area di progettazione scegliendo l'elemento RadioButton e trascinandolo nell'area di progettazione nella finestra. Selezionare i pulsanti e usare i tasti di direzione per spostare i pulsanti in modo che vengano visualizzati affiancati sotto il controllo TextBlock. È possibile usare le linee guida per allineare i controlli.

   La finestra dovrebbe risultare simile alla seguente:

   

3. Nella finestra Proprietà per il controllo RadioButton sinistro modificare la proprietà Nome (la proprietà nella parte superiore della finestra Proprietà ) in HelloButton.

   

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

Aggiungere quindi il testo visualizzato per ogni controllo RadioButton. Nella procedura seguente verrà aggiornata la proprietà Contenuto per un controllo RadioButton.

Aggiungere testo visualizzato per ogni pulsante di opzione

1. Aggiornare l'attributo Content per i due pulsanti HelloButton di opzione e GoodbyeButton in "Hello" e "Goodbye" in XAML. Il markup XAML dovrebbe avere un aspetto simile all'esempio seguente:

   <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="252,47,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
        <RadioButton x:Name="HelloButton" Content="Hello" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
        <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
   </Grid>
   

Impostare un pulsante di opzione che deve essere selezionato per impostazione predefinita

In questo passaggio viene impostato HelloButton per essere controllato per impostazione predefinita in modo che uno dei due pulsanti di opzione sia sempre selezionato.

1. Nella visualizzazione XAML individuare il markup per HelloButton.

2. Aggiungere un attributo IsChecked e impostarlo su True. In particolare, aggiungere IsChecked="True".

   Il markup XAML dovrebbe avere un aspetto simile all'esempio seguente:

   <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="252,47,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
        <RadioButton x:Name="HelloButton" Content="Hello" IsChecked="True" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
        <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
   </Grid>
   

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

Aggiungere il controllo del pulsante

1. Nella casella degli strumenti cercare il controllo Button e aggiungerlo all'area di progettazione sotto i controlli RadioButton trascinandolo nel modulo nella visualizzazione Progettazione. Le linee guida consentono di centrare il controllo.

2. Nella visualizzazione XAML modificare il valore di Contenuto per il controllo Button da Content="Button" a Content="Display", e salvare le modifiche.

   La finestra dovrebbe essere simile alla schermata seguente.

   

   Il markup XAML dovrebbe avere un aspetto simile all'esempio seguente:

   <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="252,47,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
        <RadioButton x:Name="HelloButton" Content="Hello" IsChecked="True" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
        <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
        <Button Content="Display" HorizontalAlignment="Left" Margin="377,270,0,0" VerticalAlignment="Top" Width="75"/>
   </Grid>
   

Aggiungere codice al pulsante Visualizza

Quando l'applicazione è in esecuzione, si apre una finestra di messaggio se si sceglie un pulsante di opzione e si seleziona il pulsante Visualizza. Viene visualizzata una finestra di messaggio per Hello e un'altra viene visualizzata per Goodbye. Per creare questo comportamento, aggiungi codice all'evento Button_Click in MainWindow.xaml.cs.

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

   Si apre MainWindow.xaml.cs , con il cursore nell'evento Button_Click .

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

   Quando fai doppio clic sul pulsante Visualizza , Click="Button_Click" viene aggiunto al codice XAML.

   Il markup XAML dovrebbe avere un aspetto simile all'esempio seguente:

   <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="252,47,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
        <RadioButton x:Name="HelloButton" Content="Hello" IsChecked="True" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
        <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
        <Button Content="Display" HorizontalAlignment="Left" Margin="377,270,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
   </Grid>
   

2. Immetti il codice seguente:

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

3. Salvare l'applicazione.

Eseguire il debug e il test dell'applicazione

Eseguire quindi il debug dell'applicazione per cercare gli errori e verificare che entrambe le finestre di messaggio vengano visualizzate correttamente. Le istruzioni seguenti indicano come compilare e avviare il debugger, ma in un secondo momento può essere utile leggere Compilare un'applicazione WPF (WPF) e Debug WPF per altre informazioni.

Cambiare il nome di MainWindow.xaml

Assegnare a MainWindow un nome più specifico. In Esplora soluzioni fare clic con il pulsante destro del mouse su MainWindow.xaml e scegliere Rinomina. Rinominare il file in Greetings.xaml.

Trovare e correggere errori

In questo passaggio viene rilevato l'errore causato in precedenza modificando il nome del file MainWindow.xaml .

Avviare il debug e trovare l'errore

1. Avviare il debugger premendo F5 o selezionando Debug, quindi Avvia debug.

   Viene visualizzata una finestra Modalità interruzione e la finestra Output indica che si è verificata un'eccezione IOException: Impossibile individuare la risorsa mainwindow.xaml.

   

2. Arrestare il debugger scegliendo Debug>Termina debug.

Il file MainWindow.xaml è stato rinominato come Greetings.xaml all'inizio di questa esercitazione, ma il codice fa ancora riferimento a MainWindow.xaml come URI di avvio per l'applicazione. Di conseguenza il progetto non può essere avviato.

Specificare Greetings.xaml come URI di avvio

1. In Esplora soluzioni aprire il file App.xaml.

2. Passare StartupUri="MainWindow.xaml" a StartupUri="Greetings.xaml"e salvare le modifiche.

Come passaggio facoltativo, evita confusione per modificare il titolo della finestra dell'applicazione in modo che corrisponda a questo nuovo nome.

1. In Esplora soluzioni aprire il file Greetings.xaml appena rinominato.

2. Modificare il valore della proprietà Window.Title da Title="MainWindow" a Title="Greetings"e salvare le modifiche.

Avviare nuovamente il debugger premendo F5. Verrà visualizzata la finestra Greetings dell'applicazione.

Chiudere la finestra dell'applicazione per arrestare il debug.

Eseguire il debug con punti di interruzione

Aggiungendo alcuni punti di interruzione, è possibile testare il codice durante il debug. È possibile aggiungere punti di interruzione selezionando Debug>Imposta/Rimuovi punto di interruzione, facendo clic sul margine sinistro dell'editor accanto alla riga di codice in cui si vuole inserire l'interruzione oppure premendo F9.

Aggiungere punti di interruzione

1. Aprire 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.

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

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

4. Premere F9 per aggiungere un punto di interruzione e poi premere F5 per avviare il debug.

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

   La riga MessageBox.Show("Hello.") viene evidenziata in giallo. Nella parte inferiore dell'IDE, le finestre Auto, Variabili locali ed Espressioni di controllo sono ancorate insieme sul lato sinistro e le finestre Stack di chiamate, Punti di interruzione, Impostazioni eccezione, Comando, Controllo immediato e Output sono ancorate insieme sul lato destro.

   

6. Nella barra dei menu scegliere Debug>Esci da istruzione/routine.

   L'applicazione riprende l'esecuzione e verrà visualizzata una finestra di messaggio con la parola "Hello".

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

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

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

9. Scegliere F5 per proseguire con il debug. Quando verrà visualizzata la finestra del messaggio, scegliere il pulsante OK per chiuderla.

10. Chiudere la finestra dell'applicazione per arrestare il debug.

11. Nella barra dei menu scegliere Debug>Disabilita tutti i punti di interruzione.

Visualizzare una rappresentazione degli elementi dell'interfaccia utente

Nell'app in esecuzione dovrebbe essere visualizzato un widget visualizzato nella parte superiore della finestra. Il widget è un helper di runtime che fornisce accesso rapido ad alcune funzionalità di debug utili. Selezionare il primo pulsante Vai alla struttura ad albero visuale attiva. Verrà visualizzata una finestra con una struttura ad albero contenente tutti gli elementi visivi della pagina. Espandere i nodi per trovare i pulsanti aggiunti.

Compilare una versione di rilascio dell'applicazione

Dopo aver verificato che tutto funzioni, sarà possibile preparare una build di versione dell'applicazione.

1. Nel menu principale selezionare Compila>Pulisci soluzione per eliminare i file intermedi e di output creati durante le compilazioni precedenti. Questo passaggio non è obbligatorio, ma pulisce gli output della compilazione di debug.

2. Modificare la configurazione della build per HelloWPFApp da Debug a Rilascio usando il controllo a discesa sulla barra degli strumenti (al momento è selezionato "Debug").

3. Compilare la soluzione scegliendo Compila>Compila soluzione.

L'esercitazione è stata completata. È possibile trovare il file con estensione exe compilato nella directory del progetto e della soluzione (…\HelloWPFApp\HelloWPFApp\bin\Release).

Passaggi successivi

L'esercitazione è stata completata. Per altre informazioni, continuare con le esercitazioni seguenti.

Continuare con altre esercitazioni su WPF

Vedi anche

• Suggerimenti per la produttività