Erstellen Ihrer ersten App

In diesem Tutorial lernen Sie, wie Sie Ihre erste .NET Multi-platform App UI(.NET MAUI)-App in Visual Studio 2022 für Windows oder Visual Studio 2022 für Mac erstellen und ausführen. So können Sie sicherstellen, dass Ihre Entwicklungsumgebung korrekt eingerichtet ist.

Visual Studio

Voraussetzungen

• Visual Studio 2022 17.8 oder höher, mit installiertem .NET Multiplatform App UI Workload. Weitere Informationen finden Sie unter Installation.

Erstellen einer App

In diesem Tutorial erstellen Sie Ihre erste .NET MAUI-App in Visual Studio 2022 und führen sie auf einem Android-Emulator aus:

Die Entwicklung von .NET MAUI-Apps für iOS unter Windows erfordert einen Mac-Build-Host. Wenn Sie nicht speziell auf iOS abzielen müssen und keinen Mac haben, können Sie stattdessen auch mit Android oder Windows beginnen.

In diesem Tutorial erstellen Sie Ihre erste .NET MAUI-App in Visual Studio und führen sie auf einem iOS-Simulator aus:

In diesem Tutorial erstellen Sie Ihre erste .NET MAUI-App in Visual Studio 2022 und führen sie unter Windows aus:

1. Starten Sie Visual Studio 2022. Klicken Sie im Startfenster auf Ein neues Projekt erstellen, um ein neues Projekt zu erstellen:

   

2. Wählen Sie im Fenster Ein neues Projekt erstellen die Option MAUI in der Dropdown-Liste Alle Projekttypen aus, wählen Sie die Vorlage .NET MAUI App aus, und klicken Sie auf die Schaltfläche Weiter:

   

3. Im Fenster Ihr neues Projekt konfigurieren benennen Sie Ihr Projekt, wählen Sie einen geeigneten Speicherort dafür aus und klicken Sie auf die Schaltfläche Weiter:

   

4. Wählen Sie im Fenster Zusätzliche Informationen die Version von .NET aus, auf die Sie abzielen möchten, und klicken Sie auf die Schaltfläche Erstellen:

   

5. Warten Sie, bis das Projekt erstellt und seine Abhängigkeiten wiederhergestellt sind:

   

6. Verwenden Sie in der Visual Studio-Symbolleiste das Dropdown-Menü Debug-Ziel, um Android-Emulatoren und dann den Eintrag Android-Emulator auszuwählen:

   

7. Drücken Sie in der Visual Studio-Symbolleiste auf die Schaltfläche Android-Emulator:

   

   Visual Studio beginnt mit der Installation des Standard-Android-SDK und des Android-Emulators.

8. Drücken Sie im Fenster Android SDK – Lizenzvereinbarung die Schaltfläche Akzeptieren:

   

9. Drücken Sie im Fenster Android SDK – Lizenzvereinbarung die Schaltfläche Akzeptieren:

   

10. Drücken Sie im Dialog Benutzerkontensteuerung auf die Schaltfläche Ja:

    

11. Drücken Sie im Fenster Lizenzannahme die Schaltfläche Akzeptieren:

    

    Warten Sie, bis Visual Studio das Android SDK und den Android-Emulator heruntergeladen hat.

12. Drücken Sie in der Visual Studio-Symbolleiste auf die Schaltfläche Android-Emulator:

    

    Visual Studio beginnt, einen Standard-Android-Emulator zu erstellen.

13. Drücken Sie im Dialog Benutzerkontensteuerung auf die Schaltfläche Ja:

    

14. Drücken Sie im Fenster Neues Gerät auf die Schaltfläche Erstellen:

    

    Warten Sie, bis Visual Studio heruntergeladen, entpackt und ein Android-Emulator erstellt wurde.

15. Schließen Sie das Fenster Android Geräte-Manager:

    

16. Drücken Sie in der Visual Studio-Symbolleiste auf die Schaltfläche Pixel 5 – API 34 (Android 14.0 – API 33), um die App zu erstellen und auszuführen:

    

    Visual Studio startet den Android-Emulator, erstellt die App und stellt sie auf dem Emulator bereit.

    Warnung

    Um die Leistung des Android-Emulators zu maximieren, muss die Hardware-Beschleunigung aktiviert sein. Andernfalls wird der Emulator sehr langsam laufen. Weitere Informationen finden Sie unter Aktivieren der Hardwarebeschleunigung mit Android-Emulatoren (Hyper-V und AEHD).

17. Drücken Sie in der laufenden App im Android-Emulator mehrmals die Schaltfläche Klick mich und beobachten Sie, dass die Anzahl der Schaltflächenklicks hochgezählt wird.

    

Problembehandlung

