Partager via

Tutoriel : Créer votre première application de plateforme Windows universelle dans Visual Studio avec XAML et C#

Dans ce tutoriel, en guise d’introduction à l’environnement de développement intégré (IDE) Visual Studio, vous créez une application « Hello World » qui s’exécute sur n’importe quel appareil Windows 10 ou version ultérieure. Pour ce faire, vous utilisez un modèle de projet de plateforme Windows universelle (UWP), un langage XAML (Extensible Application Markup Language) et le langage de programmation C#.

Remarque

Si vous êtes satisfait de vos fonctionnalités actuelles dans la plateforme Windows universelle (UWP), il n’est pas nécessaire de migrer votre type de projet vers le Kit de développement logiciel (SDK) d’application Windows. WinUI 2.x et le Kit de développement logiciel (SDK) Windows prennent en charge les types de projets UWP. Si vous souhaitez commencer à utiliser WinUI 3 et le Kit de développement logiciel (SDK) d’application Windows, vous pouvez suivre les étapes décrites dans le didacticiel du Kit de développement logiciel (SDK) d’application Windows.

Dans ce tutoriel, vous allez :

  • Créer un projet
  • Créer une application
  • Exécuter l’application

Conditions préalables

Tu as besoin de:

  • Visual Studio. Visitez la page téléchargements de Visual Studio pour obtenir une version gratuite.

  • Charges de travail et composants requis pour le développement d’une application UWP. Pour vérifier ou installer une charge de travail dans Visual Studio, sélectionnez Outils>Obtenir des outils et fonctionnalités, ou dans la fenêtre Créer un projet , sélectionnez le lien Installer d’autres outils et fonctionnalités . Pour plus d’informations, consultez Modifier les charges de travail ou les composants individuels.

    Sous l’onglet Charges de travail du programme d’installation de Visual Studio, sélectionnez les charges de travail et les composants suivants :

    • Pour le développement d’applications à l’aide de UWP, sélectionnez la charge de travail de développement d’applications WinUI . Ensuite, dans le volet Détails de l’installation , sous le nœud de développement d’applications WinUI , sélectionnez l’option UWP dont vous avez besoin (cela sélectionnera également tous les composants requis supplémentaires)

    • Pour C#, sélectionnez outils de plateforme Windows universelle et Kit de développement logiciel (SDK) Windows 11 (10.0.26100.0).

    • Ce tutoriel nécessite le modèle de projet Application vide UWP .

    Remarque

    Dans Visual Studio 17.10 - 17.12, cette charge de travail est appelée développement d’applications Windows.

Créer un projet

Tout d’abord, créez un projet de plateforme Windows universelle. Le type de projet est fourni avec tous les fichiers de modèle dont vous avez besoin, avant même d’ajouter quoi que ce soit !

  1. Ouvrez Visual Studio, puis, dans la fenêtre de démarrage, choisissez Créer un projet.

  2. Dans l’écran Créer un projet , entrez Windows universel dans la zone de recherche, choisissez le modèle C# pour l’application vide (Windows universelle) ou l’application vide UWP dans Visual Studio 2022 17.10 ou version ultérieure, puis choisissez Suivant.

    Capture d’écran de la boîte de dialogue « Créer un projet » avec « Windows universel » entré dans la zone de recherche, et le modèle de projet « Application vide (Windows universelle) » mis en surbrillance.

  3. Donnez au projet un nom, HelloWorld, puis choisissez Créer.

    Capture d’écran de la boîte de dialogue « Configurer votre nouveau projet » avec « HelloWorld » entrée dans le champ Nom du projet.

  4. Acceptez les paramètres de version cible par défaut et de version minimale dans la boîte de dialogue Nouveau projet de plateforme Windows universelle .

    Capture d’écran de la boîte de dialogue Nouveau projet de plateforme Windows universelle montrant la version cible par défaut et les paramètres de version minimale.

    Remarque

    Si c’est la première fois que vous avez utilisé Visual Studio pour créer une application UWP, la boîte de dialogue Activer le mode développeur pour Windows s’affiche. Sélectionnez paramètres pour les développeurs pour ouvrir Paramètres. Activez le mode Développeur, puis choisissez Oui.

    Capture d’écran montrant la boîte de dialogue Paramètres UWP avec l’option permettant d’activer le mode développeur.

    Visual Studio installe un package en mode développeur supplémentaire pour vous. Une fois l’installation du package terminée, fermez la boîte de dialogue Paramètres .

Créer l’application

Il est temps de commencer à développer des logiciels. Ajoutez un contrôle de bouton, ajoutez une action au bouton, puis démarrez l’application « Hello World » pour voir à quoi il ressemble.

