Skapa din första app

I den här självstudien får du lära dig hur du skapar och kör din första .NET Multi-platform App UI-app (.NET MAUI) i Visual Studio 2022 i Windows eller Visual Studio Code i Windows, macOS eller Linux. På så sätt kan du se till att utvecklingsmiljön är korrekt konfigurerad.

Visual Studio

Förutsättningar

• Visual Studio 2022 17.12 eller senare, med arbetsprofilen .NET Multi-platform App UI installerad. Mer information finns i Installation.

Skapa en app

I den här självstudien skapar du din första .NET MAUI-app i Visual Studio 2022 och kör den på en Android-emulator:

För att utveckla .NET MAUI-appar för iOS i Windows krävs en Mac-byggvärd. Om du inte specifikt behöver rikta in dig på iOS och inte har en Mac kan du komma igång med Android eller Windows i stället.

I den här självstudien skapar du din första .NET MAUI-app i Visual Studio och kör den på en iOS-simulator:

I den här självstudien skapar du din första .NET MAUI-app i Visual Studio 2022 och kör den i Windows:

1. Starta Visual Studio 2022. I startfönstret klickar du på Skapa ett nytt projekt för att skapa ett nytt projekt:

   

2. I fönstret Skapa ett nytt projekt väljer du MAUI i listrutan Alla projekttyper, väljer mallen .NET MAUI App och klickar på knappen Nästa:

   

3. I fönstret Konfigurera det nya projektet namnger du projektet, väljer en lämplig plats för det och klickar på knappen Nästa:

   

4. I fönstret Ytterligare information väljer du den version av .NET som du vill rikta in dig på och klickar på knappen Skapa:

   

5. Vänta tills projektet har skapats och dess beroenden ska återställas:

   

6. I verktygsfältet i Visual Studio använder du listrutan Felsökningsmål för att välja Android-emulatorer och sedan posten Android-emulatorn:

   

7. Tryck på knappen Android Emulator i Visual Studio-verktygsfältet:

   

   Visual Studio startar processen med att installera standard-Android SDK och Android Emulator.

8. I fönstret Android SDK – Licensavtal trycker du på knappen Acceptera:

   

9. I dialogrutan User Account Control trycker du på knappen Ja:

   

   Vänta tills Visual Studio laddar ned standard-Android SDK och Android-emulatorn.

10. I dialogrutan User Account Control trycker du på knappen Ja:

    

11. I dialogrutan Android SDK Platform saknas trycker du på knappen Installera:

    

12. I fönstret Android SDK – Licensavtal trycker du på knappen Acceptera:

    

    Vänta tills Visual Studio har installerat Android SDK-komponenterna.

13. I fönstret Ny enhet trycker du på knappen Skapa:

    

    Vänta tills Visual Studio laddar ned, packa upp och skapa en Android-emulator.

14. Stäng fönstret Android Device Manager:

    

15. I Visual Studio-verktygsfältet trycker du på knappen Pixel 7 – API 35 (Android 15.0 – API 35):

    

16. I fönstret Android SDK – Licensavtal trycker du på knappen Acceptera:

    

17. I dialogrutan User Account Control trycker du på knappen Ja:

    

    Vänta tills Visual Studio har installerats för att ladda ned Android SDK.

18. I Visual Studio-verktygsfältet trycker du på knappen Pixel 7 – API 35 (Android 15.0 – API 35) för att skapa och köra appen:

    

    Visual Studio startar Android-emulatorn, skapar appen och distribuerar appen till emulatorn.

    Varning

    Maskinvaruacceleration måste aktiveras för att maximera Android-emulatorns prestanda. Om du inte gör det kommer emulatorn att köras mycket långsamt. Mer information finns i Så här aktiverar du maskinvaruacceleration med Android-emulatorer (Hyper-V & AEHD).

19. I appen som körs i Android-emulatorn trycker du på knappen Klicka på mig flera gånger och observera att antalet knappklick ökar.

    

Felsökning

Om det inte går att kompilera appen kan du läsa Felsöka kända problem, som kan ha en lösning på problemet. Om problemet är relaterat till Android-emulatorn kan du läsa Felsökning av Android-emulatorn.

6. I Visual Studio-verktygsfältet trycker du på knappen Windows Machine för att skapa och köra appen:

   

7. I den löpande appen trycker du på knappen Klicka på mig flera gånger och observera att antalet knappklick ökar.

   

