Zelfstudie: Een WPF-toepassing maken met Visual Basic

In deze zelfstudie maakt u een toepassing met behulp van Visual Basic in de Visual Studio IDE (Integrated Development Environment). Uw programma maakt gebruik van het ui-framework Windows Presentation Foundation (WPF). 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:

Wat is WPF?

WPF of Windows Presentation Foundation is een gebruikersinterfaceframework waarmee bureaubladclienttoepassingen worden gemaakt. Het WPF-ontwikkelplatform ondersteunt een breed scala aan toepassingsontwikkelingsfuncties, waaronder:

• Een toepassingsmodel
• Middelen
• Controles
• Graphics
• Indeling
• Gegevensbinding
• Documenten
• Beveiliging

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

Vereiste voorwaarden

U hebt Visual Studio nodig om deze zelfstudie te voltooien. Zie Visual Studio downloads 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.

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 Toolbox. Als u deze niet ziet, selecteert u Weergave>Toolbox in de menubalk of Ctrl+Alt+X.

4. Vouw Common WPF Controls uit of voer Tekst in de zoekbalk in om TextBlock te zoeken.

   

   

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.

   Schermopname met het TextBlock-besturingselement gepositioneerd op het "Begroetingen"-formulier en met zichtbare richtlijnen.

   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 BestandAlles opslaan in de menubalk of drukt u op CtrlShiftS. 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 ook Visual Basic code toe aan de knop. Deze code verwijst naar de radioknopselectie.

1. Zoek RadioButton in de Toolbox.

   

   Schermafbeelding van het venster Toolbox in Visual Studio 2022 met het besturingselement RadioButton geselecteerd in de lijst met Veelvoorkomende WPF-besturingselementen.

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.

   Schermopname van het formulier Begroetingen met een TextBlock en twee radioknoppen.

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 en bij naar en 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 Werksethet besturingselement knop. Sleep daarna een knop naar het ontwerpoppervlak onder de RadioButton-besturingselementen.

8. Wijzig in de XAML-weergave de waarde van Inhoud voor het besturingselement knop van naar .

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

   Schermopname van het Begroetingsformulier met het tekstblok, radioknoppen met het label 'Hallo' en 'Afscheid', en het besturingselement knop met het label 'Weergeven', allemaal op het formulier gepositioneerd.

9. Dubbelklik op de knop Display op het ontwerpoppervlak.

   MainWindow.xaml.vb wordt geopend, met de cursor in de 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 debugt u de toepassing om fouten op te sporen en test u 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 Rename. 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.

   Schermopname van het venster 'Uitzondering niet afgehandeld' met een System.IO.Exception-bericht met de tekst 'Kan resource mainwindow.xaml niet vinden'.

3. De foutopsporing stoppen door DebugStop 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. Wijzig in .

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

   Schermopname van het venster Begroetingen met de besturingselementen TextBlock, radioknoppen en knop zichtbaar. Het radioknopje 'Hallo' is geselecteerd.

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 Compile a WPF Application and Debug WPF voor 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:

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

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 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 DebugStap 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 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 FoutopsporingAlle onderbrekingspunten uitschakelen.

Een releaseversie bouwen

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

1. Selecteer de oplossing BuildClean 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 BuildBuild 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 stap

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

Zie voor meer informatie over Visual Studio:

• tips voor productiviteit