Ajouter un bouton à la zone de conception

  1. Dans l’Explorateur de solutions, double-cliquez MainPage.xaml pour ouvrir une vue fractionnée.

    Capture d’écran de la fenêtre Explorateur de solutions montrant les propriétés, les références, les ressources et les fichiers dans le projet HelloWorld. Le fichier MainPage.xaml est sélectionné.

    Il existe deux volets : le concepteur XAML , qui inclut un canevas de conception et l’éditeur XAML , où vous pouvez ajouter ou modifier du code.

    Capture d’écran montrant MainPage.xaml ouvert dans l’IDE Visual Studio. Le volet Concepteur XAML affiche une aire de conception vide et le volet Éditeur XAML affiche certains du code XAML.

  2. Choisissez Boîte à outils pour ouvrir la fenêtre volante boîte à outils.

    Capture d’écran montrant l’onglet de la fenêtre contextuelle « Boîte à outils » mis en surbrillance sur le côté gauche dans le volet du concepteur XAML.

    Si vous ne voyez pas l’option Boîte à outils , vous pouvez l’ouvrir à partir de la barre de menus. Pour ce faire, choisissez Afficher> labarre d’outils. Ou appuyez sur Ctrl+Alt+X.

  3. Sélectionnez l’icône Épingler pour ancrer la fenêtre Boîte à outils.

    Capture d’écran montrant l’icône Épingle mise en surbrillance dans la barre supérieure de la fenêtre Boîte à outils.

  4. Sélectionnez le contrôle Button , puis faites-le glisser sur le canevas de conception.

    Capture d’écran montrant « Bouton » mis en surbrillance dans la fenêtre Boîte à outils et un contrôle Button sur le canevas de conception.

    Si vous examinez le code dans l’éditeur XAML , vous voyez que le bouton s’affiche également :

    Capture d’écran montrant le code du bouton récemment ajouté mis en surbrillance dans l’éditeur XAML.

Ajouter une étiquette au bouton

  1. Dans l’éditeur XAML, remplacez Button Content la valeur de Button par Hello World !

    Capture d’écran montrant le code XAML du bouton dans l’éditeur XAML avec la valeur de la propriété De contenu modifiée en « Hello World ! ».

  2. Notez que le bouton du Concepteur XAML change également.

    Capture d’écran montrant le contrôle Bouton sur le canevas du Concepteur XAML avec l’étiquette du bouton modifié en Hello World !

Ajouter un gestionnaire d’événements

Un gestionnaire d’événements semble compliqué, mais il s’agit simplement d’un autre nom pour le code appelé lorsqu’un événement se produit. Dans ce cas, il ajoute une action au bouton Hello World !

  1. Double-cliquez sur le contrôle bouton dans la zone de conception.

  2. Modifiez le code du gestionnaire d’événements dans MainPage.xaml.cs, la page code-behind.

    C’est là que les choses sont intéressantes. Le gestionnaire d’événements par défaut ressemble à ceci :

    Capture d’écran montrant le code C# pour le gestionnaire d’événements Button_Click par défaut.

    Modifiez-le, de sorte qu’il ressemble à ceci :

    Capture d’écran montrant le code C# pour le nouveau gestionnaire d’événements Button_Click asynchrone.

    Voici le code à copier et coller :

    private async void Button_Click(object sender, RoutedEventArgs e)
{
   MediaElement mediaElement = new MediaElement();
   var synth = new Windows.Media.SpeechSynthesis.SpeechSynthesizer();
   Windows.Media.SpeechSynthesis.SpeechSynthesisStream stream = await synth.SynthesizeTextToStreamAsync("Hello, World!");
   mediaElement.SetSource(stream, stream.ContentType);
   mediaElement.Play();
}

Qu’est-ce que nous avons fait ?

Le code utilise certaines API Windows pour créer un objet de synthèse vocale, puis lui donne du texte à dire. Pour plus d’informations sur l’utilisation de SpeechSynthesis, consultez System.Speech.Synthesis.

Exécuter l’application

Il est temps de créer, déployer et lancer l’application UWP « Hello World » pour voir à quoi il ressemble. Voici comment.

  1. Utilisez le bouton Lecture (il contient le texte Ordinateur local) pour démarrer l’application sur l’ordinateur local.

    Capture d’écran montrant la zone déroulante ouverte en regard du bouton Lecture avec l’option « Ordinateur local » sélectionnée.

    Vous pouvez également choisir Déboguer>Démarrer le débogage à partir de la barre de menus ou appuyer sur F5 pour démarrer votre application.

  2. Affichez votre application, qui apparaît peu après la disparition d’un écran de démarrage. L’application doit ressembler à cette image :

    Capture d’écran montrant l’application UWP « Hello World » en cours d’exécution.

  3. Sélectionnez le bouton Hello World .

    Votre appareil Windows 10 ou version ultérieure indique littéralement « Hello, World ! »

  4. Pour fermer l’application, sélectionnez le bouton Arrêter le débogage dans la barre d’outils. Vous pouvez également choisir Désactiver> ledébogage à partir de la barre de menus, ou appuyez sur Maj+F5.

Contenu connexe

Étape suivante

Félicitations pour avoir terminé ce tutoriel ! Nous espérons que vous avez appris quelques notions de base sur UWP et l’IDE Visual Studio. Pour en savoir plus, suivez le tutoriel suivant :

Créer une interface utilisateur

  • Last updated on