Felsökning

Om det inte går att kompilera appen kan du läsa Felsöka kända problem, som kan ha en lösning på problemet.

6. I Visual Studio kopplar du IDE:t till en Mac Build-värd. För mer information, se Anslut till Mac för iOS-utveckling.

7. I verktygsfältet i Visual Studio använder du listrutan Felsökningsmål för att välja iOS-simulatorer och sedan en specifik iOS-simulator:

   

8. I Visual Studio-verktygsfältet trycker du på startknappen för din valda iOS-simulator för att skapa och köra appen:

   

   Visual Studio skapar appen, startar iOS-fjärrsimulatorn för Windows och distribuerar appen till fjärrsimulatorn. Mer information om iOS-fjärrsimulatorn för Windows finns i Remote iOS-simulator för Windows.

9. I appen som körs trycker du på knappen Klicka på mig flera gånger och observera att antalet knappklick ökar.

   

Felsökning

Om det inte går att kompilera appen kan du läsa Felsöka kända problem, som kan ha en lösning på problemet.

.NET MAUI-appar som riktar sig mot Mac Catalyst kan bara startas och felsökas med hjälp av Visual Studio Code.

Visual Studio Code

Förutsättningar

• Visual Studio Code med .NET MAUI-tillägget installerat och konfigurerat:
  • Ditt Microsoft-konto som är anslutet till C# Dev Kit.
  • .NET SDK har installerats.
  • .NET MAUI SDK har installerats.
  • Xcode installerat på mac-datorn, inklusive simulatorkörningar och Xcode-kommandoradsverktygen, om det är riktat mot Apple-plattformar.
  • Microsoft OpenJDK, Android SDK och en Android-emulator som är installerad på datorn, om den är riktad mot Android.

Mer information finns i Installation.

Skapa en app

I den här självstudien skapar du din första .NET MAUI-app i Visual Studio Code och kör den på en Android-emulator:

I den här självstudien skapar du din första .NET MAUI-app i Visual Studio Code på en Mac och kör den på en iOS-simulator:

I den här självstudien skapar du din första .NET MAUI-app i Visual Studio Code på en Mac och kör den på macOS:

I den här självstudien skapar du din första .NET MAUI-app i Visual Studio Code i Windows och kör den i Windows:

1. Starta Visual Studio Code. I Explorertrycker du på Skapa .NET Project:

   

   Du kan också trycka på CTRL+SKIFT+P- i Windows eller CMD+SKIFT+P- på macOS och sedan kommandot .NET: New Project....

2. I kommandopaletten väljer du mallen .NET MAUI App:

   

3. I dialogrutan Projektplats väljer du den plats där du vill att det nya projektet ska skapas.

   Viktig

   Projekt måste skapas i en tom mapp.

4. I kommandopaletten anger du ett namn för det nya projektet och trycker på RETUR:

   

5. På kommandopaletten trycker du på Skapa projekt:

   

   Vänta tills projektet har skapats och acceptera mappen som en betrodd plats om det behövs.

6. I Explorerexpanderar du rotnoden i projektet och öppnar sedan en C#-fil som MainPage.xaml.cs:

   

7. I Visual Studio Code kontrollerar du att Android-miljön är korrekt konfigurerad genom att trycka på CTRL+SKIFT+P- i Windows eller CMD+SKIFT+P- på macOS och sedan välja .NET MAUI: Konfigurera Androidföljt av Uppdatera Android-miljön. Eventuella identifierade fel måste åtgärdas.

8. I statusfältet längst ned i Visual Studio Code trycker du på symbolen för klammerparenteser { } och se till att Felsökningsmål är inställt på en specifik Android-emulator:

   

   Du kan också ange felsökningsmålet genom att trycka på CTRL+SKIFT+P- i Windows eller CMD+SKIFT+P- på macOS och välja .NET MAUI: Välj Android-enhet från kommandopaletten.

9. Skapa och kör appen på Android genom att trycka på F5 eller genom att trycka på knappen Kör i det övre högra hörnet av Visual Studio Code:

   

   Om du uppmanas att välja ett felsökningsprogram i kommandopaletten väljer du C# och sedan startkonfigurationen för projektet.

10. I appen som körs i din valda Android-emulator trycker du på knappen Klicka på mig flera gånger och observera att antalet knappklick ökar:

    

