Tutoriel .NET MAUI – 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.

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!.

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 ?

Ce didacticiel est optimisé pour la dernière version de Visual Studio. Si vous avez déjà Visual Studio 2022, vérifiez qu’il est à jour et que la charge de travail requise est installée :

Recherchez le Visual Studio Installer sur votre ordinateur.

Dans le menu Démarrer de Windows, recherchez "installer", puis sélectionnez Visual Studio Installer dans les résultats.
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 :

Télécharger 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.

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.
Ouvrez un nouveau terminal et installez la charge de travail .NET MAUI en exécutant la commande suivante :
Terminal
```
sudo dotnet workload install maui
```
Si l'installation a réussi, vous devriez voir une sortie semblable à la suivante :
Terminal
```
Successfully 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.

Terminal

dotnet workload list

Si l'installation a réussi, vous devriez voir une sortie semblable à la suivante :

Terminal

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 :

Dernière version de Xcode

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.
Ouvrez un nouveau terminal et installez les Outils de développement en ligne de commande Xcode en exécutant la commande suivante :
Terminal
```
xcode-select --install
```
Lorsque vous êtes invité à installer les outils de développement en ligne de commande Xcode, sélectionnez Installer. Enfin, acceptez le contrat de licence.

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.
Dans la fenêtre Configurer votre nouveau projet, entrez MyFirstMauiApp comme nom de projet et cliquez sur le bouton Suivant.
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.

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.

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

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).

Actuellement, le Text du deuxième Label de la ligne 17 est défini pour indiquer Hello, World!, comme indiqué dans le code suivant:

MainPage.xaml

<Label
    Text="Hello, World!" 
    Style="{StaticResource Headline}"
    SemanticProperties.HeadingLevel="Level1"  />

Mettez à jour le texte pour lire Hello, .NET MAUI! :

MainPage.xaml

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

MainPage.xaml.cs

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;.

MainPage.xaml.cs

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.

É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...

Documents de développeur

Creusez plus loin avec la documentation pour .NET MAUI

Exemples .NET MAUI

Explorez les exemples .NET MAUI sur GitHub

Tutoriel .NET MAUI – Créez votre première application multiplateforme en C#