Zelfstudie: Een WPF-toepassing maken met Visual Basic

In deze tutorial gebruik je Visual Basic in de geïntegreerde ontwikkelingsomgeving (IDE) van Visual Studio om een toepassing te maken. Uw programma maakt gebruik van het WPF-framework (Windows Presentation Foundation). Gebruik deze zelfstudie om vertrouwd te raken met veel van de hulpprogramma's, dialoogvensters en ontwerpers die u in Visual Studio kunt gebruiken.

In deze handleiding leer je hoe je:

• Het project maken
• Venster configureren en tekst toevoegen
• Knoppen en code toevoegen
• Fouten opsporen en de toepassing testen
• Debuggen met onderbrekingspunten
• Een releaseversie bouwen

Wat is WPF?

WPF of Windows Presentation Foundation is een UI-framework (user interface) waarmee bureaubladclienttoepassingen worden gemaakt. Het WPF-ontwikkelplatform ondersteunt een breed scala aan toepassingsontwikkelingsfuncties, waaronder een toepassingsmodel, resources, besturingselementen, graphics, indeling, gegevensbinding, documenten en beveiliging.

WPF maakt deel uit van .NET, dus als u eerder toepassingen met .NET hebt gebouwd met behulp van ASP.NET of Windows Forms, moet de programmeerervaring bekend zijn. WPF maakt gebruik van de Extensible Application Markup Language XAML om een declaratief model te bieden voor het programmeren van toepassingen. Zie het overzicht van WPF .NET voor meer informatie.

Vereiste voorwaarden

U hebt Visual Studio nodig om deze zelfstudie te voltooien. Ga naar de downloadpagina van Visual Studio voor een gratis versie.

Het project maken

Wanneer u een toepassing maakt in Visual Studio, maakt u eerst een project. In deze zelfstudie maakt u een Windows Presentation Foundation-project.

1. Open Visual Studio.

2. Kies in het startvenster Een nieuw project maken.

   

3. Zoek in het venster Een nieuw project maken naar WPF en selecteer Visual Basic in de vervolgkeuzelijst Alle talen . Kies WPF-app (.NET Framework), en kies vervolgens Volgende.

   

4. Geef het project een naam, HelloWPFApp en selecteer Maken.

   Visual Studio maakt het HelloWPFApp-project en de oplossing. Solution Explorer toont de verschillende bestanden.

   

De WPF Designer toont een ontwerpweergave en een XAML-weergave van MainWindow.xaml in een gesplitste weergave.

Opmerking

Zie het XAML-overzicht voor WPF voor meer informatie over eXtensible Application Markup Language (XAML).

Venster configureren en tekst toevoegen

Met behulp van het venster Eigenschappen kunt u opties voor projectitems, besturingselementen en andere items weergeven en wijzigen.

1. Open de MainWindow.xaml in Solution Explorer.

2. Wijzig in de XAML-weergave de waarde van de eigenschap Window.Title van Title="MainWindow" in Title="Greetings".

3. Selecteer aan de linkerkant van de Visual Studio IDE het tabblad Werkbalk. Als u deze niet ziet, selecteert u vanuit de menubalk Weergave>Werkbalk of druk op Ctrl+Alt+X.

4. Vouw Algemene WPF-besturingselementen uit of voer tekst in de zoekbalk in om TextBlock te vinden.

   

5. Selecteer het TextBlock-item en sleep het naar het venster op het ontwerpoppervlak. U kunt de TextBlock controle verplaatsen door te slepen. Gebruik de richtlijnen om het besturingselement te plaatsen.

   

   De XAML-opmaak moet eruitzien als in het volgende voorbeeld:

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

6. Zoek in de XAML-weergave de markeringen voor het TextBlock en wijzig het kenmerk Tekst :

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

   Centreer de TextBlock indien nodig opnieuw

7. Sla uw app op door de knop Alles opslaan te kiezen. Als u uw app wilt opslaan, kiest u Bestand>Alles opslaan in de menubalk of drukt u op Ctrl+Shift+S. Het is een goede gewoonte om vroeg en vaak op te slaan.

Knoppen en code toevoegen

Uw toepassing gebruikt twee selectievakjes en een knop. Gebruik deze stappen om ze toe te voegen. U voegt Visual Basic-code toe aan de knop. Deze code verwijst naar de radioknopselectie.

1. Zoek RadioButton in de Toolbox.

   

2. Voeg twee RadioButton-besturingselementen toe aan het ontwerpoppervlak door het Item RadioButton te selecteren en naar het ontwerpoppervlak te slepen. Verplaats de knoppen door ze te selecteren en de pijltoetsen te gebruiken. Plaats de knoppen zij aan zij onder de TextBlock-control.

   

3. Wijzig in het venster Eigenschappen voor het linker RadioButton-besturingselement de Naam eigenschap bovenaan het Eigenschappen venster naar HelloButton.

   

4. Wijzig in het venster Eigenschappen voor het rechterbesturingselement RadioButton de eigenschap Naam in GoodbyeButton.

5. Werk het kenmerk Inhoud voor HelloButton en GoodbyeButton bij naar "Hello" en "Goodbye" in de 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. Zoek in de XAML-weergave de markeringen voor HelloButton en voeg een IsChecked-kenmerk toe:

   IsChecked="True"
   

   Het kenmerk IsChecked met de waarde True betekent dat HelloButton standaard is ingeschakeld. Deze instelling betekent dat het keuzeradio altijd geselecteerd is, zelfs wanneer het programma wordt gestart.

