Créez votre première application

Dans ce tutoriel, vous allez apprendre à créer et à exécuter votre première application .NET MAUI (.NET Multi-platform App UI) dans Visual Studio 2022 sur Windows ou Visual Studio 2022 pour Mac. Cela permettra de s’assurer que votre environnement de développement est correctement configuré.

Visual Studio

Prérequis

• Visual Studio 2022 17.8 ou version ultérieure, avec la charge de travail de l’interface utilisateur de l’application multiplateforme .NET installée. Pour plus d’informations, consultez Installation.

Créer une application

Dans ce tutoriel, vous allez créer votre première application .NET MAUI dans Visual Studio 2022 et l’exécuter sur un émulateur Android :

Le développement d’applications .NET MAUI pour iOS sur Windows nécessite un hôte de build Mac. Si vous n’avez pas spécifiquement besoin de cibler iOS et que vous n’avez pas de Mac, il peut être préférable de plutôt commencer avec Android ou Windows.

Dans ce tutoriel, vous allez créer votre première application .NET MAUI dans Visual Studio et l’exécuter sur un simulateur iOS :

Dans ce tutoriel, vous allez créer votre première application .NET MAUI dans Visual Studio 2022 et l’exécuter sur Windows :

1. Lancez Visual Studio 2022. Dans la fenêtre de démarrage, cliquez sur Créer un projet pour créer un projet :

   

2. Dans la fenêtre Créer un projet, sélectionnez MAUI dans la liste déroulante Tous les types de projets, sélectionnez le modèle Application .NET MAUI, puis cliquez sur le bouton Suivant :

   

3. Dans la fenêtre Configurer votre nouveau projet, nommez votre projet, choisissez un emplacement approprié pour celui-ci, puis cliquez sur le bouton Suivant :

   

4. Dans la fenêtre Informations supplémentaires, choisissez la version de .NET que vous souhaitez cibler, puis cliquez sur le bouton Créer :

   

5. Attendez que le projet soit créé et que ses dépendances soient restaurées :

   

6. Dans la barre d’outils Visual Studio, utilisez la liste déroulante Cible de débogage pour sélectionner Émulateurs Android, puis l’entrée Émulateur Android :

   

7. Dans la barre d’outils Visual Studio, appuyez sur le bouton Émulateur Android :

   

   Visual Studio commence à installer Android SDK et l’Émulateur Android par défaut.

8. Dans la fenêtre Android SDK – Contrat de licence, appuyez sur le bouton Accepter :

   

9. Dans la fenêtre Android SDK – Contrat de licence, appuyez sur le bouton Accepter :

   

10. Dans la boîte de dialogue Contrôle de compte d’utilisateur, appuyez sur le bouton Oui :

    

11. Dans la fenêtre Acceptation de la licence, appuyez sur le bouton Accepter :

    

    Attendez que Visual Studio télécharge le kit de développement logiciel Android et l’Émulateur Android.

12. Dans la barre d’outils Visual Studio, appuyez sur le bouton Émulateur Android :

    

    Visual Studio commence à créer un émulateur Android par défaut.

13. Dans la boîte de dialogue Contrôle de compte d’utilisateur, appuyez sur le bouton Oui :

    

14. Dans la fenêtre Nouvel appareil, appuyez sur le bouton Créer :

    

    Attendez que Visual Studio télécharge, décompresse et crée un émulateur Android.

15. Fermez la fenêtre Gestionnaire d’appareils Android :

    

16. Dans la barre d’outils Visual Studio, appuyez sur le bouton Pixel 5 - API 34 (Android 14.0 - API 33) pour générer et exécuter l’application :

    

    Visual Studio démarre l’émulateur Android, génère l’application, et déploie l’application sur l’émulateur.

    Avertissement

    L’accélération matérielle doit être activée pour optimiser les performances de l’émulateur Android. Sans elle, l’émulateur s’exécutera très lentement. Pour plus d’informations, consultez Guide pratique pour activer l’accélération matérielle avec des émulateurs Android (Hyper-V & AEHD).

17. Dans l’application en cours d’exécution dans l’émulateur Android, appuyez plusieurs fois sur le bouton Click me et observez que le nombre de clics de bouton est incrémenté.

    

Dépannage