Wenn Ihre App nicht kompiliert werden kann, lesen Sie Fehlerbehebung bei bekannten Problemen, die möglicherweise eine Lösung für Ihr Problem enthält. Wenn das Problem mit dem Android-Emulator zusammenhängt, siehe Fehlerbehebung im Android-Emulator.

6. Verwenden Sie in der Visual Studio-Symbolleiste das Dropdown-Menü Debug-Ziel, um Framework und dann den Eintrag net8.0-windows auszuwählen:

   

7. Drücken Sie in der Visual Studio-Symbolleiste die Schaltfläche Windows Machine, um die App zu erstellen und auszuführen:

   

   Wenn Sie den Entwicklermodus nicht aktiviert haben, werden Sie von Visual Studio aufgefordert, ihn zu aktivieren. Klicken Sie im Dialogfeld Entwicklermodus für Windows aktivieren auf Einstellungen für Entwickler, um die App Einstellungen zu öffnen:

   

   Aktivieren Sie in der App „Einstellungen“ den Entwicklermodus und akzeptieren Sie die Verzichtserklärung:

   

   Schließen Sie die App „Einstellungen“ und schließen Sie dann das Dialogfeld Entwicklermodus für Windows aktivieren.

8. Drücken Sie in der laufenden App mehrmals die Schaltfläche Klick mich und beobachten Sie, dass die Anzahl der Schaltflächenklicks hochgezählt wird:

   

Problembehandlung

Wenn Ihre App nicht kompiliert werden kann, lesen Sie Fehlerbehebung bei bekannten Problemen, die möglicherweise eine Lösung für Ihr Problem enthält.

6. Koppeln Sie in Visual Studio die IDE mit einem Mac Build-Host. Weitere Informationen finden Sie unter Pair to Mac für die iOS-Entwicklung.

7. Verwenden Sie in der Visual Studio-Symbolleiste die Dropdown-Liste Debug-Ziel, um iOS-Simulatoren und anschließend einen bestimmten iOS-Simulator auszuwählen:

   

8. Drücken Sie in der Visual Studio-Symbolleiste auf die Schaltfläche Start für den gewählten iOS-Simulator, um Ihre App zu erstellen und auszuführen:

   

   Visual Studio erstellt die App, startet den entfernten iOS-Simulator für Windows und stellt die App auf dem entfernten Simulator bereit. Weitere Informationen über den iOS-Fernsimulator für Windows finden Sie unter Remote iOS Simulator für Windows.

9. Drücken Sie in der laufenden App mehrmals auf die Schaltfläche Klick mich und beobachten Sie, dass die Anzahl der Schaltflächenklicks hochgezählt wird.

   

Problembehandlung

Wenn Ihre App nicht kompiliert werden kann, lesen Sie Fehlerbehebung bei bekannten Problemen, die möglicherweise eine Lösung für Ihr Problem enthält.

.NET MAUI-Apps, die auf Mac Catalyst abzielen, können nur mit Visual Studio 2022 für Mac gestartet und debuggt werden.

Visual Studio für Mac

Hinweis

Visual Studio für Mac wird gemäß Microsoft's Modern Lifecycle Policy bis zum 31. August 2024 eingestellt. Visual Studio für Mac 17.6 wird bis zum 31. August 2024 weiterhin unterstützt. Dies schließt Wartungsupdates für Sicherheitsprobleme und aktualisierte Plattformen von Apple ein. Weitere Informationen, einschließlich alternativer Optionen für die Entwicklung auf einem Mac, finden Sie unter Was passiert mit Visual Studio für Mac?.

Voraussetzungen

• Visual Studio 2022 für Mac 17.6 mit den installierten .NET-, .NET MAUI-, Android- und iOS-Workloads. Weitere Informationen finden Sie unter Installation.

Wichtig

Um Visual Studio für Mac mit .NET 8 zu verwenden, aktivieren Sie das Kontrollkästchen Visual Studio > Voreinstellungen > Andere > Vorschaufunktionen > .NET 8 SDK verwenden, falls installiert (Neustart erforderlich).

Erstellen einer App

In diesem Tutorial erstellen Sie Ihre erste .NET MAUI-App in Visual Studio 2022 für Mac und führen sie auf der von Ihnen gewählten Plattform aus:

1. Starten Sie Visual Studio 2022 für Mac. Klicken Sie im Startfenster auf Neu, um ein neues Projekt zu erstellen:

   

2. Wählen Sie im Fenster Eine Vorlage für Ihr neues Projekt auswählen die Option Multiplattform > App aus, wählen Sie die Vorlage .NET MAUI App aus, und klicken Sie auf die Schaltfläche Weiter:

   

3. Wählen Sie im Fenster Ihre neue .NET MAUI App konfigurieren die Version von .NET aus, die Sie verwenden möchten, und klicken Sie auf die Schaltfläche Weiter:

   