7. Zoek in de Werkset het besturingselement Knop en sleep een knop naar het ontwerpoppervlak onder de besturingselementen RadioButton.

8. Wijzig in de XAML-weergave de waarde van Inhoud voor het besturingselement knop van Content="Button" naar Content="Display".

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

   Het venster moet er ongeveer uitzien als in de volgende afbeelding.

   

9. Dubbelklik op de knop Display op het ontwerpoppervlak.

   MainWindow.xaml.vb wordt geopend, met de cursor in de Button_Click gebeurtenis.

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

10. Voeg de volgende code toe:

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

Fouten opsporen en de toepassing testen

Vervolgens gaat u fouten opsporen in de toepassing om te zoeken naar fouten en te testen of beide berichtvakken correct worden weergegeven. Om te zien hoe dit proces werkt, introduceert de eerste stap bewust een fout in het programma.

1. Klik in Solution Explorer met de rechtermuisknop op MainWindow.xaml en kies Naam wijzigen. Wijzig de naam van het bestand in Greetings.xaml.

2. Start het foutopsporingsprogramma door op F5 te drukken of de foutopsporing te selecteren en vervolgens Foutopsporing te starten.

   Er wordt een venster Onderbrekingsmodus weergegeven en het uitvoervenster geeft aan dat er een uitzondering is opgetreden.

   

3. De foutopsporing stoppen door Debug>Stop Debuggingte kiezen.

   U hebt mainWindow.xaml gewijzigd in Greetings.xaml aan het begin van deze sectie. De code verwijst nog steeds naar MainWindow.xaml als de opstart-URI voor de toepassing, zodat het project niet kan worden gestart.

4. Open in Solution Explorer het bestand Application.xaml .

5. Wijzigen StartupUri="MainWindow.xaml" in StartupUri="Greetings.xaml"

6. Start het foutopsporingsprogramma opnieuw (druk op F5). U ziet nu het venster Begroetingen van uw toepassing.

   

7. Klik op Hallo en de knop Weergave, dan Goodbye en de knop Weergave. Gebruik het pictogram Sluiten in de rechterbovenhoek om de foutopsporing te stoppen.

Zie Een WPF-toepassing (WPF) bouwen en Debug WPFvoor meer informatie.

Debuggen met onderbrekingspunten

U kunt de code testen tijdens foutopsporing door enkele onderbrekingspunten toe te voegen.

1. Open Greetings.xaml.vb en selecteer de volgende regel: MessageBox.Show("Hello.")

2. Voeg een onderbrekingspunt toe door op F9 te drukken of Debuggen te selecteren, en kies vervolgens Onderbrekingspunt wisselen.

   Er wordt een rode cirkel weergegeven naast de coderegel in de linkermarge van het editorvenster.

3. Selecteer de volgende regel: MessageBox.Show("Goodbye.").

4. Druk op F9 om een onderbrekingspunt toe te voegen en druk vervolgens op F5 om foutopsporing te starten.

5. Selecteer in het venster Begroetingen de knop Hallo en selecteer vervolgens Weergeven.

   De lijn MessageBox.Show("Hello.") is geel gemarkeerd. Aan de onderkant van de IDE worden de Autos, Locals en Watch-vensters aan de linkerkant gedokt. De Aanroepstack, Onderbrekingspunten, Uitzonderingsinstellingen, Opdrachtvenster, Onmiddellijke venster, en Uitvoervenster zijn aan de rechterkant gekoppeld.

   

6. Kies in de menubalk Debug>Stap Uit.

   De toepassing wordt opnieuw gestart. Er wordt een dialoogvenster met het woord 'Hallo' weergegeven.

7. Kies de knop OK om het dialoogvenster te sluiten.

8. Kies in het venster Begroetingen de radioknop Afscheid en kies vervolgens de knop Weergeven.

   De lijn MessageBox.Show("Goodbye.") is geel gemarkeerd.

9. Kies de F5- sleutel om door te gaan met foutopsporing. Wanneer het dialoogvenster wordt weergegeven, kiest u OK om het dialoogvenster te sluiten.

10. Sluit het toepassingsvenster om de foutopsporing te stoppen.

11. Kies in de menubalk Foutopsporing>Alle onderbrekingspunten uitschakelen.

Een releaseversie bouwen

Nu u hebt gecontroleerd of alles werkt, kunt u een release-build van uw toepassing voorbereiden.

1. Selecteer de oplossing Build>Clean om tussenliggende bestanden en uitvoerbestanden te verwijderen die zijn gemaakt tijdens eerdere builds.

2. Wijzig de buildconfiguratie voor HelloWPFApp van Debug in Release met behulp van de vervolgkeuzelijst op de werkbalk.

3. Selecteer Build>Build Solution.

Gefeliciteerd met het voltooien van deze zelfstudie. U vindt de .exe die u hebt gebouwd onder uw oplossing en projectmap (...\HelloWPFApp\bin\Release).

Volgende stappen

Ga naar het volgende artikel voor meer informatie over het maken van een Windows Forms-app in Visual Studio met Visual Basic.

Een Windows Forms-app maken

Verwante koppelingen

Zie deze resources voor meer informatie over Visual Studio:

• tips voor productiviteit