Esercitazione: Creare un'applicazione WPF con Visual Basic

In questa esercitazione si creerà un'applicazione usando Visual Basic nell'ambiente di sviluppo integrato (IDE) di Visual Studio. Il programma userà il framework dell'interfaccia utente di Windows Presentation Foundation (WPF). Usare questa esercitazione per acquisire familiarità con molti strumenti, finestre di dialogo e finestre di progettazione che è possibile usare in Visual Studio.

In questa esercitazione si apprenderà come:

• Creare il progetto
• Configurare la finestra e aggiungere testo
• Aggiungere pulsanti e codice
• Eseguire il debug e testare l'applicazione
• Debug con punti di interruzione
• Creare una versione di rilascio

Che cos'è WPF?

WPF, o Windows Presentation Foundation, è un framework UI (interfaccia utente) per la creazione di applicazioni client desktop. La piattaforma di sviluppo WPF supporta un ampio set di funzionalità di sviluppo di applicazioni, tra cui un modello di applicazione, risorse, controlli, grafica, 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 utilizza il linguaggio di markup per applicazioni estensibili XAML per fornire un modello dichiarativo per la programmazione di applicazioni. Per altre informazioni, vedere Panoramica di WPF .NET.

Prerequisiti

Per completare questa esercitazione è necessario Visual Studio. Visita la pagina dei download di Visual Studio per una versione gratuita.

Creare il progetto

Quando si crea un'applicazione in Visual Studio, si crea prima di tutto un progetto. In questa esercitazione creare un progetto Windows Presentation Foundation.

1. Apri Visual Studio.

2. Nella finestra iniziale scegliere Crea un nuovo progetto.

   

3. Nella finestra Crea un nuovo progetto cercare "WPF" e selezionare Visual Basic nell'elenco a discesa Tutte le lingue . Scegliere App WPF (.NET Framework) e quindi scegliere Avanti.

   

4. Assegnare un nome al progetto , HelloWPFApp e selezionare Crea.

   Visual Studio crea il progetto e la soluzione HelloWPFApp. esplora soluzioni mostra i vari file.

   

Il designer WPF mostra una vista progettazione e una vista XAML di MainWindow.xaml in visualizzazione divisa.

Annotazioni

Per altre informazioni su eXtensible Application Markup Language (XAML), vedi Panoramica di XAML per WPF.

Configurare la finestra e aggiungere testo

Usando la finestra Proprietà , è possibile visualizzare e modificare le opzioni per elementi, controlli e altri elementi del progetto.

1. In Esplora soluzioni, apri il MainWindow.xaml.

2. Nella visualizzazione XAML modificare il valore della proprietà Window.Title da Title="MainWindow" a Title="Greetings".

3. Sul lato sinistro dell'IDE di Visual Studio selezionare la scheda casella degli strumenti. Se non viene visualizzato, selezionare Visualizza>casella degli strumenti dalla barra dei menu o CTRL+ALT+X.

4. Espandere Controlli WPF comuni o immettere Testo nella barra di ricerca per trovare TextBlock.

   

5. Selezionare l'elemento TextBlock e trascinarlo nella finestra nell'area di progettazione. È possibile spostare il controllo TextBlock trascinandolo. Usare le linee guida per posizionare il controllo.

   

   Il markup XAML dovrebbe essere simile all'esempio seguente:

   <TextBlock HorizontalAlignment="Left" Margin="381,100,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
   

6. Nella visualizzazione XAML individuare il markup per TextBlock e modificare l'attributo Text :

   Text="Select a message option and then choose the Display button."
   

   Ricentra il TextBlock, se necessario

7. Salvare l'app scegliendo il pulsante Salva tutto sulla barra degli strumenti. In alternativa, per salvare l'app, scegliere File>Salva tutto dalla barra dei menu oppure premere Ctrl+Shift+S. È consigliabile risparmiare in anticipo e spesso.

Aggiungere pulsanti e codice

L'applicazione usa due pulsanti di opzione e un pulsante. Usare questi passaggi per aggiungerli. Si aggiungerà codice Visual Basic al pulsante. Tale codice fa riferimento alla selezione del pulsante di opzione.

1. Nella casella degli strumenti trovare RadioButton.

   

2. Aggiungere due controlli RadioButton all'area di progettazione selezionando l'elemento RadioButton e trascinandolo nell'area di progettazione. Spostare i pulsanti selezionandoli e usando i tasti di direzione. Posizionare i pulsanti uno accanto all'altro sotto il controllo TextBlock.

   

3. Nella finestra Proprietà del controllo RadioButton sinistro modificare la proprietà Name nella parte superiore della finestra Proprietà su HelloButton.

   

4. Nella finestra Proprietà per il controllo RadioButton destro modificare la proprietà Name su GoodbyeButton.

5. Aggiornare l'attributo Content per HelloButton e GoodbyeButton a "Hello" e "Goodbye" nel XAML.

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

