Créer votre première Xamarin.Forms application

Instructions pas à pas pour Windows

Télécharger l’exemple Télécharger l’exemple

Suivez ces étapes, ainsi que la vidéo ci-dessus :

  1. Choisissez Fichier > nouveau > projet... ou appuyez sur le bouton Créer un projet...

  2. Recherchez « Xamarin », ou choisissez Mobile dans le menu Type de projet. Sélectionnez le type de projet Application mobile (Xamarin.Forms).

  3. Choisissez un nom de projet : l’exemple utilise « AwesomeApp ».

  4. Cliquez sur le type de projet Vide, puis vérifiez qu’Android et iOS sont sélectionnés :

    Application vide Android et iOS

  5. Attendez que les paquets NuGet soient restaurés (un message indiquant la fin de la restauration s’affiche dans la barre d’état).

  6. Les kits SDK Android des nouvelles installations de Visual Studio 2022 ne sont pas installés. Vous pouvez être invité à installer le sdk Android le plus récent :

    Installer le Kit de développement logiciel (SDK) Android

  7. Les nouvelles installations de Visual Studio 2022 n’auront pas d’émulateur Android configuré. Cliquez sur la flèche déroulante vers le bas du bouton Déboguer, puis choisissez Créer un émulateur Android pour lancer l’écran de création de l’émulateur :

    Liste déroulante Créer un émulateur Android

  8. Dans l’écran de création de l’émulateur, utilisez les paramètres par défaut, puis cliquez sur le bouton Créer :

    Écran de création de l’émulateur Android

  9. La création d’un émulateur vous ramène à la fenêtre du Gestionnaire d’appareils. Cliquez sur le bouton Démarrer pour lancer le nouvel émulateur :

    Émulateur Android dans le Gestionnaire d’appareils

  10. Visual Studio 2022 doit maintenant afficher le nom du nouvel émulateur sur le bouton Déboguer :

    Nom de l’Émulateur Android sur le bouton Déboguer

  11. Cliquez sur le bouton Déboguer pour générer et déployer l’application sur l’Émulateur Android :

    Émulateur Android affichant l’application

Personnaliser l’application

Vous pouvez personnaliser l’application pour ajouter des fonctionnalités interactives. Effectuez les étapes suivantes pour ajouter à l’application une fonctionnalité d’interaction avec l’utilisateur :

  1. Modifiez MainPage.xaml en ajoutant ce code XAML avant la fin de </StackLayout> :

    <Button Text="Click Me" Clicked="Button_Clicked" />
    
  2. Modifiez MainPage.xaml.cs en ajoutant ce code à la fin de la classe :

    int count = 0;
    void Button_Clicked(object sender, System.EventArgs e)
    {
        count++;
        ((Button)sender).Text = $"You clicked {count} times.";
    }
    
  3. Déboguez l’application sur Android :

    Application Android avec Bouton

Créer une application iOS dans Visual Studio 2022

Vous pouvez générer et déboguer l’application iOS à partir de Visual Studio à l’aide d’un ordinateur Mac en réseau. Pour plus d’informations, consultez les instructions de configuration.

Instructions pas à pas pour Windows

Télécharger l’exemple Télécharger l’exemple

Suivez ces étapes, ainsi que la vidéo ci-dessus :

  1. Choisissez Fichier > nouveau > projet... ou appuyez sur le bouton Créer un projet... :

    Création d'un projet

  2. Recherchez « Xamarin », ou choisissez Mobile dans le menu Type de projet. Sélectionnez le type de projet Application mobile (Xamarin.Forms) :

    Filtre pour les projets Xamarin

  3. Choisissez un nom de projet : l’exemple utilise « AwesomeApp » :

    Choisir un nom de projet

  4. Cliquez sur le type de projet Vide, puis vérifiez qu’Android et iOS sont sélectionnés :

    Android et iOS, avec .NET Standard

  5. Attendez que les paquets NuGet soient restaurés (un message indiquant la fin de la restauration s’affiche dans la barre d’état).

  6. Les nouvelles installations de Visual Studio 2019 ne disposent pas d’un Émulateur Android configuré. Cliquez sur la flèche déroulante vers le bas du bouton Déboguer, puis choisissez Créer un émulateur Android pour lancer l’écran de création de l’émulateur :

    Liste déroulante Créer un émulateur Android

  7. Dans l’écran de création de l’émulateur, utilisez les paramètres par défaut, puis cliquez sur le bouton Créer :

    Écran de création de l’émulateur Android

  8. La création d’un émulateur vous ramène à la fenêtre du Gestionnaire d’appareils. Cliquez sur le bouton Démarrer pour lancer le nouvel émulateur :

    Émulateur Android dans le Gestionnaire d’appareils

  9. Visual Studio 2019 doit maintenant afficher le nom du nouvel émulateur sur le bouton Déboguer :

    Nom de l’Émulateur Android sur le bouton Déboguer

  10. Cliquez sur le bouton Déboguer pour générer et déployer l’application sur l’Émulateur Android :

    Émulateur Android affichant l’application

