Uw eerste app bouwen

In deze zelfstudie leert u hoe u uw eerste .NET Multi-platform App UI-app (.NET MAUI) maakt en uitvoert in Visual Studio 2022 op Windows of Visual Studio Code op Windows, macOS of Linux. Dit helpt ervoor te zorgen dat uw ontwikkelomgeving correct is ingesteld.

Visual Studio

Voorwaarden

• Visual Studio 2022 17.12 of hoger, waarbij de ui-workload van de .NET-app voor meerdere platforms is geïnstalleerd. Zie Installationvoor meer informatie.

Een app maken

In deze handleiding maakt u uw eerste .NET MAUI-app in Visual Studio 2022 en voert u deze uit op een Android-emulator.

Voor het ontwikkelen van .NET MAUI-apps voor iOS in Windows is een Mac-buildhost vereist. Als u iOS niet specifiek hoeft te targeten en geen Mac hebt, kunt u overwegen om aan de slag te gaan met Android of Windows.

In deze zelfstudie maakt u uw eerste .NET MAUI-app in Visual Studio en voert u deze uit op een iOS-simulator:

In deze zelfstudie maakt u uw eerste .NET MAUI-app in Visual Studio 2022 en voert u deze uit op Windows:

1. Start Visual Studio 2022. Klik in het startvenster op Een nieuw project maken om een nieuw project te maken:

   

2. Selecteer in het venster Een nieuw project makenMAUI in de vervolgkeuzelijst Alle projecttypen, selecteer de sjabloon .NET MAUI App en klik op de knop Volgende.

   

3. In het venster Je nieuwe project configureren, geef je project een naam, kies een geschikte locatie ervoor en klik op de knop Volgende:

   

4. Kies in het venster Aanvullende informatie de versie van .NET die u wilt targeten en klik op de knop maken:

   

5. Wacht tot het project is gemaakt en de bijbehorende afhankelijkheden zijn hersteld:

   

6. Gebruik op de werkbalk van Visual Studio de vervolgkeuzelijst Foutopsporingsdoel om Android-emulators te selecteren en vervolgens de optie Android-emulator:

   

7. Druk op de werkbalk van Visual Studio op de knop Android Emulator:

   

   Visual Studio start het proces voor het installeren van de standaard Android SDK en Android Emulator.

8. Druk in het venster Android SDK - Licentieovereenkomst op de knop Accepteren:

   

9. Druk in het dialoogvenster Gebruikersaccountbeheer op de knop Ja:

   

   Wacht tot Visual Studio de standaard Android SDK en Android Emulator downloadt.

10. Druk in het dialoogvenster Gebruikersaccountbeheer op de knop Ja:

    

11. Druk in het dialoogvenster Ontbrekende Android SDK Platform op de knop Installeren:

    

12. Druk in het venster Android SDK - Licentieovereenkomst op de knop Accepteren:

    

    Wacht tot Visual Studio de Android SDK-onderdelen installeert.

13. Druk in het venster Nieuw apparaat op de knop maken:

    

    Wacht tot Visual Studio een Android-emulator downloadt, uitpakt en maakt.

14. Sluit het venster Android Device Manager:

    

15. Druk op de werkbalk van Visual Studio op de Pixel 7 - API 35 (Android 15.0 - API 35) knop:

    

16. Druk in het venster Android SDK - Licentieovereenkomst op de knop Accepteren:

    

17. Druk in het dialoogvenster Gebruikersaccountbeheer op de knop Ja:

    

    Wacht tot Visual Studio is geïnstalleerd om de Android SDK te downloaden.

18. Druk op de werkbalk van Visual Studio op de Pixel 7 - API 35 (Android 15.0 - API 35) knop om de app te bouwen en uit te voeren:

    

    Visual Studio start de Android-emulator, bouwt de app en implementeert de app in de emulator.

    Waarschuwing

    Hardwareversnelling moet zijn ingeschakeld om de prestaties van de Android-emulator te maximaliseren. Als u dit niet doet, wordt de emulator zeer langzaam uitgevoerd. Zie Hardwareversnelling inschakelen met Android-emulators (Hyper-V & AEHD)voor meer informatie.

19. Druk in de actieve app in de Android-emulator meerdere keren op de knop Klik op me en kijk of het aantal klikken op de knop wordt verhoogd.

    

Probleemoplossing

Als uw app niet kan worden gecompileerd, raadpleegt u Bekende problemen oplossen, die mogelijk een oplossing voor uw probleem hebben. Als het probleem betrekking heeft op de Android-emulator, raadpleegt u Problemen met android-emulator oplossen.

6. Druk op de werkbalk van Visual Studio op de knop Windows-machine om de app te bouwen en uit te voeren:

   

7. Druk in de actieve app meerdere keren op de knop Klik op mij en kijk of het aantal klikken op de knop wordt verhoogd:

   

Probleemoplossing

