Lire en anglais

Partager via


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

Notes

Si les fonctionnalités actuelles de la plateforme Windows universelle (UWP) vous conviennent, vous n’êtes pas tenu de migrer votre type de projet vers le SDK d’application Windows. WinUI 2.x et le SDK Windows prennent en charge les types de projets UWP. Si vous souhaitez vous familiariser avec WinUI 3 et le SDK d’application Windows, vous pouvez effectuer les étapes du tutoriel sur le SDK d’application Windows.

Dans cette présentation de l’environnement de développement intégré (IDE) Visual Studio, vous allez créer une application « Hello World » qui s’exécute sur n’importe quel appareil Windows 10 ou ultérieur. Pour ce faire, vous allez utiliser un modèle de projet de plateforme Windows universelle (UWP), le langage XAML (Extensible Application Markup Language) et le langage de programmation C#.

Si vous n’avez pas encore installé Visual Studio, accédez à la page Téléchargements Visual Studio pour l’installer gratuitement.

Création d’un projet

Créez tout d’abord un projet de plateforme Windows universelle. Le type de projet inclut tous les fichiers de modèle dont vous avez besoin au départ.

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

  2. Sur l’écran Créer un projet, entrez Windows universel dans la zone de recherche, choisissez le modèle C# pour Application vide (Windows universel), puis choisissez Suivant.

    Screenshot of the 'Create a new project' dialog with 'universal windows' entered in the search box, and the 'Blank App (Universal Windows)' project template highlighted.

    Notes

    Si vous ne voyez pas le modèle de projet Application vide (Windows universel), cliquez sur le lient Installer plus d’outils et de fonctionnalités.

    Screenshot of the Create a new project window showing the 'Install more tools and features' link.

    Visual Studio Installer est lancé. Choisissez la charge de travail Développement pour la plateforme Windows universelle, puis Modifier.

    Screenshot of the Visual Studio Installer showing the Universal Windows Platform development workload.

  3. Nommez le projet, HelloWorld et choisissez Créer.

    Screenshot of the 'Configure your new project' dialog with 'HelloWorld' entered in the Project name field.

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

    Screenshot of the New Universal Windows Platform Project dialog box showing the default Target version and Minimum version settings.

    Notes

    S’il s’agit de la première fois que vous avez utilisé Visual Studio pour créer une application UWP, une boîte de dialogue Paramètres peut s’afficher. Choisissez Mode développeur, puis Oui.

    Screenshot showing the UWP Settings dialog box with the option for enabling Developer Mode.

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

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

  2. Sur l’écran Créer un projet, entrez Windows universel dans la zone de recherche, choisissez le modèle C# pour Application vide (Windows universel), puis choisissez Suivant.

    Screenshot of the 'Create a new project' dialog with 'Universal Windows' entered in the search box, and the 'Blank App (Universal Windows)' project template highlighted.

    Notes

    Si vous ne voyez pas le modèle de projet Application vide (Windows universel), cliquez sur le lient Installer plus d’outils et de fonctionnalités.

    Screenshot of the Create a new project window showing the 'Install more tools and features' link.

    Visual Studio Installer est lancé. Choisissez la charge de travail de développement pour la plateforme Windows universelle, puis sélectionnez Modifier.

    Screenshot of the Visual Studio Installer showing the Universal Windows Platform development workload.

  3. Nommez le projet, HelloWorld et choisissez Créer.

    Screenshot of the 'Configure your new project' dialog with 'HelloWorld' entered in the Project name field.

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

    Screenshot of the New Universal Windows Platform Project dialog box showing the default Target version and Minimum version settings.

    Notes

    Si c’est la première fois que vous utilisez 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 développeurs pour ouvrir les Paramètres. Activez le Mode développeur, puis sélectionnez Oui.

    Screenshot showing the UWP Settings dialog box with the option for enabling Developer Mode.

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

Création de l'application

Il est temps de commencer à développer. Vous allez ajouter un contrôle bouton, ajouter une action au bouton, puis démarrer l’application « Hello World » pour voir à quoi elle ressemble.