6. Nella visualizzazione XAML individuare il markup per HelloButton e aggiungere un attributo IsChecked :

   IsChecked="True"
   

   L'attributo IsChecked con il valore True indica che HelloButton è selezionato per impostazione predefinita. Questa impostazione indica che il pulsante di scelta è sempre attivo, anche all'avvio del programma.

7. Nella casella degli strumenti, trova il controllo Pulsante e quindi trascina un pulsante sulla superficie di progettazione sotto i controlli RadioButton.

8. Nella visualizzazione XAML modificare il valore di Content per il controllo Button da Content="Button" a Content="Display".

   <Button Content="Display" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="215,204,0,0"/>
   

   La finestra dovrebbe essere simile all'immagine seguente.

   

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

   MainWindow.xaml.vb si apre, con il cursore posizionato nell'evento Button_Click.

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

10. Aggiungere il codice seguente:

    If HelloButton.IsChecked = True Then
        MessageBox.Show("Hello.")
    ElseIf GoodbyeButton.IsChecked = True Then
        MessageBox.Show("Goodbye.")
    End If
    

Eseguire il debug e testare l'applicazione

Successivamente, si eseguirà il debug dell'applicazione per cercare gli errori e verificare che entrambe le finestre di messaggio vengano visualizzate correttamente. Per vedere il funzionamento di questo processo, il primo passaggio introduce deliberatamente un errore nel programma.

1. In Esplora soluzioni fare clic con il pulsante destro del mouse su MainWindow.xaml e scegliere Rinomina. Rinominare il file in Greetings.xaml.

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

   

3. Arresta il debugger scegliendo Debug>Arresta il debug.

   Hai rinominato MainWindow.xaml in Greetings.xaml all'inizio di questa sezione. Il codice fa ancora riferimento a MainWindow.xaml come URI di avvio per l'applicazione, quindi il progetto non può iniziare.

4. In Esplora soluzioni aprire il file Application.xaml .

5. Passare StartupUri="MainWindow.xaml" a StartupUri="Greetings.xaml"

6. Avviare di nuovo il debugger (premere F5). Dovresti ora vedere la finestra Greetings della tua applicazione.

   

7. Selezionare Hello e il pulsante Visualizza , quindi Goodbye e il pulsante Visualizza . Usare l'icona di chiusura nell'angolo superiore destro per arrestare il debug.

Per altre informazioni, vedere Creare un'applicazione WPF (WPF) e Debug wpf.

Debug con punti di interruzione

È possibile testare il codice durante il debug aggiungendo alcuni punti di interruzione.

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

2. Aggiungere un punto di interruzione premendo F9 o selezionando Debug, quindi Attiva/Disattiva punto di interruzione.

   Accanto alla riga di codice viene visualizzato un cerchio rosso nel margine sinistro della finestra dell'editor.

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

4. Premere F9 per aggiungere un punto di interruzione, quindi premere F5 per avviare il debug.

5. Nella finestra Greetings (Saluti ) selezionare il pulsante Hello (Hello ) e quindi selezionare Display ( Visualizza).

   La linea MessageBox.Show("Hello.") è evidenziata in giallo. Nella parte inferiore dell'IDE, le finestre Auto, Variabili locali e Osserva sono ancorate insieme a sinistra. Gli stack di chiamate , i punti di interruzione , le impostazioni delle eccezioni , la finestra comando , la finestra immediata , e le finestre di output sono ancorate insieme sul lato destro.

   

6. Nella barra dei menu scegliere Debug>Passo Fuori.

   L'applicazione viene avviata di nuovo. Viene visualizzata una finestra di dialogo con la parola "Hello".

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

8. Nella finestra Greetings, scegliere il pulsante radio Goodbye e quindi scegliere il pulsante Display (Visualizza).

   La linea MessageBox.Show("Goodbye.") è evidenziata in giallo.

9. Scegliere il tasto F5 per continuare il debug. Quando viene visualizzata la finestra di dialogo, scegliere OK per chiudere la finestra di dialogo.

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

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

Creare una versione di rilascio

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

1. Selezionare Compila>soluzione pulita per eliminare i file intermedi e i file di output creati durante le compilazioni precedenti.

2. Modificare la configurazione di compilazione per HelloWPFApp da Debug a Release usando il controllo a discesa sulla barra degli strumenti.

3. Selezionare Compila>soluzione di compilazione.

Congratulazioni per aver completato questa esercitazione. Puoi trovare il .exe che hai creato nella cartella della tua soluzione e progetto (...\HelloWPFApp\bin\Release).

Passaggi successivi

Passare all'articolo successivo per informazioni su come creare un'app Windows Form in Visual Studio con Visual Basic.

Creare un'app Windows Form

Collegamenti correlati

Per altre informazioni su Visual Studio, vedere queste risorse:

• Suggerimenti per la produttività