Tutoriel .NET MAUI – Créez votre première application multiplateforme en C#
Introduction
Objectif
Configurez votre environnement de développement et créez votre première application .NET Multi-Platform App UI (.NET MAUI).
Prérequis
Vérifiez la configuration système requise pour Visual Studio 2022.
La configuration minimale requise pour la dernière version de Xcode.
Délai d’exécution
10 minutes + temps de téléchargement/d'installation
Scénario
Une application mobile et de bureau qui s'exécute sur Windows et Android et qui affiche un message Hello, World!.
Application mobile et de bureau exécutée sur Mac et iOS qui affiche un message Hello, World!.
Télécharger et installer
Télécharger et installer Visual Studio 2022.
Télécharger Visual Studio 2022
Lors de l'installation, la charge de travail Développement de .NET Multi-platform App UI doit être sélectionnée. L'utilisation du lien ci-dessus doit présélectionner correctement tous les prérequis, comme indiqué sur l'image suivante :
Vous avez déjà Visual Studio 2022 ?
Si vous avez déjà Visual Studio 2022, vérifiez qu’il est à jour et que la charge de travail requise est installée :
- Sélectionnez la touche Windows, tapez Visual Studio Installer, puis appuyez sur Entrée.
- Si vous y êtes invité, autorisez le programme d’installation à se mettre à jour lui-même.
- Si une mise à jour pour Visual Studio 2022 est disponible, un bouton Mettre à jour s'affichera. Sélectionnez-le pour mettre à jour avant de modifier l'installation. Ce didacticiel fonctionne uniquement avec Visual Studio 2022 17.12 et les versions ultérieures.
- Recherchez votre installation Visual Studio 2022 et sélectionnez le bouton Modifier.
- Sélectionnez Développement de .NET Multi-platform App UI (.NET MAUI).
- Sélectionnez le bouton Modifier.
-
Téléchargez et installez le SDK .NET. Une fois le téléchargement terminé, lancez le téléchargement pour commencer l'installation.
Téléchargez .NET 9 SDK x64 (Intel)
Téléchargez .NET 9 SDK Arm64 (Apple Silicon)Si vous utilisez un Mac équipé d'une puce Apple M1 ou M2, vous devez installer la version Arm64 du SDK.
-
Téléchargez et installez VS Code :
-
Ouvrez VS Code et sélectionnez le bouton Extensions dans la barre d’activité de VS Code à gauche. Dans la barre de recherche, tapez MAUI, sélectionnez .NET MAUI, puis cliquez sur le bouton Installer sur la page de l’extension .NET MAUI.
![Extension MAUI de VS Code]()
Cette extension est accompagnée du kit de développement C# et des extensions C#, qui sont nécessaires à l’exécution de l’extension .NET MAUI.
![Dépendances de l’extension MAUI de VS Code]()
-
Ouvrez un nouveau terminal et installez la charge de travail .NET MAUI en exécutant la commande suivante :
Terminalsudo dotnet workload install mauiSi l'installation a réussi, vous devriez voir une sortie semblable à la suivante :
TerminalSuccessfully installed workload maui
Vérifier tous les éléments installés correctement
Une fois que vous avez configuré votre environnement, ouvrez un nouveau terminal VS Code. Dans la barre d’outils, sélectionnez Terminal, puis Nouveau terminal.
Dans votre terminal, exécutez la commande suivante pour vérifier votre installation.
dotnet workload list
Si l'installation a réussi, vous devriez voir une sortie semblable à la suivante :
Installed Workload Id Manifest Version Installation Source
--------------------------------------------------------------------
maui 8.0.82/8.0.100 SDK 8.0.400
Use `dotnet workload search` to find additional workloads to install.Vous avez une erreur ?
Si vous recevez une erreur « dotnet » n’est pas reconnu comme une commande interne ou externe, assurez-vous que vous avez ouvert un nouveau terminal VS Code. Si le redémarrage de VS Code ou de votre ordinateur ne résout pas le problème, utilisez le bouton J’ai rencontré un problème au bas de la page pour obtenir de l’aide afin de résoudre le problème.
Installer Xcode
Pour créer des applications .NET MAUI, vous aurez également besoin :
-
Pour trouver la dernière version de Xcode compatible avec .NET MAUI, consultez cette référence de version de publication. Accédez à la colonne Outils Apple pour trouver la dernière version compatible Xcode.
-
Un ID Apple
Si vous n’avez pas encore d’ID Apple, vous pouvez en créer un à https://appleid.apple.com. Un ID Apple est requis pour l’installation et la connexion à Xcode.
Après avoir installé Xcode, vous devez ouvrir Xcode et accepter les contrats de licence, puis, si vous y êtes invité, installez les composants optionnels.
-
Lorsque vous êtes invité à préciser les plateformes pour lesquelles vous souhaitez développer, sélectionnez les plateformes macOS et iOS, puis Télécharger et installer.
![Invite de Xcode pour installer les plateformes macOS et iOS]()
-
Ouvrez un nouveau terminal et installez les Outils de développement en ligne de commande Xcode en exécutant la commande suivante :
Terminalxcode-select --installLorsque vous êtes invité à installer les outils de développement en ligne de commande Xcode, sélectionnez Installer. Enfin, acceptez le contrat de licence.
![L’invite de Xcode à installer des outils de développement en ligne de commande]()
Si tout semble correct, sélectionnez le bouton Continuer ci-dessous pour passer à l'étape suivante.
Créez votre application
Créer une application .NET MAUI:
- Ouvrez Visual Studio 2022.
- Sélectionnez le bouton Créer un nouveau projet.
-
Dans la fenêtre Créer un nouveau projet, saisissez MAUI App dans la barre de recherche. Sélectionnez le modèle .NET MAUI App, puis cliquez sur le bouton Next.
![Boîte de dialogue Nouveau projet Visual Studio avec l'application .NET MAUI sélectionnée]()
-
Dans la fenêtre Configurer votre nouveau projet, entrez MyFirstMauiApp comme nom de projet et cliquez sur le bouton Suivant.
![Visual Studio configure votre nouvelle boîte de dialogue de projet avec MyFirstMauiApp comme nom de projet]()
-
Dans la fenêtre Informations supplémentaires, sélectionnez .NET 9.0 dans la liste déroulante Framework s'il n'est pas déjà sélectionné et cliquez sur le bouton Créer.
![Boîte de dialogue d’informations supplémentaires de Visual Studio affichant .NET 8.0 dans la liste déroulante Framework.]()
Visual Studio crée le nouveau projet. Si vous recevez une alerte de sécurité Windows vous avertissant que le pare-feu bloque certaines fonctionnalités, sélectionnez le bouton Autoriser l'accès.
Attendre le processus de restauration des packages NuGet
NuGet est un gestionnaire de packages qui apportera les dépendances de votre nouvelle application.
Le processus de restauration du paquet démarrera automatiquement. Attendez que le message Restauré ou Prêt s'affiche dans la barre d'état en bas à gauche de l'écran.
- Ouvrez la palette de commandes dans VS Code en appuyant sur CMD+MAJ+P.
- Tapez .NET : pour afficher les commandes que vous pouvez exécuter avec le Kit de développement C# !
- Recherchez et sélectionnez .NET : nouveau projet pour créer un projet .NET.
- Sélectionnez Application .NET MAUI.
- Choisissez l’emplacement du dossier que vous souhaitez enregistrer votre projet.
- Lorsque vous y êtes invité, nommez le projet MyFirstMauiApp dans la palette de commandes.
Si vous disposez d’un abonnement à Visual Studio, connectez-vous à votre compte. Si vous ne voyez pas d’invite, cliquez sur l’icône C# dans la barre d’état de VS Code, en bas à droite de votre fenêtre.
Assurez-vous que l’Explorateur est ouvert dans la barre latérale de VS Code. Vous devriez y trouver un dossier ainsi que l’Explorateur de solutions. Si vous avez ouvert une nouvelle instance de VS Code, l’Explorateur de solutions peut se trouver en bas de la barre latérale.
Sous l’Explorateur de solutions, sélectionnez MainPage.xaml. Ce fichier contient les balises qui décrivent la structure et la disposition des éléments de l’interface utilisateur dans votre application MAUI.
Exécuter votre application
Ce didacticiel se concentrera d'abord sur le déploiement d'une application .NET MAUI sur votre ordinateur Windows local. Plus tard, vous aurez la possibilité de configurer un appareil ou un émulateur Android.
Dans la barre d'outils Visual Studio, vous devriez voir Windows Machine comme cible de débogage par défaut. Appuyez sur le bouton Windows Machine pour créer et exécuter l'application :
Dans l'application en cours d'exécution, sélectionnez plusieurs fois le bouton Cliquez-moi et observez que le nombre de clics sur le bouton est incrémenté :
Ce tutoriel se concentre sur le déploiement d’une application .NET MAUI sur votre ordinateur Mac local. Plus tard, vous aurez la possibilité d’utiliser un simulateur iOS.
Dans le coin inférieur droit de la fenêtre VS Code, vous devriez voir des accolades dans la barre d’état. Cliquez sur les accolades, et vous devriez voir Mon Mac sélectionné comme cible de débogage par défaut.
Si vous ne voyez pas les accolades dans la barre d’état, assurez-vous d’ouvrir un fichier de projet pertinent tel qu’un fichier .cs, .xaml ou .csproj qui appartient au projet .NET MAUI. Sinon, vous pouvez ouvrir la palette de commandes dans VS Code en appuyant sur CMD+MAJ+P. Puis tapez .NET MAUI : Pick. Les options permettant de choisir une plateforme de débogage pour votre projet apparaîtront.
Si aucun élément n’est sélectionné, cliquez sur Cible de débogage et sélectionnez Mon Mac dans la liste. Veuillez noter que ce n’est pas forcément le premier élément de votre liste lorsque vous sélectionnez une cible de débogage pour la première fois.
Pour exécuter l’application, cliquez sur l’icône Exécuter et déboguer dans la barre d’activité de VS Code. Cliquez ensuite sur Exécuter et déboguer.
Dans l'application en cours d'exécution, sélectionnez plusieurs fois le bouton Cliquez-moi et observez que le nombre de clics sur le bouton est incrémenté :
Félicitations, vous avez créé et exécuté votre première application .NET MAUI ! Gardez l'application en cours d'exécution et continuez le didacticiel.
Modifiez votre code
Lorsque vous développez des applications avec .NET MAUI, Rechargement à chaud XAML est disponible lorsque vous déboguez votre application. Cela signifie que vous pouvez modifier l’interface utilisateur XAML pendant que l’application est en cours d’exécution et que l’interface utilisateur est automatiquement mise à jour.
Revenez à Visual Studio et laissez l'application en cours d'exécution. Dans l'Explorateur de solutions, double-cliquez sur le fichier MainPage.xaml sous le projet MyFirstMauiApp. Si vous ne voyez pas le volet Explorateur de solutions, sélectionnez Afficher > Explorateur de solutions dans le menu principal (ou appuyez sur CTRL+ALT+L).
Retournez au fichier MainPage.xaml dans VS Code et laissez l’application en cours d’exécution.
Actuellement, le Text du deuxième Label de la ligne 17 est défini pour indiquer Hello, World!, comme indiqué dans le code suivant:
<Label
Text="Hello, World!"
Style="{StaticResource Headline}"
SemanticProperties.HeadingLevel="Level1" />Mettez à jour le texte pour lire Hello, .NET MAUI! :
<Label
Text="Hello, .NET MAUI!"
Style="{StaticResource Headline}"
SemanticProperties.HeadingLevel="Level1" />L'interface utilisateur de l'application se met à jour automatiquement lorsque vous apportez des modifications.
Lors du développement d'applications avec .NET MAUI, vous pouvez également utiliser .NET Rechargement à chaud XAML pour recharger votre code C#. Modifions la logique dans l'application pour incrémenter le décompte de 10 au lieu de 1 lorsque vous cliquez sur le bouton.
Ouvrez MainPage.xaml.cs (ce fichier est imbriqué sous MainPage.xaml, ou vous pouvez cliquer avec le bouton droit et sélectionner Afficher le code dans le menu).
La méthode OnCounterClicked sur ce fichier contient actuellement le code suivant :
private void OnCounterClicked(object sender, EventArgs e)
{
count++;
if (count == 1)
CounterBtn.Text = $"Clicked {count} time";
else
CounterBtn.Text = $"Clicked {count} times";
SemanticScreenReader.Announce(CounterBtn.Text);
}Mettez à jour lecount++; par incrément de 10 en le modifiant en count += 10;.
private void OnCounterClicked(object sender, EventArgs e)
{
count += 10;
if (count == 1)
CounterBtn.Text = $"Clicked {count} time";
else
CounterBtn.Text = $"Clicked {count} times";
SemanticScreenReader.Announce(CounterBtn.Text);
}Pour appliquer les modifications apportées au code, enregistrez le fichier et sélectionnez le bouton Rechargement à chaud dans Visual Studio ou sélectionnez ALT+F10.
Sélectionnez le bouton Cliquez-moi et voyez-le augmenter de 10. Bravo ! Vous pouvez fermer l'application en cours d'exécution maintenant.
Exécution sur un appareil mobile
Vous pouvez décider de déployer sur une ou plusieurs des plateformes en fonction de votre environnement de développement. Vous venez d’exécuter et de déployer votre application sur Windows. À présent, nous allons configurer un appareil ou un émulateur Android.
Activez Hyper-V
Dans votre barre de Windows Search, tapez fonctionnalités Windows et sélectionnez Activer ou désactiver les fonctionnalités Windows.
Vérifiez que la case Hyper-V est cochée et sélectionnez OK.
Vous devez redémarrer votre machine pour que la modification prenne effet.
Installation de Android SDK
Ouvrez Visual Studio et votre solution MyFirstMauiApp. Dans le menu déroulant de la cible de débogage, sélectionnez net8.0-android sous Framework.
Des versions spécifiques d’Android SDK sont nécessaires pour créer des projets. Si vous n'avez pas accepté la licence du SDK Android, le message d'erreur suivant s'affiche dans la fenêtre Liste d’erreurs.
Double-cliquez sur le message pour démarrer le processus d'acceptation de la licence. Cliquez sur Accepter pour chacune des licences présentes et l'installation automatique commencera.
Configurer l’émulateur Android
Si vous n'avez pas d'appareil Android sur lequel effectuer le déploiement, vous pouvez suivre ces étapes pour configurer un émulateur Android. Si vous l'avez déjà fait ou si vous souhaitez utiliser votre propre appareil Android, vous pouvez ignorer cette étape.
Si c'est la première fois que vous créez une application .NET MAUI, vous verrez Émulateur Android sélectionné dans le menu déroulant de la cible de débogage. Cliquez dessus pour démarrer le processus de création. Si une boîte de dialogue d'acceptation de licence s'affiche, sélectionnez Accepter.
Cela fait apparaître la fenêtre Nouvel appareil. Sélectionnez le bouton Créer pour créer un émulateur avec les paramètres par défaut. Cela téléchargera les images de l'émulateur et finalisera la création de l'émulateur à utiliser dans Visual Studio. Cette étape peut prendre un certain temps.
Ne vous inquiétez pas si le niveau d’API que vous voyez est différent des images. Cela doit être de 33 ou plus.
Une fois l’émulateur créé, un bouton indiquant Démarrer s’affiche. Cliquez dessus.
Vous pouvez être invité à activer la plate-forme de l’hyperviseur Windows. Suivez ladocumentation pour activer l’accélération afin d’améliorer les performances (nécessaire pour que l’émulateur soit opérationnel). Sélectionnez Run Anyway.
L’Émulateur Android sera lancé et sera entièrement terminé lorsque vous verrez la possibilité de Arrêter dans le Gestionnaire d’appareils Android. Cette opération peut prendre un certain temps.
Une fois l’opération terminée, elle s’affiche dans le menu de débogage Visual Studio.
Votre émulateur Android est maintenant créé et prêt à être utilisé. La prochaine fois que vous exécuterez Visual Studio, l'émulateur apparaîtra directement dans la fenêtre cible de débogage et démarrera lorsque vous le sélectionnerez. Si vous rencontrez des problèmes ou rencontrez des problèmes de performances avec l'émulateur, lisez la documentation d'installation complète.
Configurer un appareil Android
Pour développer avec votre appareil Android, le débogage USB doit être activé. Suivez ces étapes sur l’appareil pour le connecter à Visual Studio. Si vous n’avez pas d’appareil Android, vous pouvez ignorer cette section.
Activer le mode développeur
- Accédez à l’écran Paramètres.
- Trouvez le numéro de build en utilisant la recherche en haut de l'écran des paramètres, ou localisez-le dans À propos du téléphone.
- Appuyez sur numéro de build 7 à 10 fois jusqu’à ce que \ "vous êtes maintenant un développeur ! " s’affiche.
Vérifier l’état du débogage USB
- Accédez à l’écran Paramètres.
- Trouvez le débogage USB en utilisant la recherche en haut de l'écran des paramètres, ou localisez-le dans les options du développeur.
- Activez le débogage USB s’il n’est pas déjà activé.
Approuver l’appareil
- Branchez votre appareil à votre ordinateur.
- Vous êtes invité à Autoriser le débogage USB.
- Cochez Toujours autoriser à partir de cet ordinateur.
- Cliquez sur Autoriser.
Votre appareil est désormais configuré et s’affichera dans Visual Studio en tant que cible de déploiement.
Vous rencontrez des problèmes ? Consultez la documentation.
Votre émulateur ou appareil doit maintenant être configuré pour le déploiement !
Exécuter sur Android
Assurez-vous que votre appareil ou émulateur est sélectionné comme cible de débogage.
Dans le menu, sélectionnez Débogage > Commencer le débogage (ou appuyez sur F5). Si cette option est désactivée, vérifiez qu’un émulateur ou un appareil est sélectionné.
Votre application sera créée, déployée sur l'appareil/l'émulateur Android sélectionné et exécutée.
Selon votre environnement de développement, vous pouvez déployer votre système sur une ou plusieurs plates-formes. Vous venez d’exécuter et de déployer votre application sur macOS. Nous allons maintenant déployer l’application sur iOS.
Fermez l’application .NET MAUI en cours d’exécution et revenez à VS Code.
Dans la barre d’état, cliquez sur les accolades en bas à droite de la fenêtre VS Code et sélectionnez Cible de débogage.
Faites défiler vers le bas et sélectionnez iPhone 15.
Vous devriez maintenant voir apparaître iOS : iPhone 15 en tant que nouvelle cible de débogage.
Pour exécuter l’application, cliquez sur l’icône Exécuter et déboguer dans la barre d’activité de VS Code. Cliquez ensuite sur Exécuter et déboguer.
Votre application sera compilée et déployée sur le simulateur d’iPhone. Veuillez noter que cette opération peut prendre une minute, car elle active virtuellement un iPhone !
Étapes suivantes
Félicitations, vous avez créé et exécuté votre première application .NET MAUI !
Poursuivre l’apprentissage
Maintenant que vous maîtrisez les bases, continuez à apprendre à créer des applications .NET MAUI avec le parcours d'apprentissage autoguidé sur Microsoft Learn.
.NET MAUI parcours d’apprentissage
.NET MAUI pour les débutants
Laissez James vous guider dans la création d'une application .NET MAUI complète du début à la fin :
Vous pourriez aussi être intéressé par...