Ajouter un bouton à la zone de conception

  1. Dans l’Explorateur de solutions, double-cliquez sur MainPage.xaml pour ouvrir un mode fractionné.

    Screenshot of the Solution Explorer window showing the properties, references, assets, and files in the HelloWorld project. The file MainPage.xaml is selected.

    Il existe deux volets : le concepteur XAML, qui comprend une zone de conception et l’éditeur XAML, où vous pouvez ajouter ou modifier le code.

    Screenshot showing MainPage.xaml open in the Visual Studio IDE. The XAML Designer pane shows a blank design surface and the XAML Editor pane shows some of the XAML code.

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

    Screenshot showing the tab for the 'Toolbox' fly-out window highlighted on the left side of the XAML Designer Pane.

    (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>Barre d’outils.Ou appuyez sur Ctrl+Alt+X.)

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

    Screenshot showing the Pin icon highlighted in the top bar of the Toolbox window.

  4. Cliquez sur le contrôle Button, puis faites-le glisser dans la zone de conception.

    Screenshot showing 'Button' highlighted in the Toolbox window and a Button control on the design canvas.

    Si vous examinez le code dans l’éditeur XAML, vous verrez que le contrôle Button y a aussi été ajouté :

    Screenshot showing the code for the newly added Button highlighted in the XAML editor.

  1. Dans l’Explorateur de solutions, double-cliquez sur MainPage.xaml pour ouvrir un mode fractionné.

    Screenshot of the Solution Explorer window showing the properties, references, assets, and files in the HelloWorld project. The file MainPage.xaml is selected.

    Il existe deux volets : le concepteur XAML, qui comprend une zone de conception et l’éditeur XAML, où vous pouvez ajouter ou modifier le code.

    Screenshot showing MainPage.xaml open in the Visual Studio IDE. The XAML Designer pane shows a blank design surface and the XAML Editor pane shows some of the XAML code.

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

    Screenshot showing the tab for the 'Toolbox' fly-out window highlighted on the left side of the XAML Designer Pane.

    (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>Barre d’outils.Ou appuyez sur Ctrl+Alt+X.)

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

    Screenshot showing the Pin icon highlighted in the top bar of the Toolbox window.

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

    Screenshot showing 'Button' highlighted in the Toolbox window and a Button control on the design canvas.

    Si vous examinez le code dans l’éditeur XAML, vous verrez que le contrôle Button y a aussi été ajouté :

    Screenshot showing the code for the newly added Button highlighted in the XAML editor.

Ajouter une étiquette au bouton

  1. Dans l’éditeur XAML, remplacez la valeur du contenu du bouton de « Bouton » par « Hello World! ».

    Screenshot showing the XAML code for the Button in the XAML editor. The value of the Content property has been changed to 'Hello World!'.

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

    Screenshot showing the Button control on the canvas of the XAML Designer. The label of the button has been changed to 'Hello World!'.

  1. Dans l’éditeur XAML, remplacez la valeur du contenu du bouton de « Bouton » par « Hello World! ».

    Screenshot showing the XAML code for the Button in the XAML editor. The value of the Content property has been changed to 'Hello World!'.

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

    Screenshot showing the Button control on the canvas of the XAML Designer. The label of the button has been changed to '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 qui est appelé quand 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 ici que les choses deviennent intéressantes. Le gestionnaire d’événements par défaut se présente ceci :

    Screenshot showing the C# code for the default Button_Click event handler.

    Modifions-le de sorte qu’il se présente comme ceci :

    Screenshot showing the C# code for the new async Button_Click event handler.

    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();
    }
    
  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 ici que les choses deviennent intéressantes. Le gestionnaire d’événements par défaut se présente ceci :

    Screenshot showing the C# code for the default Button_Click event handler.

    Modifions-le de sorte qu’il se présente comme ceci :

    Screenshot showing the C# code for the new async Button_Click event handler.

    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();
    }
    

Que venons-nous de faire ?

Le code utilise des 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écution de l'application

Il est temps de générer, déployer et lancer l’application UWP « Hello World » pour voir à quoi elle ressemble. Voici comment procéder.

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

    Screenshot showing the drop-down box open next to the Play button with 'Local Machine' selected.

    (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. Examinez votre application, qui apparaît vite après la disparition d’un écran de démarrage. L’application doit ressembler à ceci :

    Screenshot showing the running UWP 'Hello World' application.

  3. Cliquez sur le bouton Hello World.

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

  4. Pour fermer l’application, cliquez sur le bouton Arrêter le débogage dans la barre d’outils. (Vous pouvez également choisir Déboguer>Arrêter le débogage dans la barre de menus ou appuyer sur Maj+F5.)

Il est temps de générer, déployer et lancer l’application UWP « Hello World » pour voir à quoi elle ressemble. Voici comment procéder.

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

    Screenshot showing the drop-down box open next to the Play button with 'Local Machine' selected.

    (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. Examinez votre application, qui apparaît vite après la disparition d’un écran de démarrage. L’application doit ressembler à cette image :

    Screenshot showing the running UWP 'Hello World' application.

  3. Sélectionnez le bouton Hello World.

    Votre appareil Windows 10 ou version ultérieure dira 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éboguer>Arrêter le débogage dans la barre de menus ou appuyer sur Maj+F5.)

Étapes suivantes

Félicitations ! Vous avez terminé ce didacticiel. Nous espérons que vous avez appris quelques principes fondamentaux sur UWP et l’IDE Visual Studio. Pour en savoir plus, passez au tutoriel suivant :

Voir aussi