Créer une application .NET MAUIBlazor Hybrid

Ce tutoriel vous montre comment générer et exécuter une application .NET MAUIBlazor Hybrid. Vous allez apprendre à effectuer les actions suivantes :

Prérequis

• Plateformes prises en charge (documentation .NET MAUI)
• Visual Studio avec la charge de travail de .NET Multi-platform App UIdéveloppement.
• Microsoft Edge WebView2: WebView2 est nécessaire sur Windows lors de l’exécution d’une application native. Lorsque vous développez des applications .NET MAUIBlazor Hybrid et que vous les exécutez uniquement dans les émulateurs de Visual Studio, WebView2 n’est pas nécessaire.
• Activez l’accélération matérielle pour améliorer le niveau de performance de l’émulateur Android.

Pour plus d’informations sur les prérequis et l’installation de logiciels pour ce tutoriel, consultez les ressources suivantes dans la documentation .NET MAUI :

• Plateformes prises en charge pour les applications .NET MAUI
• Installation (Visual Studio)

Créer une application .NET MAUIBlazor Hybrid

Lancez Visual Studio. Dans la fenêtre Démarrer, sélectionnez Créer un nouveau projet :

Dans la fenêtre Créer un nouveau projet, utilisez la liste déroulante Type de projet pour filtrer les modèles MAUI :

Sélectionnez le modèle.NET MAUIBlazor Hybrid Application, puis sélectionnez le bouton Suivant :

Dans la boîte de dialogue Configurer votre nouveau projet :

• Définissez le Nom du projet sur MauiBlazor.
• Choisissez un emplacement approprié pour le projet.
• Cliquez sur le bouton Suivant.

Dans la boîte de dialogue Informations supplémentaires, sélectionnez la version du framework avec la liste déroulante Framework. Sélectionnez le bouton Créer :

Attendez que Visual Studio crée le projet et restaure les dépendances du projet. Surveillez la progression dans Explorateur de solutions en ouvrant l’entrée Dépendances.

Restauration des dépendances :

Dépendances restaurées :

Exécutez l’application sur Windows

Dans la barre d’outils Visual Studio, sélectionnez le bouton Ordinateur Windows pour générer et démarrer le projet :

Si le Mode Développeur n’est pas activé, vous êtes invité à l’activer dans Paramètres>Pour les développeurs>Mode Développeur (Windows 10) ou Paramètres>Privacy et sécurité>Pour les développeurs>Mode Développeur (Windows 11). Définissez le commutateur sur Activé.

L’application s’exécutant en tant qu’application de bureau Windows :

Exécutez l’application dans l’Émulateur Android

Si vous avez suivi les instructions de la section Exécuter l’application sur Windows, sélectionnez le bouton Arrêter le débogage dans la barre d’outils pour arrêter l’application Windows en cours d’exécution :

Dans la barre d’outils Visual Studio, sélectionnez le bouton déroulant Démarrer la configuration. Sélectionnez Émulateur Android>Émulateur Android :

Les kits de développement logiciel Android sont nécessaires pour générer des applications pour Android. Dans le panneau Liste d’erreurs, un message s’affiche vous demandant de double-cliquer sur le message pour installer les kits de développement logiciel Android requis :

La fenêtre Acceptation de licence du kit de développement logiciel Android s’affiche, puis sélectionnez le bouton Accepter pour chaque licence qui s’affiche. Une fenêtre supplémentaire s’affiche pour les licences Émulateur Android et Applicateur de correctifs du kit de développement logiciel. Cliquez sur le bouton Accepter.

Attendez que Visual Studio télécharge le kit de développement logiciel Android et l’Émulateur Android. Vous pouvez suivre la progression en sélectionnant l’indicateur des tâches en arrière-plan dans le coin inférieur gauche de l’interface utilisateur de Visual Studio :

L’indicateur affiche une coche lorsque les tâches en arrière-plan sont terminées :

Dans la barre d’outils, sélectionnez le bouton Émulateur Android :

Dans la fenêtre Créer un appareil Android par défaut, sélectionnez le bouton Créer :

Attendez que Visual Studio télécharge, décompresse et crée un Émulateur Android. Lorsque l’émulateur de téléphone Android est prêt, sélectionnez le bouton Démarrer.

Fermez la fenêtre Gestionnaire d'appareils Android. Attendez que la fenêtre du téléphone émulé s’affiche, que le système d’exploitation Android se charge et que l’écran home s’affiche.

Dans la barre d’outils Visual Studio, sélectionnez le bouton Pixel 5 - {VERSION} pour générer et exécuter le projet, où l’espace réservé {VERSION} est la version Android. Dans l’exemple suivant, la version d’Android est API 30 (Android 11.0 - API 30), et une version ultérieure s’affiche en fonction du kit de développement logiciel Android installé :

Visual Studio génère le projet et déploie l’application sur l’émulateur.

Le démarrage de l’émulateur, le chargement du téléphone et du système d’exploitation émulés, ainsi que le déploiement et l’exécution de l’application peuvent prendre plusieurs minutes en fonction de la vitesse du système et de l’activation ou non de l’accélération matérielle. Vous pouvez surveiller la progression du déploiement en inspectant la barre d’état de Visual Studio en bas de l’interface utilisateur. L’indicateur Prêt est coché et les indicateurs de déploiement et de chargement de l’application de l’émulateur disparaissent lorsque l’application est en cours d’exécution :

Pendant le déploiement :

Au démarrage de l’application :

L’application s’exécutant dans l’Émulateur Android :

Étapes suivantes

Dans ce didacticiel, vous avez appris à :

En savoir plus sur les applications Blazor Hybrid :