Als uw app niet kan worden gecompileerd, raadpleegt u Bekende problemen oplossen, die mogelijk een oplossing voor uw probleem hebben.

6. Koppel de IDE in Visual Studio aan een Mac Build-host. Zie Koppelen aan Mac voor iOS-ontwikkelingvoor meer informatie.

7. Gebruik op de werkbalk van Visual Studio de vervolgkeuzelijst Doel voor foutopsporing om iOS-simulators te selecteren en vervolgens een specifieke iOS-simulator:

   

8. Druk op de werkbalk van Visual Studio op de knop Start voor de gekozen iOS-simulator om uw app te bouwen en uit te voeren:

   

   Visual Studio bouwt de app, start de externe iOS-simulator voor Windows en implementeert de app in de externe simulator. Zie Externe iOS-simulator voor Windows voor meer informatie over de externe iOS-simulator voor Windows.

9. Druk in de actieve app meerdere keren op de knop Klik op mij en kijk of het aantal klikken op de knop wordt verhoogd.

   

Probleemoplossing

Als uw app niet kan worden gecompileerd, raadpleegt u Bekende problemen oplossen, die mogelijk een oplossing voor uw probleem hebben.

.NET MAUI-apps die gericht zijn op Mac Catalyst kunnen alleen worden gestart en gedebugd met behulp van Visual Studio Code.

Visual Studio Code

Voorwaarden

• Visual Studio Code, waarbij de .NET MAUI-extensie is geïnstalleerd en geconfigureerd:
  • Uw Microsoft-account dat is verbonden met C# Dev Kit.
  • De .NET SDK is geïnstalleerd.
  • De .NET MAUI SDK is geïnstalleerd.
  • Xcode geïnstalleerd op uw Mac, met inbegrip van simulatorruntimes en de Xcode-opdrachtregelprogramma's, indien gericht op Apple-platforms.
  • Microsoft OpenJDK, de Android SDK en een Android-emulator die op uw computer zijn geïnstalleerd, indien gericht op Android.

Zie Installationvoor meer informatie.

Een app maken

In deze zelfstudie maakt u uw eerste .NET MAUI-app in Visual Studio Code en voert u deze uit op een Android-emulator:

In deze zelfstudie maakt u uw eerste .NET MAUI-app in Visual Studio Code op een Mac en voert u deze uit op een iOS-simulator:

In deze zelfstudie maakt u uw eerste .NET MAUI-app in Visual Studio Code op een Mac en voert u deze uit op macOS:

In deze zelfstudie maakt u uw eerste .NET MAUI-app in Visual Studio Code in Windows en voert u deze uit in Windows:

1. Start Visual Studio Code. Druk in de Explorerop .NET-project maken:

   

   U kunt ook op Ctrl+Shift+P in Windows of Cmd+Shift+P in macOS drukken en vervolgens op de opdracht .NET: Nieuw project...

2. Selecteer in het opdrachtenpalet de sjabloon .NET MAUI App:

   

3. Selecteer in het dialoogvenster Projectlocatie de locatie waar u het nieuwe project wilt maken.

   Belangrijk

   Projecten moeten worden gemaakt in een lege map.

4. Voer in het opdrachtpalet een naam in voor uw nieuwe project en druk op Enter-:

   

5. Druk in het opdrachtenpalet op Project maken:

   

   Wacht totdat het project is gemaakt en accepteer de map indien nodig als een vertrouwde locatie.

6. Vouw in de Explorerhet hoofdknooppunt van uw project uit en open vervolgens een C#-bestand zoals MainPage.xaml.cs:

   

7. Controleer in Visual Studio Code of uw Android-omgeving correct is geconfigureerd door op Ctrl+Shift+P in Windows of Cmd+Shift+P in macOS te drukken en vervolgens .NET MAUI te selecteren: Android configureren, gevolgd door Android-omgeving vernieuwen. Gedetecteerde fouten moeten worden opgelost.

8. Druk in de statusbalk onder in Visual Studio Code op het accoladesymbool { } en zorg ervoor dat de Debug Target- is ingesteld op een specifieke Android-emulator:

   

   U kunt het foutopsporingsdoel ook instellen door op Ctrl+Shift+P in Windows of Cmd+Shift+P in macOS te drukken en .NET MAUI te selecteren: Kies Android-apparaat in het opdrachtenpalet.

9. Bouw en voer de app uit op Android door op F5- te drukken of door op de knop Uitvoeren in de rechterbovenhoek van Visual Studio Code te drukken:

   

   Als u wordt gevraagd een foutopsporingsprogramma te selecteren in het opdrachtenpalet, selecteert u C#- en vervolgens de startconfiguratie voor uw project.

10. Druk in de actieve app in de gekozen Android-emulator meerdere keren op de knop Klik op mij en kijk of het aantal klikken op de knop wordt verhoogd:

    

Fouten opsporen in de app op een Android-apparaat

Fouten opsporen in de app op een Android-apparaat:

