Freigeben über

Erstellen einer .NET MAUIBlazor Hybrid-App

  • Artikel

Hinweis

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

Warnung

Diese Version von ASP.NET Core wird nicht mehr unterstützt. Weitere Informationen finden Sie in der Supportrichtlinie für .NET und .NET Core. 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

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:

Erstellen einer .NET MAUIBlazor Hybrid-App

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

Neue Projektmappe.

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

Filtern von Vorlagen für .NET MAUI

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

Auswählen einer Vorlage.

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.

Konfigurieren des Projekts.

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

Dialogfeld mit zusätzlichen Informationen zum Auswählen der Frameworkversion und Erstellen des Projekts.

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:

Wiederherstellen von Abhängigkeiten.

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

Schaltfläche „Windows-Computer“.

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:

Unter Windows ausgeführte App.

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:

Schaltfläche „Debuggen beenden.

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

Android-Emulatoren: Dropdownauswahl für die Schaltfläche „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:

Visual Studio-Fehlerliste mit der Aufforderung, auf die Meldung zu klicken, um Android SDKs 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:

Indikator für Visual Studio-Hintergrundtasks.

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

Aktivierter Indikator für Visual Studio-Hintergrundtasks.

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

Schaltfläche „Android-Emulator“.

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

Erstellen eines Android-Standardgerätefensters.

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:

Die Ein/Aus-Taste des Android-Emulators.

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:

Schaltfläche Pixel 5 API 30-Emulator.

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:

Der erste Bereitstellungsausführungsindikator, der in der Fußzeile von Visual Studio angezeigt wird.

Während des App-Starts:

Der zweite Bereitstellungsausführungsindikator, der in der Fußzeile von Visual Studio angezeigt wird.

Die im Android-Emulator ausgeführte App:

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