Si la compilation de votre application échoue, passez en revue l’article Résolution des problèmes connus, dans lequel vous trouverez peut-être une solution à votre problème. Si le problème est lié à l’émulateur Android, consultez Résolution des problèmes liés à l’émulateur Android.

6. Dans la barre d’outils Visual Studio, utilisez la liste déroulante Cible de débogage pour sélectionner Framework, puis l’entrée net8.0-windows :

   

7. Dans la barre d’outils Visual Studio, appuyez sur le bouton Machine Windows pour générer et exécuter l’application :

   

   Si vous n’avez pas activé le mode développeur, Visual Studio vous invite à l’activer. Dans la boîte de dialogue Activer le mode développeur pour Windows, cliquez sur paramètres pour les développeurs afin d’ouvrir l’application Paramètres :

   

   Dans l’application Paramètres, activez le mode développeur et acceptez l’exclusion de responsabilité :

   

   Fermez l’application Paramètres, puis fermez la boîte de dialogue Activer le mode développeur pour Windows.

8. Dans l’application en cours d’exécution, appuyez plusieurs fois sur le bouton Click me et observez que le nombre de clics de bouton est incrémenté.

   

Dépannage

Si la compilation de votre application échoue, passez en revue l’article Résolution des problèmes connus, dans lequel vous trouverez peut-être une solution à votre problème.

6. Dans Visual Studio, appairez l’IDE à un hôte de build Mac. Pour plus d’informations, consultez Appairer avec un Mac pour le développement iOS.

7. Dans la barre d’outils Visual Studio, utilisez la liste déroulante Cible de débogage pour sélectionner Simulateurs iOS, puis un simulateur iOS spécifique :

   

8. Dans la barre d’outils Visual Studio, appuyez sur le bouton Démarrer du simulateur iOS que vous avez choisi pour générer et exécuter votre application :

   

   Visual Studio génère l’application, démarre le simulateur iOS distant pour Windows, et déploie l’application sur le simulateur distant. Pour plus d’informations sur le simulateur iOS distant pour Windows, consultez Simulateur iOS distant pour Windows.

9. Dans l’application en cours d’exécution, appuyez plusieurs fois sur le bouton Click me et observez que le nombre de clics de bouton est incrémenté.

   

Dépannage

Si la compilation de votre application échoue, passez en revue l’article Résolution des problèmes connus, dans lequel vous trouverez peut-être une solution à votre problème.

Les applications .NET MAUI qui ciblent Mac Catalyst ne peuvent être lancées et déboguées qu’à l’aide de Visual Studio 2022 pour Mac.

Visual Studio pour Mac

Remarque

La mise hors service de Visual Studio pour Mac est prévue le 31 août 2024, conformément à la Politique de cycle de vie moderne de Microsoft. Visual Studio pour Mac 17.6 continuera d’être pris en charge jusqu’au 31 août 2024, avec des mises à jour de maintenance pour les problèmes de sécurité et les plateformes mises à jour d’Apple. Pour plus d’informations, notamment sur les options alternatives pour le développement sur un Mac, consultez Qu’arrive-t-il à Visual Studio pour Mac ?.

Prérequis

• Visual Studio 2022 pour Mac 17.6 avec les charges de travail .NET, .NET MAUI, Android et iOS installées. Pour plus d’informations, consultez Installation.

Important

Pour utiliser Visual Studio pour Mac avec .NET 8, cochez la case Visual Studio > Préférences > Autre > Fonctionnalités d’évaluation> Utiliser le kit SDK .NET 8 s’il est installé (nécessite un redémarrage).

Créer une application

Dans ce tutoriel, vous allez créer votre première application .NET MAUI dans Visual Studio 2022 pour Mac et l’exécuter sur la plateforme de votre choix :

1. Lancez Visual Studio 2022 pour Mac. Dans la fenêtre de démarrage, cliquez sur Nouveau pour créer un projet :

   

2. Dans la fenêtre Choisir un modèle pour votre nouveau projet, sélectionnez Multiplateforme > Application, sélectionnez le modèle Application .NET MAUI, puis cliquez sur le bouton Continuer :

   

3. Dans la fenêtre Configurer votre nouvelle application .NET MAUI, choisissez la version de .NET que vous souhaitez cibler, puis cliquez sur le bouton Continuer :

   

