Erstellen einer .NET MAUIBlazor Hybrid-App

Hinweis

Dies ist nicht die neueste Version dieses Artikels. Informationen zum aktuellen Release finden Sie in der .NET 8-Version dieses Artikels.

Wichtig

Diese Informationen beziehen sich auf ein Vorabversionsprodukt, das vor der kommerziellen Freigabe möglicherweise noch wesentlichen Änderungen unterliegt. Microsoft gibt keine Garantie, weder ausdrücklich noch impliziert, hinsichtlich der hier bereitgestellten Informationen.

Informationen zum aktuellen Release finden Sie in der .NET 8-Version dieses Artikels.

Dieses Tutorial zeigt Ihnen, wie Sie eine .NET MAUIBlazor Hybrid-App erstellen und ausführen. Sie lernen Folgendes:

• Erstellen eines .NET MAUIBlazor Hybrid-App-Projekts in Visual Studio
• Ausführen der App unter Windows
• Ausführen der App auf einem emulierten mobilen Gerät im Android-Emulator

Voraussetzungen

• Unterstützte Plattformen (.NET MAUI-Dokumentation)
• Visual Studio mit der Workload .NET Multi-platform App UI-Entwicklung
• Microsoft Edge WebView2: WebView2 ist unter Windows erforderlich, wenn Sie eine native App ausführen. Wenn Sie .NET MAUIBlazor Hybrid-Apps entwickeln und diese nur in den Visual Studio-Emulatoren ausführen, ist WebView2 nicht erforderlich.
• Aktivieren Sie die Hardwarebeschleunigung, um die Leistung des Android-Emulators zu verbessern.

Weitere Informationen zu den Voraussetzungen und zur Installation der Software für dieses Tutorial finden Sie in den folgenden Ressourcen in der .NET MAUI-Dokumentation:

• Unterstützte Plattformen für .NET MAUI-Apps
• Installation (Visual Studio)

Erstellen einer .NET MAUIBlazor Hybrid-App

Starten Sie Visual Studio. Wählen Sie im Fenster Start die Option Neues Projekt erstellen aus:

Filtern Sie im Fenster Neues Projekt erstellen über die Dropdownliste Projekttyp die MAUI-Vorlagen:

Wählen Sie die .NET MAUIBlazor Hybrid App Vorlage und wählen sie die Schaltfläche Weiter aus:

Hinweis

In .NET 7 oder früher heißt die Vorlage .NET MAUIBlazor-App.

Führen Sie im Dialogfeld Neues Projekt konfigurieren folgende Schritte aus:

• Legen Sie den Projektnamen auf MauiBlazor fest.
• Wählen Sie einen geeigneten Speicherort für das Projekt aus.
• Wählen Sie die Schaltfläche Weiter aus.

Wählen Sie im Dialogfeld Zusätzliche Informationen die Frameworkversion mit der Dropdownliste Framework aus. Wählen Sie die Schaltfläche Erstellen aus:

Warten Sie, bis Visual Studio das Projekt erstellt und die Abhängigkeiten des Projekts wiederhergestellt hat. Überwachen Sie den Fortschritt im Projektmappen-Explorer, indem Sie den Eintrag Abhängigkeiten öffnen.

Wiederherstellung von Abhängigkeiten:

Wiederhergestellte Abhängigkeiten:

Ausführen der App unter Windows

Wählen Sie in der Visual Studio Symbolleiste die Schaltfläche Windows Computer aus, um das Projekt zu erstellen und zu starten:

Wenn der Entwicklermodus nicht aktiviert ist, werden Sie aufgefordert, diesen über Einstellungen>Für Entwickler*innen>Entwicklermodus (unter Windows 10) oder Einstellungen>Privacy und Sicherheit>Für Entwickler*innen>Entwicklermodus (unter Windows 11) zu aktivieren. Legen Sie die Option auf Ein fest.

Die App, die als Windows Desktop-App ausgeführt wird:

Ausführen der App im Android-Emulator