4. Im Fenster Ihre neue .NET MAUI App konfigurieren geben Sie MyMauiApp als Projektnamen ein, wählen einen geeigneten Speicherort für das Projekt aus und klicken auf die Schaltfläche Erstellen:

   

5. Warten Sie, bis das Projekt erstellt und seine Abhängigkeiten wiederhergestellt sind:

   

6. Visual Studio 2022 für Mac zeigt eine Infobar an, wenn Ihr Mac nicht über die Android SDK-Komponenten verfügt. Klicken Sie auf die Schaltfläche Installieren, um das Android SDK zu installieren:

   

7. Aktivieren Sie im Fenster Android SDK das Kontrollkästchen Abhängigkeiten von Android automatisch herunterladen und installieren und klicken Sie auf die Schaltfläche Herunterladen und installieren:

   

8. Klicken Sie im Fenster Lizenzannahme auf die Schaltfläche Akzeptieren:

   

   Warten Sie, bis Visual Studio 2022 für Mac das Android-SDK heruntergeladen hat:

9. Ändern Sie in der Symbolleiste von Visual Studio 2022 für Mac das Debug-Ziel in Android Emulator:

   

10. Drücken Sie in der Symbolleiste von Visual Studio 2022 für Mac die Schaltfläche Abspielen, um die App zu erstellen und zu starten:

    

    Visual Studio 2022 für Mac erstellt die App und erstellt dann einen Standard-Android-Emulator.

11. Klicken Sie im Fenster Neues Gerät auf die Schaltfläche Erstellen:

    

12. Klicken Sie im Fenster Lizenzannahme auf die Schaltfläche Akzeptieren:

    

    Warten Sie, bis Visual Studio 2022 für Mac heruntergeladen ist, und installieren Sie einen Android-Emulator.

13. Schließen Sie das Fenster Android Geräte-Manager:

    

14. Ändern Sie in der Symbolleiste von Visual Studio 2022 für Mac das Debug-Ziel in Pixel 5 – API 34 (API 34):

    

15. Drücken Sie in der Symbolleiste von Visual Studio 2022 für Mac auf die Schaltfläche Abspielen, um die App im Android-Emulator zu starten:

    

    Visual Studio 2022 für Mac startet den Android-Emulator, erstellt die App und stellt sie auf dem Emulator bereit.

16. Drücken Sie in der laufenden App im Android-Emulator mehrmals auf die Schaltfläche Klick mich und beobachten Sie, dass die Anzahl der Schaltflächenklicks hochgezählt wird:

    

6. Stellen Sie in der Symbolleiste von Visual Studio 2022 für Mac sicher, dass das Debug-Ziel auf einen iOS-Simulator eingestellt ist:

   

7. Drücken Sie in der Symbolleiste von Visual Studio 2022 für Mac auf die Schaltfläche Abspielen, um die App in dem von Ihnen gewählten iOS-Simulator zu starten:

   

   Visual Studio 2022 für Mac startet den iOS-Simulator, erstellt die App und stellt die App im Simulator bereit.

8. Drücken Sie in der laufenden App mehrmals auf die Schaltfläche Klick mich und beobachten Sie, dass die Anzahl der Klicks auf die Schaltfläche hochgezählt wird:

   

6. Vergewissern Sie sich in der Symbolleiste von Visual Studio 2022 für Mac, dass das Debug-Ziel auf Mein Mac (MacCatalyst) eingestellt ist:

   

7. Klicken Sie in Visual Studio 2022 für Mac mit der rechten Maustaste auf das MyMauiApp-Projekt und wählen Sie Projektdatei bearbeiten aus. Fügen Sie dann im Projektdatei-Editor vor dem ersten <ItemGroup> die folgende XML-Datei ein:

   <PropertyGroup Condition="'$(Configuration)|$(TargetFramework)|$(Platform)'=='Debug|net8.0-maccatalyst|AnyCPU'">
       <RuntimeIdentifiers>maccatalyst-x64;maccatalyst-arm64</RuntimeIdentifiers>
   </PropertyGroup>
   

8. Drücken Sie in der Symbolleiste von Visual Studio 2022 für Mac die Schaltfläche Abspielen, um die App auf Ihrem Mac zu starten:

   

   Visual Studio 2022 für Mac wird die App erstellen und bereitstellen.

9. Drücken Sie in der laufenden App mehrmals auf die Schaltfläche Klick mich und beobachten Sie, dass die Anzahl der Klicks auf die Schaltfläche hochgezählt wird:

   

.NET MAUI-Apps, die auf Windows ausgerichtet sind, können nur mit Visual Studio 2022 gestartet und debuggt werden.

Visual Studio Code (Vorschau)

Hinweis

Die Unterstützung von .NET MAUI in Visual Studio Code befindet sich noch in der Vorschau. Probieren Sie es aus und teilen Sie uns Ihr Feedback mit!