4. Dans la fenêtre Configurer votre nouvelle application .NET MAUI, entrez MyMauiApp comme nom de projet, sélectionnez un emplacement approprié pour le projet, puis cliquez sur le bouton Créer :

   

5. Attendez que le projet soit créé et que ses dépendances soient restaurées :

   

6. Visual Studio 2022 pour Mac affiche une barre d’informations si votre Mac ne dispose pas des composants Android SDK. Cliquez sur le bouton Installer pour installer Android SDK :

   

7. Dans la fenêtre Android SDK, cochez la case Téléchargez et installez automatiquement les dépendances Android, puis cliquez sur le bouton Télécharger et Installer :

   

8. Dans la fenêtre Acceptation de la licence, cliquez sur le bouton Accepter :

   

   Attendez que Visual Studio 2022 pour Mac télécharge Android SDK :

9. Dans la barre d’outils Visual Studio 2022 pour Mac, remplacez la cible de débogage par Émulateur Android :

   

10. Dans la barre d’outils Visual Studio 2022 pour Mac, appuyez sur le bouton Lecture pour générer l’application et tenter de la lancer :

    

    Visual Studio 2022 pour Mac génère l’application, puis crée un émulateur Android par défaut.

11. Dans la fenêtre Nouvel appareil, cliquez sur le bouton Créer :

    

12. Dans la fenêtre Acceptation de la licence, cliquez sur le bouton Accepter :

    

    Attendez que Visual Studio 2022 pour Mac télécharge et installe un émulateur Android.

13. Fermez la fenêtre Gestionnaire d’appareils Android :

    

14. Dans la barre d’outils Visual Studio 2022 pour Mac, remplacez la cible de débogage par Pixel 5 - API 34 (API 34) :

    

15. Dans la barre d’outils Visual Studio 2022 pour Mac, appuyez sur le bouton Lecture pour lancer l’application dans l’émulateur Android :

    

    Visual Studio 2022 pour Mac démarre l’émulateur Android, génère l’application, et déploie l’application sur l’émulateur.

16. Dans l’application en cours d’exécution dans l’émulateur Android, appuyez plusieurs fois sur le bouton Click me et observez que le nombre de clics de bouton est incrémenté :

    

6. Dans la barre d’outils Visual Studio 2022 pour Mac, vérifiez que la cible de débogage est définie sur un simulateur iOS :

   

7. Dans la barre d’outils Visual Studio 2022 pour Mac, appuyez sur le bouton Lecture pour lancer l’application dans le simulateur iOS de votre choix :

   

   Visual Studio 2022 pour Mac démarre l’émulateur iOS, génère l’application, et déploie l’application sur l’émulateur.

8. Dans l’application en cours d’exécution, appuyez plusieurs fois sur le bouton Click me et observez que le nombre de clics de bouton est incrémenté :

   

6. Dans la barre d’outils Visual Studio 2022 pour Mac, vérifiez que la cible de débogage est définie sur Mon Mac (MacCatalyst) :

   

7. Dans Visual Studio 2022 pour Mac, cliquez avec le bouton droit sur le projet MyMauiApp, puis sélectionnez Modifier le fichier projet. Ensuite, dans l’éditeur de fichier projet, insérez le code XML suivant avant le premier <ItemGroup> :

   <PropertyGroup Condition="'$(Configuration)|$(TargetFramework)|$(Platform)'=='Debug|net8.0-maccatalyst|AnyCPU'">
       <RuntimeIdentifiers>maccatalyst-x64;maccatalyst-arm64</RuntimeIdentifiers>
   </PropertyGroup>
   

8. Dans la barre d’outils Visual Studio 2022 pour Mac, appuyez sur le bouton Lecture pour lancer l’application sur votre Mac :

   

   Visual Studio 2022 pour Mac génère et déploie l’application.

9. Dans l’application en cours d’exécution, appuyez plusieurs fois sur le bouton Click me et observez que le nombre de clics de bouton est incrémenté :

   

Les applications .NET MAUI qui ciblent Windows ne peuvent être lancées et déboguées qu’à l’aide de Visual Studio 2022.

Visual Studio Code (Préversion)

Remarque

