Créez votre première application

Dans ce tutoriel, vous apprendrez à 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 Code sur Windows, macOS ou Linux. Cela permettra de s’assurer que votre environnement de développement est correctement configuré.

Visual Studio

Prérequis

• Visual Studio 2022 17.12 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 démarre le processus d’installation du Kit de développement logiciel (SDK) Android et de l’émulateur Android par défaut.

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

   

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

   

   Attendez que Visual Studio télécharge le Kit de développement logiciel (SDK) Android et l’émulateur Android par défaut.

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

    

11. Dans la boîte de dialogue Kit de développement logiciel (SDK) Android, appuyez sur le bouton Installer :

    

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

    

    Attendez que Visual Studio installe les composants du Kit de développement logiciel (SDK) Android.

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

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

    

15. Dans la barre d’outils Visual Studio, appuyez sur le bouton Pixel 7 - API 35 (Android 15.0 - API 35) :

    

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

    

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

    

    Attendez que Visual Studio soit installé pour télécharger le Kit de développement logiciel (SDK) Android.

18. Dans la barre d’outils Visual Studio, appuyez sur le bouton Pixel 7 - API 35 (Android 15.0 - API 35) 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).

19. 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, appuyez sur le bouton Machine Windows pour générer et exécuter l’application :

   

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

Visual Studio Code

Prérequis

• Visual Studio Code, avec l’extension .NET MAUI installée et configurée :
  • Votre compte Microsoft connecté au Kit de développement C#.
  • Kit de développement logiciel (SDK) .NET installé.
  • Kit de développement logiciel (SDK) .NET MAUI installé.
  • Xcode installé sur votre Mac, y compris les runtimes de simulateur et les outils en ligne de commande Xcode, si vous ciblez des plateformes Apple.
  • Microsoft OpenJDK, le Kit de développement logiciel (SDK) Android et un émulateur Android installés sur votre ordinateur, si vous ciblez Android.

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 Code et l’exécuter sur un émulateur Android :

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

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

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

1. Lancer Visual Studio Code. Dans lede l’Explorateur , appuyez sur Créer un projet .NET:

   

   Vous pouvez également appuyer sur Ctrl+Maj+P sur Windows, ou CMD+Maj+P sur macOS, puis sur la commande .NET : Nouveau projet....

2. Dans la palette de commandes, sélectionnez le modèle .NET MAUI App :

   

3. Dans la boîte de dialogue Emplacement du projet, sélectionnez l’emplacement où vous souhaitez que le nouveau projet soit créé.

   Important

   Les projets doivent être créés dans un dossier vide.

4. Dans la palette de commandes, entrez un nom pour votre nouveau projet, puis appuyez sur ENTRÉE:

   

5. Dans la palette de commandes, appuyez sur Créer un projet:

   

   Attendez que le projet soit créé, en acceptant le dossier comme emplacement approuvé si nécessaire.

6. Dans l’explorateur , développez le nœud racine de votre projet, puis ouvrez un fichier C# tel que MainPage.xaml.cs:

   

7. Dans Visual Studio Code, vérifiez que votre environnement Android est configuré correctement en appuyant sur Ctrl+Maj+P sur Windows, ou CMD+MAJ+P sur macOS, puis en sélectionnant .NET MAUI : Configurer Android, suivi de Actualiser l’environnement Android. Toutes les erreurs détectées doivent être traitées.

8. Dans la barre d’état située en bas de Visual Studio Code, appuyez sur le symbole de crochets courbés { } et vérifiez que le Debug Target est défini sur un émulateur Android spécifique :

   

   Vous pouvez également définir la cible de débogage en appuyant sur Ctrl+Maj+P sur Windows, ou CMD+Maj+P sur macOS, puis en sélectionnant .NET MAUI : Choisissez l’appareil Android dans la palette de commandes.

9. Générez et exécutez l’application sur Android en appuyant sur F5 ou en appuyant sur le bouton Exécuter dans le coin supérieur droit de Visual Studio Code :

   

   Si vous êtes invité à sélectionner un débogueur dans la palette de commandes, sélectionnez C#, puis la configuration de lancement de votre projet.

10. Dans l’application en cours d’exécution dans votre émulateur Android choisi, appuyez sur le bouton Cliquez sur moi plusieurs fois et observez que le nombre de clics de bouton est incrémenté :

    