Installieren Sie die -Erweiterung.

Folgen Sie den Anweisungen, um die .NET MAUI Erweiterung für Visual Studio Code einzurichten.

Erstellen Ihrer App

So erstellen Sie eine neue .NET MAUI-App:

1. Klicken Sie im Explorer auf .NET-Projekt erstellen, ODER CTRL/CMD+SHIFT+P>.NET: Neues Projekt ….
2. Wählen Sie .NET MAUI App oder .NET MAUI Blazor App aus.
3. Wählen Sie einen leeren Ordner aus. Wenn sich der Datei-Explorer wieder öffnet, ist Ihr Ordner nicht leer.
4. Projektname
5. Stellen Sie sicher, dass das Projekt im Projektmappen-Explorer erfolgreich geladen wird, und öffnen Sie dann eine C#- oder XAML-Datei.

Sie können auch ein bestehendes .NET MAUI-Projekt in Visual Studio Code über Datei > Öffnen … öffnen.

Sie sollten nun Ihre App im C# Dev Kit's Solution Explorer in Visual Studio Code sehen. Da die .NET MAUI-Erweiterung von C# Dev Kit abhängt, können Sie alle seine Funktionen zusammen mit der .NET MAUI-Erweiterung verwenden.

Wählen Sie Ihr Zielgerät aus

Klicken Sie auf das Symbol mit den geschweiften Klammern { } in der unteren rechten Ecke von Visual Studio Code. Hier können Sie Ihr Startprojekt ändern, Ihr Debug-Ziel in ein beliebiges, auf Ihrem Entwicklungscomputer gültiges Ziel ändern und beide Einstellungen an die Statusleiste von Visual Studio Code anheften:

Sie können das Startprojekt und das Debug-Ziel auch in der Befehlspalette festlegen, indem Sie CTRL/CMD+SHIFT+P verwenden und nach „.NET MAUI“ suchen.

Standardmäßig können Sie auf Ihrem lokalen macOS- oder Windows-Entwicklungsrechner bereitstellen. Unter macOS können Sie auch auf iOS-Simulatoren bereitstellen.

Wenn Sie Android-Emulatoren verwenden möchten, folgen Sie diesen Schritten:

1. Navigieren Sie in Ihrem Terminal zu <YOUR_ANDROID_SDK_DIRECTORY>/cmdline-tools/latest/bin/.
2. Führen Sie sdkmanager --install emulator und sdkmanager --install system-images;android-33;google_apis;x86_64 unter Windows bzw. ./sdkmanager --install emulator und ./sdkmanager --install system-images;android-33;google_apis;x86_64 unter macOS aus.
3. Dann können Sie einen neuen Emulator auf der Kommandozeile mit dem avdmanager von Android erstellen. Sie können zum Beispiel avdmanager create avd -n MyAndroidVirtualDevice-API33 -k "system-images;android-33;google_apis;x86_64" unter Windows oder ./avdmanager create avd -n MyAndroidVirtualDevice-API33 -k "system-images;android-33;google_apis;x86_64" unter macOS ausführen.

Sie können auch auf physischen Android-Geräten debuggen.

Debuggen der App

Um Ihre App zu debuggen, navigieren Sie zum Menü Ausführen und Debuggen von Visual Studio Code und wählen die Schaltfläche „Ausführen und Debuggen“. Alternativ können Sie auch F5 verwenden, um eine Debug-Sitzung zu starten. Wenn Visual Studio Code Sie auffordert, einen Debugger auszuwählen, stellen Sie sicher, dass Sie „.NET MAUI“ auswählen.

Der Debugger wählt automatisch das Debug-Target und das Startup-Projekt aus, die Sie im Menü mit den geschweiften Klammern { } festgelegt haben. Wenn Sie nichts ausgewählt haben, werden Sie aufgefordert, ein Debug-Ziel auszuwählen.

Sobald Ihre App mit dem Debugging beginnt, können Sie die integrierten Debugging-Tools von Visual Studio Code verwenden, um Haltepunkte zu setzen, Ihren Code zu durchsuchen und mehr.

Weitere Informationen

Wenn Sie Probleme mit der Erweiterung haben, können Sie die Schritte zur Fehlerbehebung befolgen, unsere bekannten Probleme einsehen, oder Feedback geben.

Nächste Schritte

In diesem Tutorial haben Sie gelernt, wie Sie Ihre erste .NET Multi-platform App UI (.NET MAUI) erstellen und ausführen können.

Um die Grundlagen der Erstellung einer App mit .NET MAUI zu erlernen, siehe Erstellen einer .NET MAUI-App. Alternativ dazu finden Sie einen vollständigen .NET MAUI-Schulungskurs unter Mobile- und Desktop-Apps mit .NET MAUI entwickeln.