Personnaliser l’application

Vous pouvez personnaliser l’application pour ajouter des fonctionnalités interactives. Effectuez les étapes suivantes pour ajouter à l’application une fonctionnalité d’interaction avec l’utilisateur :

  1. Modifiez MainPage.xaml en ajoutant ce code XAML avant la fin de </StackLayout> :

    <Button Text="Click Me" Clicked="Button_Clicked" />
    
  2. Modifiez MainPage.xaml.cs en ajoutant ce code à la fin de la classe :

    int count = 0;
    void Button_Clicked(object sender, System.EventArgs e)
    {
        count++;
        ((Button)sender).Text = $"You clicked {count} times.";
    }
    
  3. Déboguez l’application sur Android :

    Application Android

Notes

L’exemple d’application comprend la fonctionnalité interactive supplémentaire qui n’est pas abordée dans la vidéo.

Générer une application iOS dans Visual Studio 2019

Vous pouvez générer et déboguer l’application iOS à partir de Visual Studio à l’aide d’un ordinateur Mac en réseau. Pour plus d’informations, consultez les instructions de configuration.

Cette vidéo décrit le processus de génération et de test d’une application iOS à l’aide de Visual Studio 2019 sur Windows :

Instructions pas à pas pour Mac

Télécharger l’exemple Télécharger l’exemple

Suivez ces étapes, ainsi que la vidéo ci-dessus :

  1. Choisissez Fichier > nouvelle solution... ou appuyez sur le bouton Nouveau projet... , puis sélectionnez Application multiplateforme >> Formulaire vide Application :

    Application Formulaires vides

  2. Vérifiez qu’Android et iOS sont sélectionnés :

    Android et iOS, avec .NET Standard

Notes

Seuls les caractères A-Z, a-z, « _ », « . » et les nombres sont des caractères pris en charge pour le nom de votre application et l’identificateur d’organisation.

  1. Restaurez les paquets NuGet en cliquant avec le bouton droit sur la solution :

    Capture d’écran montrant restaurer des packages NuGet sélectionnés dans le menu contextuel de la solution.

  2. Lancez l’émulateur Android en appuyant sur le bouton de débogage (ou Exécuter Démarrer > le débogage).

  3. Modifiez MainPage.xaml en ajoutant ce code XAML avant la fin de </StackLayout> :

    <Button Text="Click Me" Clicked="Handle_Clicked" />
    
  4. Modifiez MainPage.xaml.cs en ajoutant ce code à la fin de la classe :

    int count = 0;
    void Handle_Clicked(object sender, System.EventArgs e)
    {
        count++;
        ((Button)sender).Text = $"You clicked {count} times.";
    }
    
  5. Déboguez l’application sur Android :

    Capture d’écran montrant l’émulateur Android.

  6. Cliquez avec le bouton droit pour définir le projet de démarrage à iOS :

    Définir le projet de démarrage sur iOS

  7. Déboguer l’application sur iOS en sélectionnant un simulateur iOS dans la liste déroulante.

Instructions pas à pas pour Mac

Télécharger l’exemple Télécharger l’exemple

Suivez ces étapes, ainsi que la vidéo ci-dessus :

  1. Choisissez Fichier > nouvelle solution... ou appuyez sur le bouton Nouveau projet... , puis sélectionnez Application multiplateforme >> Formulaire vide Application :

    Application Formulaires vides

  2. Vérifiez qu’Android et iOS sont sélectionnés, ainsi que le partage de code .NET Standard :

    Android et iOS, avec .NET Standard

Notes

Seuls les caractères A-Z, a-z, « _ », « . » et les nombres sont des caractères pris en charge pour le nom de votre application et l’identificateur d’organisation.

  1. Restaurez les paquets NuGet en cliquant avec le bouton droit sur la solution :

    Capture d’écran montrant restaurer des packages NuGet sélectionnés dans le menu contextuel de la solution.

  2. Lancez l’émulateur Android en appuyant sur le bouton de débogage (ou Exécuter Démarrer > le débogage).

  3. Modifiez MainPage.xaml en ajoutant ce code XAML avant la fin de </StackLayout> :

    <Button Text="Click Me" Clicked="Handle_Clicked" />
    
  4. Modifiez MainPage.xaml.cs en ajoutant ce code à la fin de la classe :

    int count = 0;
    void Handle_Clicked(object sender, System.EventArgs e)
    {
        count++;
        ((Button)sender).Text = $"You clicked {count} times.";
    }
    
  5. Déboguez l’application sur Android :

    Capture d’écran montrant l’émulateur Android.

  6. Cliquez avec le bouton droit pour définir le projet de démarrage à iOS :

    Définir le projet de démarrage sur iOS

  7. Déboguez l’application sur iOS :

    Application iOS

Vous pouvez télécharger le code complet à partir de la galerie d’exemples ou le voir sur GitHub.

Étapes suivantes