Déboguer l’application sur un appareil Android

Pour déboguer l’application sur un appareil Android :

1. Vérifiez que votre appareil est configuré pour le déploiement. Pour plus d’informations, consultez Configurer un appareil pour le déploiement.
2. Connectez votre appareil à votre machine et sélectionnez-le en tant que cible de débogage dans Visual Studio Code.
3. Exécutez l’application.

7. Dans Visual Studio Code, vérifiez que votre environnement Apple est configuré correctement en appuyant sur CMD+MAJ+P, puis en sélectionnant .NET MAUI : Configurer Apple, suivi de l'environnement Apple Actualiser. Toutes les erreurs détectées doivent être traitées.

8. Dans la barre d’état située en bas de Visual Studio Code, appuyez sur le symbole de crochets courbés { } et vérifiez que le cible de débogage est défini sur un simulateur iOS spécifique :

   

   Vous pouvez également définir la cible de débogage en appuyant sur CMD+MAJ+P et en sélectionnant .NET MAUI : Choisir l’appareil iOS dans la palette de commandes.

9. Générez et exécutez l’application sur iOS en appuyant sur F5 ou en appuyant sur le bouton Exécuter dans le coin supérieur droit de Visual Studio Code :

   

   Si vous êtes invité à sélectionner un débogueur dans la palette de commandes, sélectionnez C#, puis la configuration de lancement de votre projet.

10. Dans l'application qui s'exécute dans votre simulateur iOS choisi, appuyez sur le bouton Cliquez-moi plusieurs fois et observez que le nombre de clics sur le bouton est incrémenté :

    

Déboguer l’application sur un appareil iOS

Pour déboguer l’application sur un appareil iOS :

1. Vérifiez que vous avez ajouté votre ID Apple à Xcode dans Paramètres > Xcode > Comptes.
2. Vérifiez que votre appareil a été inscrit auprès de votre équipe, si vous appartenez au Programme des développeurs Apple.
3. Activez le mode développeur sur votre appareil. La première fois que vous exécutez votre application, une fenêtre contextuelle peut apparaître sur l’appareil. Assurez-vous de sélectionner Autoriser. Pour plus d’informations sur le mode développeur, consultez Activation du mode développeur sur un appareil sur developer.apple.com.
4. Connectez votre appareil à votre machine et sélectionnez-le en tant que cible de débogage dans Visual Studio Code.
5. Exécutez l’application.

7. Dans Visual Studio Code, vérifiez que votre environnement Apple est configuré correctement en appuyant sur CMD+MAJ+P, puis en sélectionnant .NET MAUI : Configurer Apple, suivi de l'environnement Apple Actualiser. Toutes les erreurs détectées doivent être traitées.

8. Dans la barre d’état située en bas de Visual Studio Code, appuyez sur le symbole de crochets courbés { } et vérifiez que le cible de débogage est défini sur votre Mac :

   

   Vous pouvez également définir la cible de débogage en appuyant sur CMD+MAJ+P et en sélectionnant .NET MAUI : choisir l’appareil macOS dans la palette de commandes.

9. Générez et exécutez l’application sur macOS en appuyant sur F5 ou en appuyant sur le bouton Exécuter dans le coin supérieur droit de Visual Studio Code :

   

   Si vous êtes invité à sélectionner un débogueur dans la palette de commandes, sélectionnez C#, puis la configuration de lancement de votre projet.

10. 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é.

    

7. Dans la barre d’état située en bas de Visual Studio Code, appuyez sur le symbole de crochets curly { } et vérifiez que le cible de débogage est défini sur Windows :

   

   Vous pouvez également définir la cible de débogage en appuyant sur Ctrl+Maj+P et en sélectionnant .NET MAUI : Choisir l’appareil Windows dans la palette de commandes.

8. Générez et exécutez l’application sur Windows en appuyant sur F5 ou en appuyant sur le bouton Exécuter dans le coin supérieur droit de Visual Studio Code :

   

   Si vous êtes invité à sélectionner un débogueur dans la palette de commandes, sélectionnez C#, puis la configuration de lancement de votre projet.

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 votre application ne parvient pas à être créée et déployée, passez en revue Résolution des problèmes connus, qui peut offrir une solution à votre problème.

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