1. Zorg ervoor dat uw apparaat is ingesteld voor implementatie. Zie Een apparaat instellen voor implementatievoor meer informatie.
2. Sluit uw apparaat aan op uw computer en selecteer het als een foutopsporingsdoel in Visual Studio Code.
3. Voer de app uit.

7. Controleer in Visual Studio Code of uw Apple-omgeving correct is geconfigureerd door op Cmd+Shift+P te drukken en vervolgens .NET MAUI te selecteren: Apple configureren, gevolgd door Apple-omgeving vernieuwen. Gedetecteerde fouten moeten worden opgelost.

8. Druk in de statusbalk onder in Visual Studio Code op het accoladesymbool { } en zorg ervoor dat de Debugdoel is ingesteld op een specifieke iOS-simulator.

   

   U kunt ook het foutopsporingsdoel instellen door op Cmd+Shift+P te drukken en .NET MAUI te selecteren: Kies iOS-apparaat in het opdrachtpalet.

9. Bouw en voer de app uit op iOS door op F5- te drukken of door op de knop Uitvoeren in de rechterbovenhoek van Visual Studio Code te drukken:

   

   Als u wordt gevraagd een foutopsporingsprogramma te selecteren in het opdrachtenpalet, selecteert u C#- en vervolgens de startconfiguratie voor uw project.

10. Druk in de actieve app in de gekozen iOS-simulator meerdere keren op de knop Klik op mij en kijk of het aantal klikken op de knop wordt verhoogd:

    

Fouten opsporen in de app op een iOS-apparaat

Fouten opsporen in de app op een iOS-apparaat:

1. Zorg ervoor dat u uw Apple ID hebt toegevoegd aan Xcode in Xcode > Settings > Accounts.
2. Zorg ervoor dat uw apparaat is geregistreerd bij uw team, als u deel uitmaakt van het Apple Developer Program.
3. Schakel de ontwikkelaarsmodus op uw apparaat in. De eerste keer dat u uw app uitvoert, ontvangt u mogelijk een pop-upvenster op het apparaat. Zorg ervoor dat u Toestaanselecteert. Zie Ontwikkelaarsmodus inschakelen op een apparaat op developer.apple.com voor meer informatie over de ontwikkelaarsmodus.
4. Sluit uw apparaat aan op uw computer en selecteer het als een foutopsporingsdoel in Visual Studio Code.
5. Voer de app uit.

7. Controleer in Visual Studio Code of uw Apple-omgeving correct is geconfigureerd door op Cmd+Shift+P te drukken en vervolgens .NET MAUI te selecteren: Apple configureren, gevolgd door Apple-omgeving vernieuwen. Gedetecteerde fouten moeten worden opgelost.

8. Druk in de statusbalk onder in Visual Studio Code op het accoladesymbool { } en zorg ervoor dat de Debug Target- is ingesteld op uw Mac:

   

   U kunt ook het doel voor foutopsporing instellen door op Cmd+Shift+P te drukken en .NET MAUI te selecteren: Kies macOS-apparaat in het opdrachtpalet.

9. Bouw en voer de app uit op macOS door op F5- te drukken of door op de knop Uitvoeren in de rechterbovenhoek van Visual Studio Code te drukken:

   

   Als u wordt gevraagd een foutopsporingsprogramma te selecteren in het opdrachtenpalet, selecteert u C#- en vervolgens de startconfiguratie voor uw project.

10. Druk in de actieve app meerdere keren op de knop Klik op mij en kijk of het aantal klikken op de knop wordt verhoogd:

    

7. Druk in de statusbalk onder aan Visual Studio Code op het accoladesymbool { } en zorg ervoor dat de Debug Target- is ingesteld op Windows:

   

   U kunt ook het foutopsporingsdoelwit instellen door op Ctrl+Shift+P te drukken en .NET MAUI: Pick Windows Device te selecteren in het opdrachtpalette.

8. Bouw en voer de app uit in Windows door op F5 te drukken of door op de knop Uitvoeren in de rechterbovenhoek van Visual Studio Code te drukken:

   

   Als u wordt gevraagd een foutopsporingsprogramma te selecteren in het opdrachtenpalet, selecteert u C#- en vervolgens de startconfiguratie voor uw project.

9. Druk in de actieve app meerdere keren op de knop Klik op mij en kijk of het aantal klikken op de knop wordt verhoogd:

   

Probleemoplossing

Als uw app niet kan worden gebouwd en geïmplementeerd, raadpleegt u Bekende problemen oplossen, die mogelijk een oplossing voor uw probleem hebben.

Volgende stappen

In deze handleiding hebt u geleerd hoe u uw eerste .NET Multi-platform App UI (.NET MAUI) app kunt maken en uitvoeren.

Zie Een .NET MAUI-app makenvoor meer informatie over de basisprincipes van het bouwen van een app met .NET MAUI. Als alternatief kunt u voor de volledige .NET MAUI-trainingscursus Mobiele en desktop-apps bouwen met .NET MAUIkiezen.