Creare un'app .NET MAUIBlazor Hybrid

Nota

Questa non è la versione più recente di questo articolo. Per la versione corrente, vedere la versione .NET 8 di questo articolo.

Importante

Queste informazioni si riferiscono a un prodotto non definitive che può essere modificato in modo sostanziale prima che venga rilasciato commercialmente. Microsoft non riconosce alcuna garanzia, espressa o implicita, in merito alle informazioni qui fornite.

Per la versione corrente, vedere la versione .NET 8 di questo articolo.

Questa esercitazione illustra come compilare ed eseguire un'app .NET MAUIBlazor Hybrid . Scopri come:

• Creare un .NET MAUIBlazor Hybrid progetto di app in Visual Studio
• Eseguire l'app in Windows
• Eseguire l'app in un dispositivo mobile emulato nell'emulatore Android

Prerequisiti

• Piattaforme supportate (.NET MAUI documentazione)
• Visual Studio con il .NET Multi-platform App UI carico di lavoro sviluppo .
• Microsoft Edge WebView2: WebView2 è obbligatorio in Windows quando si esegue un'app nativa. Quando si sviluppano .NET MAUIBlazor Hybrid app e le vengono eseguite solo negli emulatori di Visual Studio, WebView2 non è necessario.
• Abilitare l'accelerazione hardware per migliorare le prestazioni dell'emulatore Android.

Per altre informazioni sui prerequisiti e sull'installazione del software per questa esercitazione, vedere le risorse seguenti nella .NET MAUI documentazione:

• Piattaforme supportate per .NET MAUI le app
• Installazione (Visual Studio)

Creare un'app .NET MAUIBlazor Hybrid

Avviare Visual Studio. Nella finestra iniziale selezionare Crea un nuovo progetto:

Nella finestra Crea un nuovo progetto usare l'elenco a discesa Tipo di progetto per filtrare i modelli MAUI:

Selezionare il .NET MAUIBlazor Hybrid modello App e quindi selezionare il pulsante Avanti:

Nota

In .NET 7 o versioni precedenti il modello è denominato .NET MAUIBlazor App.

Nella finestra di dialogo Configura il nuovo progetto :

• Impostare Il nome del progetto su MauiBlazor.
• Scegliere una posizione adatta per il progetto.
• Seleziona il pulsante Avanti.

Nella finestra di dialogo Informazioni aggiuntive selezionare la versione del framework con l'elenco a discesa Framework. Selezionare il pulsante Crea :

Attendere che Visual Studio crei il progetto e ripristini le dipendenze del progetto. Monitorare lo stato di avanzamento in Esplora soluzioni aprendo la voce Dipendenze.

Ripristino delle dipendenze:

Dipendenze ripristinate:

Eseguire l'app in Windows

Nella barra degli strumenti di Visual Studio selezionare il pulsante Computer Windows per compilare e avviare il progetto:

Se la modalità sviluppatore non è abilitata, viene richiesto di abilitarla in Impostazioni> For Developer>Mode (Windows 10) o Impostazioni>Privacy & security>For Developer>Mode (Windows 11). Impostare l'opzione su Sì.

L'app in esecuzione come app desktop di Windows:

Eseguire l'app nell'emulatore Android

Se sono state seguite le indicazioni nella sezione Esegui l'app in Windows , selezionare il pulsante Arresta debug sulla barra degli strumenti per arrestare l'app di Windows in esecuzione:

Nella barra degli strumenti di Visual Studio selezionare il pulsante a discesa Avvia configurazione. Selezionare Emulatori Android Emulatori> Android:

Gli SDK Android sono necessari per creare app per Android. Nel pannello Elenco errori viene visualizzato un messaggio che chiede di fare doppio clic sul messaggio per installare gli SDK Android necessari:

Viene visualizzata la finestra Accettazione della licenza di Android SDK, selezionare il pulsante Accetta per ogni licenza visualizzata. Viene visualizzata una finestra aggiuntiva per le licenze dell'emulatore Android e dell'SDK Patch Applier. Selezionare il pulsante Accetta.

Attendere che Visual Studio scarichi Android SDK e Android Emulator. È possibile tenere traccia dello stato di avanzamento selezionando l'indicatore delle attività in background nell'angolo inferiore sinistro dell'interfaccia utente di Visual Studio:

L'indicatore mostra un segno di spunta al termine delle attività in background:

Nella barra degli strumenti selezionare il pulsante Emulatore Android:

Nella finestra Crea un dispositivo Android predefinito selezionare il pulsante Crea :

Attendere che Visual Studio scarichi, decomprima e crei un emulatore Android. Quando l'emulatore di telefono Android è pronto, selezionare il pulsante Start .

Nota

Abilitare l'accelerazione hardware per migliorare le prestazioni dell'emulatore Android.

Chiudere la finestra Gestione dispositivi Android. Attendere che venga visualizzata la finestra del telefono emulato, il sistema operativo Android viene caricato e viene visualizzata la schermata iniziale.

Importante

Il telefono emulato deve essere acceso con il sistema operativo Android caricato per caricare ed eseguire l'app nel debugger. Se il telefono emulato non è in esecuzione, attivare il telefono usando la scelta rapida da tastiera CTRL+P o selezionando il pulsante Di alimentazione nell'interfaccia utente:

Nella barra degli strumenti di Visual Studio selezionare il Pixel 5 - {VERSION} pulsante per compilare ed eseguire il progetto, dove il {VERSION} segnaposto è la versione di Android. Nell'esempio seguente la versione di Android è API 30 (Android 11.0 - API 30)e viene visualizzata una versione successiva in base all'SDK Android installato:

Visual Studio compila il progetto e distribuisce l'app nell'emulatore.

L'avvio dell'emulatore, il caricamento del telefono emulato e del sistema operativo e la distribuzione e l'esecuzione dell'app possono richiedere alcuni minuti a seconda della velocità del sistema e se l'accelerazione hardware è abilitata o meno. È possibile monitorare lo stato di avanzamento della distribuzione esaminando la barra di stato di Visual Studio nella parte inferiore dell'interfaccia utente. L'indicatore Ready riceve un segno di spunta e gli indicatori di distribuzione e caricamento dell'app dell'emulatore scompaiono quando l'app è in esecuzione:

Durante la distribuzione:

Durante l'avvio dell'app:

L'app in esecuzione nell'emulatore Android:

Passaggi successivi

Questa esercitazione ha descritto come:

• Creare un .NET MAUIBlazor Hybrid progetto di app in Visual Studio
• Eseguire l'app in Windows
• Eseguire l'app in un dispositivo mobile emulato nell'emulatore Android

Altre informazioni sulle Blazor Hybrid app:

ASP.NET Core Blazor Hybrid