Felsöka appen på en Android-enhet

Så här felsöker du appen på en Android-enhet:

1. Kontrollera att enheten har konfigurerats för distribution. Mer information finns i Konfigurera en enhet för distribution.
2. Anslut enheten till datorn och välj den som ett felsökningsmål i Visual Studio Code.
3. Kör appen.

7. I Visual Studio Code kontrollerar du att Apple-miljön är korrekt konfigurerad genom att trycka på CMD+SKIFT+P- och sedan välja .NET MAUI: Konfigurera Appleföljt av Uppdatera Apple-miljön. Eventuella identifierade fel måste åtgärdas.

8. I statusfältet längst ned i Visual Studio Code trycker du på symbolen för klammerparenteser { } och ser till att Felsökningsmål är inställt på en specifik iOS-simulator:

   

   Du kan också ange felsökningsmålet genom att trycka på CMD+SKIFT+P- och välja .NET MAUI: Välj iOS-enhet från kommandopaletten.

9. Skapa och kör appen på iOS genom att trycka på F5 eller genom att trycka på knappen Kör i det övre högra hörnet av Visual Studio Code:

   

   Om du uppmanas att välja ett felsökningsprogram i kommandopaletten väljer du C# och sedan startkonfigurationen för projektet.

10. I appen som körs i din valda iOS-simulator trycker du på knappen Klicka på mig flera gånger och observera att antalet knappklick ökar:

    

Felsöka appen på en iOS-enhet

Så här felsöker du appen på en iOS-enhet:

1. Kontrollera att du har lagt till ditt Apple-ID i Xcode i Xcode > Inställningar > Konton.
2. Se till att enheten har registrerats hos ditt team om du tillhör Apple Developer Program.
3. Aktivera utvecklarläge på enheten. Första gången du kör din app kan du få ett popup-fönster på enheten – se till att du väljer Tillåt. Mer information om utvecklarläge finns i Aktivera utvecklarläge på en enhet på developer.apple.com.
4. Anslut enheten till datorn och välj den som ett felsökningsmål i Visual Studio Code.
5. Kör appen.

7. I Visual Studio Code kontrollerar du att Apple-miljön är korrekt konfigurerad genom att trycka på CMD+SKIFT+P- och sedan välja .NET MAUI: Konfigurera Appleföljt av Uppdatera Apple-miljön. Eventuella identifierade fel måste åtgärdas.

8. I statusfältet längst ned i Visual Studio Code trycker du på symbolen för klammerparenteser { } och ser till att Felsökningsmål är inställt på din Mac:

   

   Du kan också ange felsökningsmålet genom att trycka på CMD+SKIFT+P- och välja .NET MAUI: Välj macOS-enhet från kommandopaletten.

9. Skapa och kör appen på macOS genom att trycka på F5 eller genom att trycka på knappen Kör i det övre högra hörnet av Visual Studio Code:

   

   Om du uppmanas att välja ett felsökningsprogram i kommandopaletten väljer du C# och sedan startkonfigurationen för projektet.

10. I den löpande appen trycker du på knappen Klicka på mig flera gånger och observera att antalet knappklick ökar.

    

7. I statusfältet längst ned i Visual Studio Code trycker du på symbolen för klammerparenteser { } och ser till att Felsökningsmål är inställt på Windows:

   

   Du kan också ange felsökningsmålet genom att trycka på CTRL+SKIFT+P- och välja .NET MAUI: Välj Windows-enhet från kommandopaletten.

8. Skapa och kör appen i Windows genom att trycka på F5 eller genom att trycka på knappen Kör i det övre högra hörnet av Visual Studio Code:

   

   Om du uppmanas att välja ett felsökningsprogram i kommandopaletten väljer du C# och sedan startkonfigurationen för projektet.

9. I den löpande appen trycker du på knappen Klicka på mig flera gånger och observera att antalet knappklick ökar.

   

Felsökning

Om din app inte kan byggas och distribueras, läs Felsöka kända problem, som kan ha en lösning på ditt problem.

Nästa steg

I den här självstudien har du lärt dig hur du skapar och kör din första .NET Multi-platform App UI-app (.NET MAUI).

Information om grunderna i att skapa en app med .NET MAUI finns i Skapa en .NET MAUI-app. En fullständig .NET MAUI-utbildning finns i Skapa mobilappar och skrivbordsappar med .NET MAUI.