La prise en charge de .NET MAUI dans Visual Studio Code est toujours en préversion. Essayez-le et partagez vos commentaires !

Installer l’extension

Suivez les instructions pour configurer l’extension .NET MAUI pour Visual Studio Code.

Créer votre application

Pour créer une application .NET MAUI :

1. Cliquez sur Créer un projet .NET dans l’Explorateur, OU CTRL/CMD+SHIFT+P>.NET : Nouveau projet....
2. Sélectionnez Application .NET MAUI ou Application .NET MAUI Blazor.
3. Sélectionnez un dossier vide. Si l’Explorateur de fichiers s’ouvre à nouveau, votre dossier n’est pas vide.
4. Nom du projet.
5. Vérifiez que le projet se charge correctement dans l’Explorateur de solutions, puis ouvrez un fichier C# ou XAML.

Vous pouvez également ouvrir un projet .NET MAUI existant dans Visual Studio Code via Fichier > Ouvrir....

Vous devez maintenant voir votre application dans l’Explorateur de solutions du Kit de développement C# dans Visual Studio Code. Étant donné que l’extension .NET MAUI dépend du Kit de développement C#, vous pouvez utiliser toutes ses fonctionnalités en même temps que l’extension .NET MAUI.

Choisir votre appareil cible

Cliquez sur le symbole des accolades { } dans le coin inférieur droit de Visual Studio Code. Ici, vous pouvez changer votre projet de démarrage, remplacer votre cible de débogage par toute cible valide sur votre ordinateur de développement, et épingler l’un ou l’autre paramètre à la barre d’état de Visual Studio Code :

Vous pouvez également définir le projet de démarrage et la cible de débogage dans la palette de commandes, en utilisant CTRL/CMD+SHIFT+P et en recherchant « .NET MAUI ».

Par défaut, vous pouvez déployer sur votre ordinateur de développement macOS ou Windows local. Sur macOS, vous pouvez également déployer sur des simulateurs iOS.

Si vous souhaitez utiliser des émulateurs Android, effectuez ces étapes :

1. Accédez à <YOUR_ANDROID_SDK_DIRECTORY>/cmdline-tools/latest/bin/ dans votre terminal.
2. Exécutez et sdkmanager --install system-images;android-33;google_apis;x86_64 sur sdkmanager --install emulator Windows, ou ./sdkmanager --install emulator et ./sdkmanager --install system-images;android-33;google_apis;x86_64 sur macOS.
3. Ensuite, vous pouvez créer un émulateur sur la ligne de commande avec avdmanager d’Android. Par exemple, vous pouvez exécuter avdmanager create avd -n MyAndroidVirtualDevice-API33 -k "system-images;android-33;google_apis;x86_64" sur Windows, ou ./avdmanager create avd -n MyAndroidVirtualDevice-API33 -k "system-images;android-33;google_apis;x86_64" sur macOS.

Vous pouvez également déboguer sur des appareils Android physiques.

Déboguer votre application

Pour déboguer votre application, accédez au menu Exécuter et Déboguer de Visual Studio Code, puis sélectionnez le bouton « Exécuter et déboguer ». Vous pouvez également utiliser F5 pour démarrer une session de débogage. Si Visual Studio Code vous invite à sélectionner un débogueur, veillez à sélectionner « NET MAUI ».

Le débogueur choisit automatiquement le projet de démarrage et la cible de débogage que vous définissez dans le menu des accolades{ }. Si vous n’avez rien sélectionné, il vous invite à choisir une cible de débogage.

Une fois que votre application démarre le débogage, vous pouvez utiliser les outils de débogage Visual Studio Code intégrés pour définir des points d’arrêt, parcourir votre code et bien plus encore.

En savoir plus

Si vous rencontrez des problèmes avec l’extension, vous pouvez suivre les étapes de résolution des problèmes, consulter les problèmes connus ou fournir des commentaires.

Étapes suivantes

Dans ce tutoriel, vous avez appris à créer et à exécuter votre première application .NET MAUI (.NET Multi-platform App UI).

Pour découvrir les principes fondamentaux de la création d’une application avec .NET MAUI, consultez Créer une application .NET MAUI. Vous pouvez également suivre un cours complet de formation à .NET MAUI. Consultez Créer des applications mobiles et de bureau avec MAUI .NET.