Wenn Sie den Anleitungen im Abschnitt gefolgt sind, führen Sie die App im Windows Bereich aus, und wählen Sie die SchaltflächeDebuggen beendenin der Symbolleiste aus, um die Ausführung der Windows-App zu beenden:

Wählen Sie auf der Visual Studio-Symbolleiste die Dropdownschaltfläche „Konfiguration starten“ aus. Wählen Sie Android Emulatoren>Android-Emulator:

Android SDKs sind erforderlich, um Apps für Android zu kompilieren. Im Bereich Fehlerliste wird eine Meldung angezeigt, die Sie dazu auffordert, die erforderlichen Android SDKs per Doppelklicken auf die Meldung zu installieren:

Das Fenster Android SDK Lizenzannahme erscheint, wählen Sie anschließend die Schaltfläche Annehmen für jede Lizenz aus, die angezeigt wird. Ein zusätzliches Fenster erscheint für die Android-Emulator und SDK Patch Applier Lizenzen. Wählen Sie die Accept Schaltfläche aus.

Warten Sie, bis Visual Studio das Android SDK und den Android-Emulator heruntergeladen hat. Sie können den Fortschritt nachverfolgen, indem Sie die Hintergrundaufgaben-Anzeige in der unteren linken Ecke der Visual Studio Benutzeroberfläche auswählen:

Die Anzeige zeigt ein Häkchen, wenn die Hintergrundaufgaben abgeschlossen sind:

Wählen Sie die Android-Emulator Schaltfläche in der Symbolleiste aus:

Wählen Sie im Fenster Standard Android-Gerät erstellen die Schaltfläche Erstellen aus:

Warten Sie, bis Visual Studio den Android-Emulator heruntergeladen, entzippt und erstellt hat. Wenn der Android Telefon-Emulator bereit ist, wählen Sie die Schaltfläche Start aus.

Hinweis

Aktivieren Sie die Hardwarebeschleunigung, um die Leistung des Android-Emulators zu verbessern.

Schließen Sie das Fenster Android-Geräte-Manager. Warten Sie, bis das emulierte Telefonfenster angezeigt, das Android Betriebssystem geladen, und der Startbildschirm dargestellt wird.

Wichtig

Das emulierte Telefon muss mit geladenem Android-Betriebssystem eingeschaltet sein, um die App im Debugger laden und ausführen zu können. Wenn das emulierte Telefon nicht ausgeführt wird, schalten Sie das Telefon mit der Tastenkombination STRG+P oder über die Ein/Aus-Taste in der Benutzeroberfläche an:

Wählen Sie auf der Symbolleiste von Visual Studio die Schaltfläche Pixel 5 - {VERSION} aus, um das Projekt zu erstellen und auszuführen, wobei der Platzhalter {VERSION} die Android-Version angibt. Im folgenden Beispiel lautet die Android-Version API 30 (Android 11.0 - API 30), und je nach installiertem Android SDK wird eine spätere Version angezeigt:

Visual Studio kompiliert das Projekt und stellt die App dem Emulator bereit.

Das Starten des Emulators, das Laden des emulierten Telefons und Betriebssystems sowie die Bereitstellung und Ausführung der App kann je nach Geschwindigkeit des Systems und abhängig davon, ob Hardwarebeschleunigung aktiviert ist, mehrere Minuten dauern. Sie können den Fortschritt der Bereitstellung überwachen, indem Sie die Statusleiste von Visual Studio unten in der Benutzeroberfläche überprüfen. Der Indikator Bereit wird mit einem Häkchen versehen, und die Anzeige für die Bereitstellung und das Laden von Apps des Emulators werden ausgeblendet, wenn die App ausgeführt wird:

Während der Bereitstellung:

Während des App-Starts:

Die im Android-Emulator ausgeführte App:

Nächste Schritte

In diesem Tutorial haben Sie Folgendes gelernt:

• Erstellen eines .NET MAUIBlazor Hybrid-App-Projekts in Visual Studio
• Ausführen der App unter Windows
• Ausführen der App auf einem emulierten mobilen Gerät im Android-Emulator

Weitere Informationen zu Blazor Hybrid-Apps:

ASP.NET Core Blazor Hybrid